23 de jul. de 2013

Tutorial: menu para lista (utilitários/tutoriais)

||
Mudei o estilo das ilustrações das postagens e gostaria que vocês dissessem se gostaram ou não.


Boa tarde, eu deveria ter postado ontem, mas não deu tempo. Estava frio e eu fiquei o dia todo no meio dos cobertores. Ontem de noite estava 6 graus e essa madrugada, os termômetros marcaram 0. Quem vai ir fazer um chocolate quente pra mim? uehuehe... ninguém, Maria Eduarda. Eu não aguento mais, meu pés estão congelando, minhas mão então nem se fala. E a pior coisa: tomar banho. Mas mesmo assim eu tomo, não se preocupem hahah, e levantar de manhã também é ruim. E dormir por causa do peso dos cobertores. E comer porquê tem que tirar as mão do bolso. Tem muitas coisas, uma lista enorme, por isso vou ficar quieta e ir logo para a postagem.

Eu trouxe hoje o tutorial do menu que eu usei na minha página de tutoriais e na de utilitários, não sei se gostaram e tal, mas eu trouxe. Espero que usem, ele é bem simples, tem um hover bem simples também, não é nada exagerado. Se quiser ver como é, [preview].

1. Vamos no HTML do seu blog, e pesquisamos por ]]></b:skin>.
Depois que encontrar, cole o seguinte código acima de ]]></b:skin>.

/*** Menu de goodies ***/
.goodies {
display: block; 
font-size: 8pt; /*** tamanho da fonte do menu ***/
font-family: verdana; /*** fonte do menu ***/
line-height: 15px; 
border-bottom : 1px solid #f4f4f3;  /*** cor, grossura e estilo da borda de baixo ***/
text-indent: 5px; 
vertical-align: middle; 
background: url('http://i339.photobucket.com/albums/n464/herycka20/mc08.gif') no-repeat /*** Altere a imagem ***/
left; 
padding-left: 10px; 
padding-bottom: 2px;
}
.goodies:hover {
display: block;
border-bottom: 1px dashed #E0DCD6; /*** cor, grossura e estilo da borda de baixo hover***/
vertical-align: middle; 
padding-left: 10px; 
padding-bottom: 2px;
background: #ebebeb url('http://i339.photobucket.com/albums/n464/herycka20/mc09.gif') no-repeat left; /*** Altere a cor de fundo quando passa o mouse se quiser ou a imagem hover ***/
}

Mude o que quiser, onde está em dastaque são os trechos que podem ser alterados.

2. Agora vamos no HTML da sua página de utilitários/tutoriais e colar esse código:
<div style="float: left; width: 49%;">
<div class="goodies">
<a href="http://www.blogger.com/URL_AQUI">LINK</a> </div>
<div class="goodies">
<a href="http://www.blogger.com/URL_AQUI">LINK</a> </div>
</div>
<div style="float: right; width: 49%;">
<div class="goodies">
<a href="http://www.blogger.com/URL_AQUI">LINK</a> </div>
<div class="goodies">
<a href="http://www.blogger.com/URL_AQUI">LINK</a> </div>
</div>

Agora troque as partes destacadas pelo link da postagem e o nome. Pronto.

Se você quiser que os link abram em uma nova guia (o que eu não acho necessário, até porquê se a pessoa quiser que abra em uma nova guia ela não vai se arriscar, ela vai direto no ctrl ou abre em nova guia com o botão direito...) mas mesmo assim se quiser, coloque assim no HTML da página ao envés de outro código:

   <div>
<div class="heart">
<a href="URL_AQUI" target="_blank">TÍTULO 1</a> </div></div>

Só isso, beijos. Dúvidas na aqui ou na ask, até mais.
Tuto by: HP

23 comentários:

  1. Adorei o tuto!

    vidadeumasone.blogspot.com

    ResponderExcluir
  2. Eu te entendo amiga T-T Aqui também está um frio horrível .-.
    Mas, que graça de menu *O* Xonei <3
    E amei o tuto, super fácil. Com certeza vou usa no meu próximo lay *3*
    Beijos >.<
    milk-and-things.blogspot.com

    ResponderExcluir
  3. Aqui tambem esta frio, melhor esta de congelar. To aqui nas cobertas com chocolate quente quer um pouco u.u
    Amei o menu o gif é muito fofinho rs, amo menus com gifs.


    Retribui? | World of Dreams

    ResponderExcluir
  4. Fica realmente fofo, e simples. Eu amo layouts simples, e tutoriais simples. Deixa o blog clean e com ar de limpeza sabe? haahah'.

    Seguindo. Espero sua visita lá no meu blog, e se gostar só seguir
    Beijos
    sweetsecretfantasy.blogspot.com

    ResponderExcluir
  5. Que coisa mais <3 <3 <3 Vou usar no próximo lay que já estou criando.
    Um beijo
    http://bombasticmusics.blogspot.com

    ResponderExcluir
  6. E é por isso que eu não gosto do inverno! Estou congelando.
    O menu é bem fofo! *u*

    six--seconds.blogspot.com

    ResponderExcluir
  7. OMG, aqui tá muuuuuuuuuuuuuuito frio! Não estou aguentando UAHSUAHS'
    O menu é muito fofinho :3 Adorei o tutorial, bem explicadinho ^^

    Faz um tuto de como fazer uma blockquote fofa como a tua?
    Beijos ~~
    http://garotasatrevidas-s2.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Muito friio :c
      Obrigada :D

      Faço sim, vai ser o próximo tutorial que eu vou postar c:, bjo

      Excluir
  8. Eu não gosto do inverno! :(
    Que lindo o menu.

    e--mpire.blogspot.com

    ResponderExcluir
  9. Queria que aqui fizesse frio assim *u* adorei o menu,muito fofo.
    http://catchingfeelings-love.blogspot.com.br/

    ResponderExcluir
  10. Achei super fofo e discreto o Menu, muito lindo! *--*
    Quanto ao frio, queria eu sentir frio de novo! HAHA ~... A muito tempo não sei bem o que é frio, só em janeiro quando viajo pra ver minha família e amigos!
    Eu deixei o selinho la o blog pra você, dá uma passadinha la pra ver depois!
    Beijinhos ♥

    http://buu-world.blogspot.com.br/2013/07/selinho.html

    ResponderExcluir
    Respostas
    1. Obrigada!
      ai que chato :c Reclamo agora mas no verão que aqui fica 40 graus sinto uma falta haha
      Awn, vou ver sim! *--*

      Excluir
  11. Aiin eu adoro o frio, e sinto muito por ter me mudado de SP pra Fortaleza. Todo mundo só vem me falar de como tá frio porque sabem que eu adoro. Mesmo sofrendo com os pés e mãos congelados eu gosto kkkk. E sobre o menu, ele é muuuito fofo e super útil. Gostei de verdade. Beijos! ^^

    Rediscovering Dreams

    ResponderExcluir

- Eu sempre retribuo todos os comentários, SEMPRE;
- É permitido falar palavrão nos comentários, o que não pode é ser grosseiro com os outros;
- Aceito críticas construtivas, não ofensas;
- Sempre deixe o link do seu blog em baixo do comentários;
- Os comentários são moderados;
- Comentários do tipo "seguindo, segue de volta" ou algo do tipo não serão aceitos.

algumas carinhas para vocês usarem nos comentários:
(◕‿◕✿) ◕‿◕ (◡‿◡✿) ◑▂◐ ◑︿◐ ◑ω◐ ◑﹏◐