sábado, 5 de setembro de 2015

Previous e Next post widget blogger

previous-and-next-post-widget-para-blogger


Hoje vamos mostrar aqui como adicionar next and previous post widget para seu blogger para que serve isso? para seu blogger isso vai dar uma ótima navegação para seu usuário, além de ajudar seu visitante a um novo post ele também vai ajudar a reduzir o bounce rate a taxa de rejeição de seu blogger dando maior visibilidade para o próximo ou post anterior. sem que o visitante saia da página para aplicar isso a seu blogger siga os passos abaixo



Passos a serem feitos para implementação no blogger
Faça login em sua conta no blogger
Vá no menu modelo  >> editar html
logo apos desdobre todo código html
com as teclas combinadas CTRL+F procure por <b:include name='nextprev'/>  e substitua por esse código:
<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:include name='nextprev'/> </b:if></b:if>

Agora busque por <div class='related posts>  ou  <div id='related post>  ou abaixo de
 <data: post.body />  copie e cole o codigo abaixo e cole acima da tag encontrada no seu  template


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='blog-pager' id='blog-pager'> <div class='pager-isi'> <b:if cond='data:newerPageUrl'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> <b:else/> <span class='linkgrey left'><h6>Next</h6><h5>This is the most recent post.</h5></span> </b:if> <b:if cond='data:olderPageUrl'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> <b:else/> <span class='linkgrey right'><h6>Previous</h6><h5>This is the last post.</h5></span> </b:if> </div> </div> <script type='text/javascript'> //<![CDATA[ $(window).load(function(){ var newerLink = $('a.blog-pager-newer-link').attr('href'); $('a.blog-pager-newer-link').load(newerLink + ' .post-title:first', function () { var newerLinkTitle = $('a.blog-pager-newer-link').text(); $('a.blog-pager-newer-link').html('<h6>Next</h6><h5>' + newerLinkTitle + '</h5>'); }); var olderLink = $('a.blog-pager-older-link').attr('href'); $('a.blog-pager-older-link').load(olderLink + ' .post-title:first', function () { var olderLinkTitle = $('a.blog-pager-older-link').text(); $('a.blog-pager-older-link').html('<h6>Previous</h6><h5>' + olderLinkTitle + '</h5>'); }); }); //]]> </script> </b:if>


Agora vamos aplicar o CSS procure por  ]]</b:skin> então copie o código abaixo e cole acima disso

.pager-isi{background:white;overflow:hidden;border:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} .pager-isi a,.pager-isi .linkgrey{width:50%;display:block;float:left;padding:10px 0;font-size:120%} .pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none} .pager-isi h6{color:#575757;font-size:105%;font-weight:bold} a.blog-pager-newer-link{background-image:url(http://4.bp.blogspot.com/-r8YeL5MClP8/UIT2mjkPR6I/AAAAAAAAGGM/QM_4AcjZNfY/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left} a.blog-pager-older-link{background-image:url(http://1.bp.blogspot.com/-SovF-2Yqzx8/UIT2nmYLCuI/AAAAAAAAGGU/FjDXOtx5erk/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right} .pager-isi .linkgrey.left{padding-left:3.5%;text-align:left} .pager-isi .linkgrey.right{padding-right:3.5%;text-align:right}

Você podera salvar também esse código abaixo acima de </head> se preferir  escolha entre o modo acima ou este

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.pager-isi{background:white;overflow:hidden;border:1px solid #DDD;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} .pager-isi a,.pager-isi .linkgrey{width:50%;display:block;float:left;padding:10px 0;font-size:120%} .pager-isi a:hover,.pager-isi .linkgrey{background-color:#F7F7F7;text-decoration:none} .pager-isi h6{color:#575757;font-size:105%;font-weight:bold} a.blog-pager-newer-link{background-image:url(http://4.bp.blogspot.com/-r8YeL5MClP8/UIT2mjkPR6I/AAAAAAAAGGM/QM_4AcjZNfY/s1600/small-left.png);background-repeat:no-repeat;background-position:2% center;padding-left:3.5%;text-align:left} a.blog-pager-older-link{background-image:url(http://1.bp.blogspot.com/-SovF-2Yqzx8/UIT2nmYLCuI/AAAAAAAAGGU/FjDXOtx5erk/s1600/small-right.png);background-repeat:no-repeat;background-position:98% center;padding-right:3.5%;text-align:right} .pager-isi .linkgrey.left{padding-left:3.5%;text-align:left} .pager-isi .linkgrey.right{padding-right:3.5%;text-align:right}
</style></b:if>

Salve o template e confira o resultado.


NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner