Tutorial completo de implementação do código Floating NextPrev - setas de navegação entre postagens para blogger.
Antes de mais nada quero parabenizar ao Claudio Sanches do ferramentasblog que desenvolveu o plugin original para o wordpress e também ao Paulo Estevão do Códigosblogque fez toda a adptação do código para que ele fosse usado na Plataforma Blogger.
 |
| Plugin em funcionamento no Blogger |
Antes de ensinar como colocar os botões de navegação no seu blog, quero deixar bem claro que todo o sistema foi desenvolvido pelo Claudio Sanches, apenas adaptei o código para funcionar no Blogger.
Siga o tutorial:
1) Faça login no Blogger, entre em “Modelo” – > “Editar HTML”. Depois marque a caixa “Expandir modelos de widgets”;
2) Procure (Ctrl + f) por ]]></b:skin> e cole o seguinte código logo ABAIXO da tag encontrada:
<b:if cond='data:blog.pageType == "item"'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
var alts = jQuery.noConflict();
alts(document).ready(function(){
var newerLink = alts("a.blog-pager-newer-link2").attr("href");
alts("a.blog-pager-newer-link2").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = alts("a.blog-pager-newer-link2").text();
alts("a.blog-pager-newer-link2").text(newerLinkTitle);
});
var olderLink = alts("a.blog-pager-older-link2").attr("href");
alts("a.blog-pager-older-link2").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = alts("a.blog-pager-older-link2").text();
alts("a.blog-pager-older-link2").text(olderLinkTitle);//rgt
});
});
var fnp = jQuery.noConflict();
fnp(document).ready(function(){
fnp(".fnp-previous").mouseenter(function(){
fnp(".fnp-content-left").stop().animate({
left:-10
},700);
fnp(".fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link").stop().delay(500).animate({
opacity:1
},500);
});
fnp(".fnp-previous").mouseleave(function(){
fnp(".fnp-content-left").stop().animate({
left:-400
},700);
fnp(".fnp-content-left .fnp-nav-title,.fnp-content-left .fnp-nav-link").stop().animate({
opacity:0},500)
});fnp(".fnp-next").mouseenter(function(){
fnp(".fnp-content-right").stop().animate({
right:-10
},700);
fnp(".fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link").stop().delay(500).animate({
opacity:1
},500);
});fnp(".fnp-next").mouseleave(function(){
fnp(".fnp-content-right").stop().animate({
right:-400
},700);
fnp(".fnp-content-right .fnp-nav-title,.fnp-content-right .fnp-nav-link").stop().animate({
opacity:0
},500);
});
});
</script>
</b:if>
3) Procure (Ctrl + f) por <b:includable id=’nextprev’>, selecione todo o código a partir dessa tag até a primeira tag </b:includable>.
Ou seja, selecione isso:
Ou seja, selecione isso:
<b:includable id='nextprev'> ... </b:includable>
Obs.: Existem várias tags </b:includable>, é importante você selecionar até a primeira que você ver.
4) Substitua o código selecionado por:
<b:includable id='nextprev'> <b:if cond='data:blog.pageType == "item"'> <div id='fnp-nav'> <div class='blog-pager2' id='blog-pager2'> <b:if cond='data:newerPageUrl'> <div class='fnp-previous'><a rel='prev'><div class='fnp-box-left'><div class='fnp-content-left'><div class='fnp-content-border'/><div class='fnp-nav-title'>Anterior</div><div class='fnp-nav-link'><a class='blog-pager-newer-link2' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle' style='display: block;'/></div></div></div></a></div> </b:if> <b:if cond='data:olderPageUrl'> <div class='fnp-next'><a rel='next'><div class='fnp-box-right'><div class='fnp-content-right'><div class='fnp-content-border'/><div class='fnp-nav-title'>Próximo</div><div class='fnp-nav-link'><a class='blog-pager-older-link2' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'/></div></div></div></a></div> </b:if> </div> <div class='clear'/> </div> </b:if> <b:if cond='data:blog.pageType != "item"'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>Página Anterior</a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Próxima Página</a> </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if> </div> <div class='clear'/> </b:if> </b:includable>
Obs.: A segunda parte do código acima, depois de “<b:if cond=’data:blog.pageType != "item"’>” é o código de navegação de páginas do blog, essa parte pode ser editada como quiser, só não retire a condicional (if).
5) Agora devemos aplicar o estilo CSS. Escolha um dos modelos abaixo, abra o link e copie o código correspondente.
6) Agora procure por ]]></b:skin> e cole o código antes dessa tag encontrada.
7) Teste, se não deu nenhum erro e a página visualizada não sofreu alteração, salve. Os botões de navegação só serão vistos quando alguma postagem for aberta.
Espero que gostem do resultado.
Obs.: Não copie o post! Tivemos trabalho em desenvolver o widget, caso queira compartilhar o código, coloque os créditos do Códigos Blog e do Ferramentas Blog.
0 comentários:
Postar um comentário