Kode Share, Next Prev Judul, dan Related Post untuk Blogger

Baca Juga

Kode Share, Next Prev Judul, dan Related Post untuk Blogger. Widget yang wajib ada di bawah tiap postingan blog untuk Social SEO, Internal Link, Navigasi Blog, dan meningkatkan Pageviews.

KODE SOCIAL SHARE

Social Share adalah tombol link untuk membagikan (share) atau menyebarkan postingan blog ke media sosial. Tombol share ini biasanya dipasang di bawah artikel.

Pasang kode berikut ini di bawah kode <data:post.body/>  yang kedua atau ketiga.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5156a09e76c1568f"></script>
<!-- AddThis Button END -->
</b:if>

KODE NEXT PREV Judul Posting

Next Prev judul posting maksudnya adalah link newer post - older post (posting terbaru - lebih lama) yang biasa ada di akhir postingan. Kode berikut ini akan menggantikan Next Previous Post menjadi judul postingan sehingga lebih seo dan user friendly.

Pasang kode berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#blog-pager {border-top:1px solid #E5E5E5;margin:15px 0 0;padding:10px 0;width:100%;}
#blog-pager-newer-link{float:left;width:45%;text-align:left;margin:0;padding:0}
#blog-pager-older-link{float:right;width:45%;text-align:right;margin:0;padding:0}
#blog-pager-older-link h6{margin:0;padding:0;text-align:right;font-family:Oswald,Arial,sans-serif;font-size:16px;color:#777;text-transform:uppercase;line-height:1.625;font-weight:500}
#blog-pager-newer-link h6{margin:0;padding:0;text-align:left;font-family:Oswald,Arial,sans-serif;font-size:14px;color:#777;text-transform:uppercase;line-height:1.625;font-weight:500}
#blog-pager-newer-link a,#blog-pager-older-link a{color:#666;text-transform:none;font-size:15px;font-family:Arial;padding:0;background:none}
#blog-pager-older-link a:hover, #blog-pager-newer-link a:hover{color:#48d;}
</style>
<div class='blog-pager' id='blog-pager'>
<div id='blog-pager-newer-link'>
    <b:if cond='data:newerPageUrl'>
        <h6>Previous</h6>
      <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/>
<h6>Previous</h6>
Anda sedang membaca artikel terbaru
    </b:if>
   </div>
<div id='blog-pager-older-link'>
    <b:if cond='data:olderPageUrl'>
        <h6>Next</h6>
      <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/>
<h6>Next</h6>
Anda sedang membaca artikel terakhir
    </b:if>
   </div></div>
  <div class='clear'/>
<script type='text/javascript'>
$(document).ready(function(){
var olderLink = $(&quot;a.blog-pager-older-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-older-link&quot;).load(olderLink+&quot; .post-title:first&quot;, function() {
var olderLinkTitle = $(&quot;a.blog-pager-older-link&quot;).text();
$(&quot;a.blog-pager-older-link&quot;).text(olderLinkTitle);//rgt
});
var newerLink = $(&quot;a.blog-pager-newer-link&quot;).attr(&quot;href&quot;);
$(&quot;a.blog-pager-newer-link&quot;).load(newerLink+&quot; .post-title:first&quot;, function() {
var newerLinkTitle = $(&quot;a.blog-pager-newer-link:first&quot;).text();
$(&quot;a.blog-pager-newer-link&quot;).text(newerLinkTitle);
});
});
</script>
</b:if>

KODE RELATED POSTS dengan Gambar Thumbnail

Related Posts adalah daftar postingan dengan label yang sama. Jika tidak muncul, kemungkinan besar tidak ada label yang sama, atau bahkan postingannya tiak menggunakan label.

Pasang kode berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdSGAwymyyVGQms7VDD3w2UK2HCWEs7G0LHOZiNXB3Rh0G8m7PYPSASoxunpwAZTL28gweAdAI8fKOh8UqP-4RJg9XORgTyHmw1ZhO7CaFq-vwbLsQLTGxzMBwWi2ZGjd7hnFNujaTyHwx/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>
<style>
#related_posts{margin-top:15px;padding-top:10px;border-top:1px solid #ddd}
#related_posts h4 {color:#FD4646;margin: 0px 0px 5px;font-size: 130%;font-family:Arial;font-weight: 500;}
#related_img{margin:0;padding:0;}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px 0;}
#related_img li a{color:#2672a0;}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:15px;}
#related_img .news-text{display:block;text-align:left;font-weight:400;text-transform:none;color:#333;font-size:12px;line-height:16px}
#related_img img{float:left;margin-right:7px;padding:2px;width:60px;height:60px;max-width:100%;background:#fff}
</style>
      <div id='related_posts'>
        <h4>Related Posts:</h4>
        <b:loop values='data:post.labels' var='label'>
          <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
        </b:loop>
        <ul id='related_img'>
          <script type='text/javascript'>relatpost();</script>
        </ul>
      </div>
</b:if>
<span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span> </div>

Ingat ya, semua kode dipasang di bawah kode <data:post.body/> untuk halaman dalam (single post), yaitu kode yang kedua atau ketiga.

Good Luck & Happy Blogging! (www.contohblog.com).*