Cara Membuat Related Post/Artikel Terkait di Bawah Postingan

Untuk Postingan Kali ini saya akan membagikan Cara Membuat Related Post/Artikel Terkait di Bawah Postingan, Umumnya template blogger sekarang sudah di katakan rata-rata telah memenuhi kreteria sebagai template user friendly, salah satu komponen pada template yang user friendly adalah Related Post, Related Post merupakan sesuatu yang simple kelihatannya tapi mempunyai efek yang cukup bagus bagi blog kita. Tanpa panjang lebar mari kita eksekusi, ntuk contohnya bisa dilihat diblog ini.

Berikut tutorial membuat related post yang simple dan tidak ribet

Buka Blogger > Tema > Klik tombol Edit HTML dan tambahkan kode berikut ini sebelum kode ]]></b:skin> atau </style>

/* TipsRyand Related Post */
#related-post {margin:0 auto;padding:0;text-align:center;}
#related-post h4{font-size:14px;margin:0 0 10px 0;background:#374760;color:#fff;padding:12px 20px;font-weight:700;position:relative;text-align:left;text-transform:uppercase;overflow:hidden}
#related-post h4:after{display:inline-block;content:"\f02c";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;background-color:#2e3b4f;color:#fff;top:0;right:0;padding:13px 20px;position:absolute}
.relhead {font-size:100%;font-weight:normal;line-height:150%;padding:0 0 10px 0;overflow:hidden;}
#related-summary .news-text{display:block;text-align:left;font-weight:normal;color:#888;font-size:12px;margin-top:10px}
ul#related-summary{margin:0 auto;padding:0 10px;list-style:none;word-wrap:break-word}
ul#related-summary li{position:relative;list-style:none outside none;overflow:hidden;margin:0 10px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.12)}
ul#related-summary li:last-child{border:0}
ul#related-summary li a{display:block;}
ul#related-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:90px;max-height:70px;vertical-align:middle;overflow:hidden;float:left;margin:0 10px 0 0;border:1px solid rgba(0,0,0,0.12);padding:3px;background:#fff;transition:all 1s ease-out}
ul#related-summary li:hover img {opacity:0.96;}
ul#related-summary li a.relinkjdulx{position:relative;color:#2c4584;display:block;font-weight:700;line-height:normal;overflow:hidden;text-align:left;text-transform:none}
ul#related-summary li a.relinkjdulx:hover{color:#374760;}
@media only screen and (max-width:640px){
h1.post-title.entry-title,h2.post-title.entry-title{font-size:180%!important;}
ul#related-summary {padding:0}
ul#related-summary li {padding:5px 0;}
ul#related-summary li:last-child{border-bottom:none;}
ul#related-summary li img,#related-summary .news-text{display:none;}
ul#related-summary li a.relinkjdulx {display:block;font-size:14px;font-weight:700;line-height:normal;overflow:hidden;padding:10px 10px 10px 0;}

Langkah selanjutnya, tambahkan kode dibawah ini sebelum kode </body>

<script type='text/javascript'>
//Related Post Thumb
$(&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;/w200-h140-c/&quot;))});
</script>

Tambahkan kode berikut sebelum kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <script type='text/javascript'>
        //<![CDATA[
        //<![CDATA[
        //Related Post
        var relnojudul = 0;
        var relmaxtampil = 5;
        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]+"'><div class='overlayb'></div><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>
    </b:if>

terakhir, tambahkan kode dibawah ini diatas kode <div class='post-footer'> atau dibawah kode<data:post.body/> yang kedua atau ketiga, sampai Related Post muncul.

<div id='related-post'>
                      <div class='relhead'>
                        <h4><span>Artikel Terkait</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>

Akhirnya jadi juga, jika ada yang ingin ditanyakan silahkan komentar dibawah, jika ada kesempatan akan saya balas. Terimakasih