Blogger post pager with title and thumbnail

blogger post pager with title and thumbnail


Blogger post pager with title and thumbnail foi criado por kompiajaib e estamos compartilhando pois isso torna o blogger mais bonito uma vez que tem além de title isso tem uma thumbnail atrativa onde pode chamar mais atenção para que isso torne suas páginas mais visualizadas, todo incremento que gere mais pageviews é bom para o blog uma vez que vai diminuir a taxa de rejeição então se deseja instalar no seu template siga os passos abaixo:


Instalando o Blogger post pager with title and thumbnail 

Faça login no blogger então va no menu tema editar HTML/JavaScript com as teclas combinadas CTRL+F então vamos salvar primeiro o CSS procure por </head> e acima disso copie e cole o seguinte código: 


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.halaman-kanan,.halaman-kiri{transition:all .3s ease-in-out}
.halaman{margin:0;padding:0;min-height:170px;height:auto}
.halaman-kanan,.halaman-kiri{color:#666;position:relative;background:#000;background:rgba(0,0,0,.6);width:50%;min-height:170px;-moz-box-sizing:border-box;margin:0}
.halaman-kiri{height:auto;float:left;padding:20px 10px 20px 40px;text-align:left;box-sizing:border-box}
.halaman-kanan,.halaman-kiri{-webkit-box-sizing:border-box}
.halaman-kanan{height:auto;float:right;padding:20px 40px 20px 10px;text-align:right;box-sizing:border-box}
.current-pageleft,.current-pageright,.halaman-kanan a,.halaman-kiri a{font-size:16px;font-weight:bold;background:0 0;text-decoration:none;line-height:1.1}
.halaman-kanan a,.halaman-kiri a,.current-pageleft,.current-pageright{color:#fff;}
#blog-pager,.isihalaman-kanan,.isihalaman-kiri{margin:0!important}
.panahkanan,.panahkiri,.halaman-kiri a div:before,.halaman-kanan a div:before{position:absolute;top:50%;margin-top:-8px;font-size:18px!important;}
.panahkiri,.halaman-kiri a div:before{left:10px}
.panahkanan,.halaman-kanan a div:before{right:10px}
.halaman-kanan a:hover,.halaman-kiri a:hover{text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);}
.isihalaman-kanan img,.isihalaman-kiri img{position:absolute;top:0;width:100%;height:100%;z-index:1}
.isihalaman-kanan img{right:0}
.isihalaman-kiri img{left:0}
.halaman-kiri a div, .halaman-kanan a div,.current-pageleft,.current-pageright {position: absolute;bottom: 10px;z-index: 3;width: 100%;padding:0 10px;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
.halaman-kiri a div,.current-pageleft{left:0;padding-left:40px;}
.halaman-kiri a div:before{content:'\f053';font-family: FontAwesome;}
.halaman-kanan a div,.current-pageright  {right:0;padding-right:40px}
.halaman-kanan a div:before{content:'\f054';font-family: FontAwesome;}
.halaman-kiri a div h6,.halaman-kanan a div h6,.pager-title-left{font-weight:light}
.blog-pager-newer-link:after,.blog-pager-older-link:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;background:-moz-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:-webkit-linear-gradient(top,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);background:linear-gradient(to bottom,rgba(63,71,78,0) 0,rgba(63,71,78,0) 21%,rgba(63,71,78,.65) 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#003f474e', endColorstr='#a63f474e', GradientType=0 );transition:all .4s ease-in-out}
.halaman-kanan a:hover:after,.halaman-kiri a:hover:after{opacity:0}
@media screen and (max-width:414px){.halaman-kiri,.halaman-kanan{width:100%;}
}
/*]]>*/
</style>
</b:if>

Então procure o código  do pager do seu Blogger conforme mostrado abaixo:

<b:includable id='nextprev'>
..........
..........
..........
</b:includable>

Então substitua pelo código: 

            <b:includable id='nav-post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='halaman'>
  <div class='blog-pager' id='blog-pager'>
<div class='halaman-kiri'>
<div class='isihalaman-kiri'>
    <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 + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#171; Next Post</a>
      </span>
<b:else/>
      <span class='current-pageleft'><i class='fa fa-chevron-left panahkiri'/><span class='pager-title-left'>Next</span><br/>This Is The Current Newest Page</span>
    </b:if>
<div class='clear'/>
</div>
</div>
<div class='halaman-kanan'>
<div class='isihalaman-kanan'>
    <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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Previous Post &#187;</a>
      </span>
<b:else/>
<span class='current-pageright'><i class='fa fa-chevron-right panahkanan'/><span class='pager-title-left'>Previous</span><br/>This Is The Oldest Page</span>
    </b:if>
<div class='clear'/>
</div>
</div>
  </div>
<div class='clear'/>
</div>
</b:if>
            </b:includable>
            <b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
      <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 + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></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 + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>
     <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a>
    </div>
    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl' expr:title='data:homeMsg'><data:desktopLinkMsg/></a>
    </div>
  </div>
  </b:if>
  <div class='clear'/>
</b:includable>

Então, adicione o seguinte código HTML abaixo o post:

         <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <b:include name='nav-post'/>
        </b:if>

Logo abaixo vai ver o código assim:

<b:includable id='post' var='post'>
<article class='post hentry'.............
..........
..........
..........
</article>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include name='nav-post'/>
</b:if>
</b:includable>

Então adicione o JavaScript acima de </body> 

<script type='text/javascript'>
//<![CDATA[
(function ($) { var newerLink = $('a.blog-pager-newer-link'); var olderLink = $('a.blog-pager-older-link');
    $.get(newerLink.attr('href'), function (data) { var thumb = $(data)
            .find('.post-body')
            .length == 1 ? "<img alt='" + $(data)
            .find('.post-title')
            .text() + "' src='" + $(data)
            .find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
            .attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
        newerLink.html(thumb + '<div><h6>Next</h6><h5>' + $(data)
            .find('.post-title')
            .text() + '</h5></div>') }, "html");
    $.get(olderLink.attr('href'), function (data2) { var thumb2 = $(data2)
            .find('.post-body')
            .length == 1 ? "<img alt='" + $(data2)
            .find('.post-title')
            .text() + "' src='" + $(data2)
            .find('.post-body img:first').attr('src', function(i, src) {return src.replace(/.*?:\/\//g , "//").replace( 's1600', 's386' );})
            .attr('src') + "' class='pager-thumb' width='386' height='170'/>" : "";
        olderLink.html(thumb2 + '<div><h6>Previous</h6><h5>' + $(data2)
            .find('.post-title')
            .text() + '</h5></div>') }, "html") })(jQuery);
//]]>
</script>


Salve e certifique se que esta utilizando fontawesome.



Click to comment