Cara Mudah Membuat Related Post Seperti Linkwithin

 Hai Sobat Blogger, kali ini saya akan memberikan Tutorial Blog tentang bagaimana Cara Mudah Membuat Related Post Seperti Linkwithin.Dahulu saya telah memberikan CaraMembuat Related Post Keren Versi 2012  jika Sobat belum menyimaknya silahkan Sobat melihatnya, barangkali Sobat memerlukanya.

 


Nah sekarang saya update kembali dengan artikel yang tentunya masih ada hubunganya denganRelated Post.

Mungkin Sobat masih ada yang bingung bagaimana Cara Membuat Related Post Seperti Linkwithin, karena dari beberapa Tutorial Blog yang membahas tentang Related Post hanya memberikan Tutorial berupa teks saja alias Related Post tanpa gambar.

Untuk demonya Sobat bisa lihat melihat Related Post Seperti Linkwithin ini pada akhir postingan ini.

Langkah-langkah Cara Membuat Related Post Seperti Linkwithin :

1.Login ke Blogger Soba
2.Rancangan-->EditHTMLCentang 

 Expand Template Widget

3.Cari kode </head>, jika sudah ketemu copy kode dibawah ini letakkan tepat diatas </head> 


<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#artikel-gambar {float:center;text-transform:none;height:100%;min-height:100%;margin-top:20px;padding-left:30px;padding-top:5px;padding-bottom:10px;border-top:none}
#artikel-gambar h2{font-size:14px;color:#02882B;font-weight:400;margin-bottom:0.4em;margin-top:0em;padding-top:0em}
#artikel-gambar a{color:#02882B;text-align:left}
#artikel-gambar a:hover{color:#4E6F06;text-align:left}
#artikel-gambar a:hover{background-color:#DEF1B4;border:none;}
</style>

<script type='text/javascript'>
//<![CDATA[
//Script by Hendro Atmoko of fatal-muntadzor.blogspot.com
//Released on June 12th June 2002
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}

catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhARzjCOK4Vle6xjFpbOr-8Q4IzoTcS9I82ofqZuCi79F93RG5CHBXctbAxNZzqrdSje6NnIgLYF_Bi-KilyTE5Ha19S6eRV_wu8QZLZ7dc0u6mT0dDQhRShPGzjvdrc-CWGTa7SDgcKqY/s400/noimage.png';
}

if(relatedTitles[relatedTitlesNum].length>130) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 130)+".";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}

function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i])))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

if(relatedTitles.length>0) document.write('<h2>'+judulpost+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {

document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 1px #A1D414;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:100px;height:85px;border:1px solid #8BCB00" src="'+thumburl[r]+'"/><br/><div style="width:90px;padding-left:6px;height:67px;border:none;margin:3px 0px 0px;padding-top:2px;font-style:normal;font-variant:normal;font-weight:normal;font-size:11px;line-height:normal;font-size-adjust:none;font-stretch:normal;">'+relatedTitles[r]+'</div></a>');

if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->


4.Cari kode <a expr:href='data:post.url + &quot;#more&quot;'> (khusus bagi Sobat yang menggunakan Readmore atau Baca selengkapnya) jika sudah ketemu letakkan kode dibawah ini tepat dibawah kode </b:if> 


<!-- Related Posts with Thumbnails Code Start-->
<div id='artikel-gambar'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=999&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var judulpost=&quot;<img class='icon' padding-right='3px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyXNZ6ozcbARmgP-6vDn6hBUweFiM743peYH92RCokicm5uLKRfHzgGBhe3TrTpOCU-oOWJDke03Ul7Ayv4dVVigYqo7JiVYlhglkSeKXLXLbFbqf5CI_lx7_zU89-lkz2ZC9I1TnUKbg/s1600/rss.png'/> Lainnya dari <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
<!-- Related Posts with Thumbnails Code End-->
</b:if>

5.Simpan Template dan lihat hasilnya.



Catatan : Karena setiap Template Blog itu berbeda-beda, mungkin dikarenakan Sobat sudah memodif Template Blog tersebut atau karena memang bawaan Template dari pembuat Template tersebut.Untuk mempermudah saya akan memberikan Tutorialnya berupa gambar, silahkan lihat dibawah ini : 



1.Untuk mencari kode <a expr:href='data:post.url + &quot;#more&quot;'> 

 

Klik untuk memperbesar gambar

2.Letakkan kodenya tepat dibawah kode </b:if>

 

Klik untuk memperbesar gambar

3.Simpan Template


Demikian Tutorial Cara Mudah Membuat Related Post Seperti Linkwithin semoga bermanfaat.