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.
Códigos
/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHvP3I-0yIsfOX8phnkNrXEGbPsyZAR8vo74GFVtnYBZcR1jstqB5kYH2PJ-p5UVsFrCGx25_MYLBg9XTCvI-yIjf2MaQGGaSHIWYj6sxBZ6VeCX8mMkl8sOUXaOEWwo_8805edIbPOlfg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnEoPY841JvXAjxH1PSpjdg6Sr5JUpAfHh3XXdY62fCV0NonVWXgsv2tRLxkuZjsc7ba58NB33HHyvN2s_xUsbh-jfRf4rFjDLjTZRImCkybLAbTJgu8PpMRTJp80yaZly2bia5KeSf1dH/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}
----------------------------------- */
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHvP3I-0yIsfOX8phnkNrXEGbPsyZAR8vo74GFVtnYBZcR1jstqB5kYH2PJ-p5UVsFrCGx25_MYLBg9XTCvI-yIjf2MaQGGaSHIWYj6sxBZ6VeCX8mMkl8sOUXaOEWwo_8805edIbPOlfg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnEoPY841JvXAjxH1PSpjdg6Sr5JUpAfHh3XXdY62fCV0NonVWXgsv2tRLxkuZjsc7ba58NB33HHyvN2s_xUsbh-jfRf4rFjDLjTZRImCkybLAbTJgu8PpMRTJp80yaZly2bia5KeSf1dH/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.
Heey! Minhas provas ainda não começaram, então acho que tenho mais tempo para estudar :v
ResponderExcluirMDSMDS 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}
rs boa sorte com as provas
ExcluirJá te coloquei nos afiliados! :3
ResponderExcluirNunca vi esse tuto mas me parece bem últil!!!
Desculpe não sou boa em português :(
entendo. hihi tudo bem
ExcluirOlá, eu vou bem :3
ResponderExcluirEu 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
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
ExcluirClaro amore aqui http://chacomanjos.blogspot.com.br/2013/08/colocando-icone-de-autor-nos-comentarios.html
ResponderExcluir