Koleksi Isyarat Related Post, Breadcrumbs, Dan Auto Readmore Untuk Modifikasi Template

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 ialah 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 ialah 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 dikala menulis.

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

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

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

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

HTML: Ganti arahan kode <data:post.body/> yang kedua dengan arahan 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 ialah daftar posting yang satu label dengan postingan yang dibuka. Muncul di bawah artikel sehingga dapat meningkatkan pageviews blog.


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

Related Post Simple

Copy & Paste arahan berikut ini di atas arahan ]]></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/AVvXsEgQFHl3JHgSJjxssGFkH1q5mkvLPGVwLzfztmADlgV8zVlC8GY7jEOWNxwF4G-go_CP3t6NwbQXp2NY7t92PYENgl7Z4yedAwJys4k3lDiRINR72p0fRZKsQgErMNI1PgZjM24tJi4yM3w/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 arahan berikut ini di atas arahan </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 arahan <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 arahan </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 arahan <data:post.body/> yang kedua atau di bawah arahan <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 ialah navigasi sajian 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  arahan breadcrumbs yang ada, aku lebih suka arahan dari maskolis berikut ini:

- Copas di atas arahan ]]></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 arahan <div class='post hentry'> atau <div class='post hentry .... ada arahan 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 ia Koleksi Kode Related Post, Breadcrumbs, dan Auto Readmore untuk Modifikasi Template Bawaan Blogger sehabis menjadikannya responsive. Wasalam. (blogromeltea.blogspot.com).*

Artikel Terkait

Koleksi Isyarat Related Post, Breadcrumbs, Dan Auto Readmore Untuk Modifikasi Template

4/ 5

Oleh BMNG Info

BMNG Info 1:32 PM Komentar