Tutorial - Menu para tutoriais e utilitários


Eu sei, quando eu não tenho avisos ou coisas do tipo para falar, costumo enrolar feiamente no primeiro parágrafo. haha Enfim, vamos à postagem. Hoje decidi trazer ao blog, um menu super simples que serve para organizarmos os goodies e tutoriais em uma página, ou até para fazermos wishlists. Na verdade ele serve para várias coisas, então vai de cada um. Ele está bem simples mesmo, fiz agora de manhã bem rapidinho, mas espero que gostem.


Preview: x


Primeiro: Se quiser usar a mesma fonte que eu utilizei, a "ABeeZee", procure por <head> e abaixo cole o seguinte código:
<link href='http://fonts.googleapis.com/css?family=ABeeZee' rel='stylesheet' type='text/css'/>

Tutorial:

1. Vá no seu HTML, abra a primeira setinha e procure por ]]></b:skin> Abaixo, cole:
.goodies {
background: #f5f5f5; /* Cor de Fundo */
font-family: 'ABeeZee', sans-serif; /* Fonte */
font-size: 12px; /* Tamanho da Fonte */
text-shadow: 1px 1px 0px #fff;
color: #adadad; /* Cor da Fonte */
margin-bottom: 3px; 
padding: 6px 6px 6px 6px;
box-shadow: 0px 1px 1px #dadada; 
-webkit-transition: all ease-out 0.5s;
}

.goodies:hover {
background: #f5f5f5; /* Cor de Fundo ao passar o mouse */
font-family: 'ABeeZee', sans-serif; 
font-size: 10px;  /* Tamanho da fonte ao passar o mouse. Deixe dois números a menos que antes. */
text-shadow: 1px 1px 0px #fff;
color: #adadad; /* Cor da Fonte ao passar o mouse */
padding: 6px 10px 6px 10px;
margin-bottom: 3px; 
border-bottom: 1px solid #fa2263; /* Borda de Baixo */
}

2. No HTML da sua página, ou até em um gadget HTML/JavaScript, cole:
<a class="goodies" href="LINK">NOME</a>

É isso por hoje, espero que tenham gostado do menuzinho. Beijos. >3<

24 comentários:

  1. AOSKASOK', também fiz o mesmo processo que você, u-u Saí de férias antes de todo mundo, e_e' Até que enfim está livre, demorou, hein! Eu já saí em Junho \o\

    Adorei o menu, OOOOMG ♥ Muito divo, sério *OO* Pena que não faço páginas de tutoriais e goodies, OKASKOA' -q

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
  2. Eu simplesmente amoooo esse menu, cara, é tão lindo! Ele é simples e útil!
    Eu sempre danço nas festas, por mais que seja um micasso AUHSUAHUA
    Beijos!
    Bonjour, Une Glacée ♥

    ResponderExcluir
  3. Amei o menu, lindo, lindo, lindo mil vezes lindo <33 Beijos-
    Trufa-de-menta ^-^

    ResponderExcluir
  4. Que fofo! Adorei os previews, vou usar algum dia >.<
    seguindo~

    Kawaii Land

    ResponderExcluir
  5. Ficou super fofo o menu, eu curti ;)
    Obrigado pela visitinha lá no UH :3

    undercover-html.blogspot.com

    ResponderExcluir
  6. Seria ótimo se juntasse o outro aqui!

    ResponderExcluir
  7. Ingrid, te amo. Primeiro o lay free divo que tá fazendo mó sucesso, agora esse tuto. Tava suuuuuuuuuuuuuuper necessitada disso e o que eu mais gosto é que eles SEMPRE funfam. <3 Obrigada. :3

    ResponderExcluir
  8. Ensina esse efeito hover das imagens. Amoney. :c

    ResponderExcluir
  9. Gostei desse menu Ingrid , vou utilizar no meu próximo layout C:

    morango-mordido.blogspot.com.br/
    Visita?

    ResponderExcluir
  10. Adorei o layout divo e adorei o tutorial, cansa de ser diva não -q shauhsua' Beijãos!

    ResponderExcluir
  11. Que fofo ele Ingrid, acho que vou usar como menu do blog, sei lá, estou indecisa, acho que estou pegando de você rs. Vida loka você adiantando as férias, agente tem direito a 24 faltas, então gaste as 24 u_u -n

    ResponderExcluir
  12. Querida não consegui ver a preview,é bem útil ne. Legal :*

    clube--teen.blogspot.com
    DONAS: BRENDA E YASMIN

    ResponderExcluir
    Respostas
    1. Todo mundo conseguiu ver, não tenho culpa se com você foi diferente. :*

      Excluir
  13. Será que eu já comentei aqui? Não lembro :x Se já, só modera um, por favor? >3<
    Lindo o menu *u*

    - Modern HTML

    ResponderExcluir
  14. Oi, achei seu blog muito fofoo e de grande ajuda com esse tutoriais, eu também tenho um comecei com ele hoje, e eu adoraria que você o visitasse, vê se aprova se pode me dar alguns conselhos e coisinhas hihi passa lá por favor Ingrid :) http://todaconectada.blogspot.com.br/
    Agradecida des de já :)))))

    ResponderExcluir
  15. *O* Que menu fofo :3 Já estou a fazer o meu novo lay, provavelmente vou usar, sim? ASPOASPOASK' Ingrid a faltar à escolinha T^T
    Kiss ~

    letterofpain.blogspot.com

    ResponderExcluir
  16. Adorei esse menu, vou utilizá-lo no layout que vou pôr em breve. Seguindo!!

    Bruno Dias // TC

    ResponderExcluir
  17. Bem simples e fofo ^^

    http://worldofthel.blogspot.com.br/

    ResponderExcluir
  18. Eu gostei do menuzinho, muito legal e fofinho o3o
    Adorei o menu, sérious. Você parece eu adiantando as férias, só que eu só adianto um diazinho ;-;
    KKKKKKKKKKKKKKKKK ninguém dança essas coisas na escola não KKKKKKKK que pena Ç.Ç
    Adorei o post e dá uma passadinha lá no meu blog se puder?
    beijinhus~♥
    Naka-chan||@Naka-chan no Sekai (N.S)

    ResponderExcluir
  19. Adorei o menu, talvez use com os créditos. O novo layout está lindo. (eu atrasada)

    Beijos | Empire Html ✿

    ResponderExcluir
  20. Super lindo o menu!!♥ que blog lindo
    http://fabiolucas92.blogspot.com.br/

    ResponderExcluir
  21. Aii, Adorei, lindoo seu menu *-*

    ResponderExcluir

Obrigada pelo seu comentário, sua opinião é muito importante!
Se seu perfil for trancado, não se esqueça de deixar o link do seu blog ou pelo menos o nome, para que eu possa retribuir. ♥

« » +