Koleksi Kode Related Post, Breadcrumbs, dan Auto Readmore untuk Modifikasi Template

Baca Juga

Koleksi Kode Related Post, Breadcrumbs, dan Auto Readmore untuk Modifikasi Template Bawaan Blogger.

Related Post (posting terkait), Breadcrumbs (navigasi link di atas judul), dan Auto Readmore adalah tiga elemen penting blog yang tidak ada di template bawaan blogger (blogger default theme).

Template bawaan blogger sudah SEO Friendly. Kita tinggal membuatnya responsive, dan menambahkan minimal tiga widget --related post, breadcrumbs, dan auto readmore-- untuk menjadikannya lebih ramah pengguna dan ramah mesin pencari.

Kode Auto Readmore

Auto Readmore adalah sebutan bagi tampilan posting di halaman depan blog (homepage) berupa judul, gambar thumbnail, dan kutipan (ringkasan, snippets, summary) yang diambil dari alinea pertama tulisan.

Template bawaan blogger menampilkan posting secara utuh. Bisa diringkas dengan klik Insert jump break saat menulis.

Dengan memasang kode berikut ini, semua postingan akan diringkas otomatis di halaman depan, halaman indeks atau halaman label, dan halaman hasil pencarian.

Dari banyak kode Auto Readmore yang tersebar di banyak blog, saya pilih auto readmore tanpa javascript berikut ini.

CSS: Simpan di atas kode ]]></b:skin>

.thumbnail-post {width:100px !important; height:80px !important; float:left; margin:0px 15px 5px 0px;} 

HTML: Ganti kode kode <data:post.body/> yang kedua dengan kode berikut ini:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'><img class='thumbnail-post' expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img class='thumbnail-post' expr:alt='data:post.title' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>
</b:if>
<div class='post-snippet'>
<data:post.snippet/>
</div>
<div class='rm-button-wrap'>
<a class='button' expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if> 

Kode Related Post

Related Posts atau artikel terkait adalah daftar posting yang satu label dengan postingan yang dibuka. Muncul di bawah artikel sehingga bisa meningkatkan pageviews blog.


Dari banyak kode realated posts yang tersebar di banyak blog, saya pilih kode dua kode related post berikut ini: related post simple dan plus gambar.

Related Post Simple

Copy & Paste kode berikut ini di atas kode ]]></b:skin>

#related-posts{float:left;width:100%;margin:10px;padding:1px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0;font-weight:500}
#related-posts a{color:#0973CF;font:14px Arial,Sans-serif;}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxv3wgHn0XvJ45WP2izj8xLgZwPw6kkR_fYyHzMDpgPbHkg8UBHQRnzyGwkNcqOXz1OdI0UbIf53srXAoHBQSrmcLOpZ0gtj07TcYrONLsOeEN3pxUkDGv6BJTmRaf4nkuX7Txv56baI/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

-  Copas kode berikut ini di atas kode </head>:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

Copas berikut ini di atas kode <div class='post-footer'> atau di bawah <data:post.body/> yang kedua:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<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=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
<div class='clear'/>
<div style='clear: both;'/>
</b:if>

Kode Related Post plus Gambar Thumbnail Responsive

- Copas di atas kode </head>

    <!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    #related-post {margin:0 auto;padding:0;}
    #related-post h4{position:relative;overflow:hidden;margin:10px 0 20px 0;font-size:120%;font-weight:700}
    #related-post h4:after{position:absolute;top:51%;overflow:hidden;width:78.3%;height:1px;content:&#39;a0&#39;;background-color:#ccc}
    #related-post h4 span{position:relative;display:inline-block;margin:0 10px 0 0}
    .relhead {font-size:100%;font-weight:normal;line-height:150%;overflow:hidden;padding:10px 0;}
    #related-summary .news-text {display:none;}
    ul#related-summary{margin:0 auto;padding:0;list-style:none;word-wrap:break-word}
    ul#related-summary li{position:relative;float:left;list-style:none outside none;padding:0;overflow:hidden;margin:0 10px 0 0;width:100%;max-width:175px;height:170px;transition:opacity .2s ease}
    ul#related-summary li a {display:block;}
    ul#related-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:100%;max-height:100px;vertical-align:middle;overflow:hidden;margin:0 0 10px;transition:all 1s ease-out}
    ul#related-summary li:hover img {opacity:0.96;}
    ul#related-summary li a.relinkjdulx{background-image:none;color:#444;display:block;font-size:13px;font-weight:700;line-height:normal;overflow:hidden;padding:0;text-align:left;text-transform:none}
    ul#related-summary li a.relinkjdulx:hover{color:#c00;}
    @media only screen and (max-width:640px){
    ul#related-summary li {float:left;list-style:none;overflow:hidden;width:100%;border-bottom:1px solid #e6e6e6;padding:10px 0;max-width:100%;height:auto;}
    ul#related-summary li:last-child{border-bottom:none;}
    ul#related-summary li img{max-width:72px;float:left;margin:0 10px 0 0;}
    ul#related-summary li a.relinkjdulx {display:block;font-size:15px;font-weight:700;line-height:normal;overflow:hidden;padding:0 10px 10px 0;}}
    @media screen and (max-width:384px){
    ul#related-summary li img{display:none}}
    </style>
    <script type='text/javascript'>
    //<![CDATA[
    //Related Post
    var relnojudul = 0;
    var relmaxtampil = 6;
    var numchars = 120;
    var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+"</span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};
    //]]>
    </script>
    <script type='text/javascript'>
    $(&quot;ul#related-summary li img&quot;).each(function(){$(this).attr(&quot;src&quot;,$(this).attr(&quot;src&quot;).replace(//s[0-9]+(-c)?//,&quot;/w175-h100-c/&quot;))});
    </script>
    </b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->

- Copas di bawah kode <data:post.body/> yang kedua atau di bawah kode <div class='post-footer'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'>

    <!-- Related Posts with Thumbnails Code Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-post'>
    <div class='relhead'>
      <h4><span>Related Posts</span></h4>
    <div class='clear'/>
              <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;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/>
              </b:loop>
              <ul id='related-summary'>
                   <script type='text/javascript'>artikelterkait();</script>
              </ul>
         </div>
    </div>
    <div class='clear'/>
    </b:if>
    <!-- Related Posts with Thumbnails Code End-->

Save Template!

Kode Breadcrumbs Blogger

Breadcrumb adalah navigasi menu berupa link yang tampil di atas judul postingan, terdiri dari link ke halaman depan (Home), halaman label (Label Name), dan Judul Postingan.

Dari semua tanpilan dan  kode breadcrumbs yang ada, saya lebih suka kode dari maskolis berikut ini:

- Copas di atas kode ]]></b:skin>

.breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:90%; line-height:1.4em; border-bottom:1px dotted #ccc}

- Copas di bawah kode <div class='post hentry'> atau <div class='post hentry .... ada kode lain.. >

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'>
<data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop>
</b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

SAVE Template!

Itu dia Koleksi Kode Related Post, Breadcrumbs, dan Auto Readmore untuk Modifikasi Template Bawaan Blogger setelah menjadikannya responsive. Wasalam. (blogromeltea.blogspot.com).*