Cara Kasih Related Post Di Blog Auto Dengan Gambar

Di malam yang dingin ini saya ingin berbagi dengan sobat semuanya.Khususnya buat para pemula seperti saya.Trik ini saya dapat dari Google dengan pencarian Related Post.

Dan hasil pencarian sangat luar biasa banyaknya,Sehingga saya harus coba satu persatu.Alhamdulilah ketemu satu trik yang menurut aku cocok buat buat Desain Blog ini.Oke tidak panjang lebar lagi silahkan sobat baca Artikel di bawah ini.

Jika sobat sudah kenal  dengan kode HTML atau PHP or Java Script tidak ada salahnya untuk mencoba membuat Related post dengan memasukkan sebuah kode script kedalam template blog, cara ini aku namai dengan judul Cara Kasih Related Post Di Blog Auto Dengan Gambar.

Baiklah, simak langkah-langkahnya. Cara Kasih Related Post Di Blog Auto Dengan Gambar berikut ini 

1-Login kedalam dasbor blog sobat 

2-Kemudian pilih template 

3-Kemudian pilih edit HTML 

4-Kemudian centang kotak expand template widget 

5-Cari kode ]]></b:skin>
Copas kode di bawah ini taruh di atas kode ]]></b:skin>

#related-posts { float:center; width:100%; margin:0; padding-top:10px; }
#related-posts .judul { background:none; color:#333; font:16px Oswald; display:none;}
#related-posts .seocips_img { padding:0; margin:7px; width:180px !important; height:auto; position:relative; overflow:auto;border:4px double #ddd; }
#related-posts .seocips_img { height:130px; }
#related-posts .seocips_img:hover { opacity:.7; filter:alpha(opacity=70); -moz-opacity:.7; -khtml-opacity:.7; }

NB : utk ukuranya di sesuaikan dengan kondisi blog masing-masing.Silahkan edit teks warna hijau di atas

6.-Cari kode </head>
copas kode di bawah ini taruh di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

NB : Jika sudah ada kode yang mirip tidak usah di kasih lagi.

7.-Masih di kode </head>
Taruh kode di bawah ini di atas kode </head>
 

<script type='text/javascript'>
//<![CDATA[
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.gform_foot.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/AVvXsEiJQpNq_MARD4tHnGIV5trkatTlBYEHXLQDdgrFdAZO9nBkIRs2K_MaPsMIq16O5Be44i4UuoD944i0wT2Fs3zrob7MuF8yRa17ugTUpkUWbP2oknCAiXb6X4svYozk6U1oUa6m2Oe_ryZM/s1600/no-video.gif'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";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('<div class="judul">'+relatedpoststitle+'</div>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin: 5px;border:2px solid #ddd; float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="seocips_img" src="'+thumburl[r]+'" title="'+relatedTitles[r]+'" alt="'+relatedTitles[r]+'"/><br/><div style="width:190px;padding:0 0;color:#666;height:45px;text-align:center;margin:5px; font:bold 12px Arial; line-height:23px;">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++} ; eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3.7(\'</q><a p="o://n.m.e" 9="i-b: c; d-r:f; g: #h;">8 j k</a>\');3.7(\'</l>\');6.2(0,6.1);5.2(0,5.1);4.2(0,4.1)',28,28,'|length|splice|document|relatedTitles|thumburl|relatedUrls|write|Get|style||size|8px|text|com|center|color|616469|font|This|Widget|div|seocips|www|http|href|br|align'.split('|'),0,{}))}
//]]>
</script>

NB : Teks warna hijau adalah lebar dan tinggi Judul Related Post Anda.Silahkan di Edit sesuaikan dengan ukuran Blog sobat.

8.-Cari 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'> pilih salah satu.Taruh kode di bawah ini dan tempel di kode tersebut di atasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<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=6;
var relatedpoststitle=&quot;Related Posts :&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
  </div>
<div class='clear'/>
</b:if>

9.-Simpan Template dan silahkan di lihat .
Untuk contohnya bisa sobat lihat di blog ini.

Relateed post atau Artikel terkait yang tayang ini akan tampil pada tiap-tiap akhir artikel dan menampilkan judul berdasarkan kategori, selamat mencoba sob dan sampai disini dahulu tutorial Cara Kasih Related Post Di Blog Auto Dengan Gambar semoga bermanfaat ….

Untuk sobat yang kurang jelas silahkan bertanya dengan sopan di kotak komentar di bawah ini.Siapa tahu saya bisa bantu permasalahannya.
Akhir kata Good Byyyyyyyyyyyy......