Tutorial - Blogroll Deslizante


Ontem me pediram para postar o tutorial do blogroll que usei no template passado. É um blogroll que fica lá no topo do blog, e quando você passa o mouse no nome, desliza o blogroll real e aparecem as imagens com os blogs. Ele ocupa pouquíssimo espaço, então recomendo bastante, também pode ser usado para colocar os parceiros, é um gadget a menos né? Lembrando: não repassem a porcaria do tutorial. Então, prontos para aprender? Tenham uma preview antes porque eu não sei explicar, go ~


1. No HTML do seu blog, procure por ]]></b:skin> Acima dessa tag, cole:
.roll{
width:159px; /***Largura do Blogroll inteiro***/
height:108px; /***Altura do Blogroll inteiro, aumente se adicionar mais imagens***/
float:left;
font-size:12px;
color: #fff; /***Cor da fonte***/
text-align:center;
font-family: calibri; /***Nome da fonte***/
padding: 4px;
background:transparent; /***Cor de fundo, caso queira transparente como está, deixe assim***/
z-index: 11;
margin-left:5px;
-webkit-transition-duration: .99s;
text-transform: uppercase;
margin-top:-450px; /***Quanto mais aumentar o número, mais o blogroll irá para o topo***/
overflow: hidden; }
.roll:hover{
margin-top:-342px;}
.roll img {
width:38px; /***Largura das Imagens***/
height:38px; /***Altura das Imagens***/
margin:0px;
opacity:0.6;
-webkit-transition-duration: .99s;}
.roll img:hover{
opacity:1;}

Algumas instruções:

- Mude apenas o que coloquei descrição

- height:108px; /***Altura do Blogroll inteiro, aumente se adicionar mais imagens***/

Como eu disse ali no código, você tem que aumentar esse número, caso adicione mais imagens ao blogroll. As imagens ficam ordenadas em fileiras de 3, certo? Vamos supor que sua imagem mede 50px de altura. Exemplo: Se você colocar 4 fileiras de imagens, vai colocar 50px.4 = 200px. Então vai ficar: height:200px;

- .roll:hover{ margin-top:-342px;} 

Para descobrir o número que você tem que colocar ali em margin top, pegue o número que colocou em margin-top:-450px; e subtraia pelo número que colocou em height:108px; Você tem que fazer isso, para descobrir o quanto o blogroll tem que descer, quando você passar o mouse. 

2. Em um gadget HTML/JavaScript, cole:
<div class="roll"><center>

<a href="Link Do Blog"><img src="Link da Imagem" title="Nome do Blog" /></a>

<a href="Link Do Blog"><img src="Link da Imagem" title="Nome do Blog" /></a>
    
<a href="Link Do Blog"><img src="Link da Imagem" title="Nome do Blog" /></a>

<a href="Link Do Blog"><img src="Link da Imagem" title="Nome do Blog" /></a>

<a href="Link Do Blog"><img src="Link da Imagem" title="Nome do Blog" /></a>

<a href="Link Do Blog"><img src="Link da Imagem" title="Nome do Blog" /></a>

</center><div class="par">Blogroll</div></div>

Ufa! Acabamos. Pois é gente, HTML também envolve matemática UASHAUSH' Tentei explicar o máximo possível, mas qualquer dúvida que vocês tenham, é só perguntar.

20 comentários:

  1. Eu já vi um semelhante em um blog, e é mega show *-*
    Aliás, ocupa menos espaço, e é lindo <3

    World Of Tutos

    ResponderExcluir
  2. Vou usar no meu outro blog, talvez, u_u' Divo demais o efeito \o\

    UAHUE' , é difícil mesmo se segurar para não mudar o layout ><* Eu mesma já quero mudar o meu, e.e

    Beijos,

    Juu-Chan do Nescau com Nutella e 4 Seconds.

    ResponderExcluir
    Respostas
    1. Use sim u_u Obrigaada \õ/
      UASHAUSH Pois é, mas eu aguentarei u_u

      Excluir
  3. UIHIHIHIHIS' Adorei o tutorial *u* Talvez use no próximo lay :p
    Kiss ~ Matemática, até no HTML #quandoéqueistovaiacabar-n?

    ResponderExcluir
  4. Realmente da vontade de mudar o layout toda hora, eu enjoo fácil fácil do meu já tô pensando em mudar ~
    adorei o efeito.. Ah, lembra quando você disse que estava seguindo o POD? Acho que você se enganou. Já já você muda o layout, seu blog taa crescendo muuuito ráapido

    ResponderExcluir
    Respostas
    1. Esqueci do link -burra .--.

      palace-of-designers.blogspot.com

      Excluir
    2. Ué gente, eu tinha seguido. Não foi, mas já segui lá, vê se foi agora /õ/ Que bom que gostou, fico feliz *o*
      Awn, espero que continue crescendo, mais e mais \õ/

      Excluir
  5. Que efeito lindo *u*
    ~Chu

    HTML Thing

    ResponderExcluir
  6. É lindo >< Só podemos usar como blogroll? Sei lá o.O Não dá pra usar menu e tal? O.O Vou colocar as imagens como um menu \O/ Dá, né? o.O
    Mas, mesmo assim, é muito lindo, ocupa muito pouco espaço e fui eu que pedi \o/ U_U

    ~lê beijos~

    ResponderExcluir
    Respostas
    1. Obg >3< Você pode usar no que quiser, é como eu disse, dá pra parceiros, etc. Dá sim õ/
      Obrigada por pedir, tá aí *-*

      Excluir
  7. Muito lindo e perfeito! <3 Muito legal o tutorial. ><

    Beijos Sweet Girl
    http://brenda-sweet-girl.blogspot.com.br/

    ResponderExcluir
  8. Muito bom o efeito, ocupa pouco espaço e é muito prático.
    Seguindo de volta u.u
    Kissus -->with-you-s2.blogspot.co, <---

    ResponderExcluir
  9. Eu havia visto esse tutorial em um Tumblr, achei super legal!
    Talvez eu use no próximo layout!
    pqngarota.tk

    ResponderExcluir
  10. Yo yo vim retribuir a visita, não conehcia esse efeito. Gostei bastante, já esta em meus favoritos. :3

    bunnycrazy(.net)

    ResponderExcluir
  11. Muito legal, ocupa espaço mesmo, e muito! (:

    Kisses <3
    Meu jardim Secreto (ou clique no perfil)

    ResponderExcluir
  12. Muito legal o tutorial, cara eu vou parar tentar de rimar sai feio demais rsrs

    ResponderExcluir
  13. Muito legal o tutorial,amora!Vou usar,ok?!
    http://morango-sabor.blogspot.com.br

    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. ♥

« » +