14/05/2015

17. Maratona CSS: Setas de paginação flutuantes no blogger

||

Olá linduxos, como vão indo? (Tipica entrada de postagem minha rs) Bom, hoje dei uma entradinha bem rápida aqui no blog, estou com o tempo um pouquinho esgotado por causa das provas e organizando o portfólio. Então hoje trago um tutorial que acho bem interessante, já havia o visto várias vezes mas sempre esquecia de postar, mas hoje finalmente lembrei. Aleluia!!!! <3 O que esse tutorial faz? Ele faz uma forma de navegação extra no blog, mas em vez de ser no rodapé fica nas laterais da postagem. Dependendo do botão que adicionar fica muito lindo.

01. Vá ate Editar HTML, usando o atalho CTRL+F procure por ]]></b:skin> e acima dele cole isso:

/* Links de navegação flutuante
----------------------------------- */
#blog-pager-newer-link {   /*-----botão do lado direito -postagens recentes----*/
float : left;
padding-left : 680px;     /* --ajuste as medidas aumentando ou diminuindo a numeração--*/
border : none;
}
#blog-pager-older-link {   /*----botão do lado esquerdo - postagens mais antigas----*/
float : right;
padding-right : 537px;    /* --ajuste as medidas aumentando ou diminuindo a numeração--*/
border : none;
}
.Blogprevlink{
margin-left:-100px; position:fixed;top:55%;display:block;text-decoration:none;width:54px;height:65px;z-index:99;
background:url(http://4.bp.blogspot.com/-FeHOY5F5Ve0/UgWuQ6757FI/AAAAAAAAASA/ydTmayGMZkc/s1600/button_prev.png) no-repeat; width:47px;
height:133px;
}
.Blogprevlink .detail{width:0;line-height:1.6em;overflow:hidden;position:absolute;top:0;left:70px;}
.Blogprevlink .detail span{padding:20px;display:block;height:100px;overflow:hidden;width:180px}
.Blognextlink{
margin-left:-100px; position:fixed;top:55%;display:block;text-decoration:none;width:55px;height:65px;z-index:99;
background:url(http://3.bp.blogspot.com/-IP9Rc29STno/UgWuOpgn01I/AAAAAAAAAR4/SoqbK53-TWk/s1600/button_next.png) no-repeat; width:47px;
height:133px;
}
.Blognextlink .detail{width:0;line-height:1.6em;overflow:hidden;position:absolute;top:0;left:70px;}
.Blognextlink .detail span{padding:20px;display:block;height:100px;overflow:hidden;width:180px}
#prevLink{left:10px !important}
#prevLink{left:30px}
#nextLink{right:30px; }
#nextLink .detail{right:70px !important;left:auto}
#nextLink{right:10px !important}
Entendo o código:


Negrito: É o endereço de URL das imagens (setas).
Itálico: É o tamanho dos botões, se você for fazer um botão personalizado você tem que configurar o tamanho certinho.

Agora é salvar e visualizar, gostaram? Espero que sim! Os créditos vão para o Mundo Blogger, viu? Beijinhos lindos. 

7 comentários:

  1. Heey! Minhas provas ainda não começaram, então acho que tenho mais tempo para estudar :v
    MDSMDS NECESSITO USAR ESSE TUTORIAL! (eu, a pessoa mais *decidida* do mundo, preciso fazer um layout, então vou usar os tutoriais da maratona <3)

    Beijos!
    denossaur.com {www.denossaura.blogspot.com.br}

    ResponderExcluir
  2. Já te coloquei nos afiliados! :3
    Nunca vi esse tuto mas me parece bem últil!!!
    Desculpe não sou boa em português :(

    ResponderExcluir
  3. Olá, eu vou bem :3
    Eu ando cheio de tarefas, tirei parte do horário de dormir para cuidar do blog, para ver se a coisa flui.
    Cara, eu estava com saudades do Bunny Crazy. Na época que eu blogava, isto é, quando comecei, esse era um dos blogs que mais me ajudavam, e quando voltei, até usei um lay free daqui.
    Mas o blog ficou parado por um tempo (eu sei do hacker e tal), e agora, eu quero participar daqui de forma mais efetiva sabe? Sem ser só como alguém que pega os códigos, e sim alguém que comenta, afinal isso também é importante.
    Acho que não entendi direito o que seria o tutorial, mas, quando fizer um novo layout testo, em prático entendo melhor :3

    rabbitsandwolfs.blogspot.com

    ResponderExcluir
    Respostas
    1. Anw obrigada =3 fico uper contente e feliz e desejo boa sorte com o blog, a setas de navegaçao e como postagens antigas e novas que ficam no roda pe so que as setas ficam do lado do corpo do layou exemdo o x e uma seta e o H e o template ai fica xHx =3

      Excluir
  4. Claro amore aqui http://chacomanjos.blogspot.com.br/2013/08/colocando-icone-de-autor-nos-comentarios.html

    ResponderExcluir