Cara Membuat Related Post Dengan Gambar Admin : Unknown

Assalamu'alaikum,wr.wb

Cara Membuat artikel Terkait / Related Post Dengan Gambar - Selain pengunjung dapat mengetahui melalui judul blognya,kali ini pengunjung juga dapat melihat gambar dari posting tersebut, caranya mudah dan sobat bisa langsung praktikkan, berikut tutorialnya :

Cara Membuat Related Post Dengan Gambar Dibawah Posting Blog

• Login ke akun blog sobat
• Masuk Rancangan Template >> Edit Html
• Cari kode ]]></b:skin> , gunakan CTRL+F
• Copy kode berikut dan letakkan tepat diatas kode ]]></b:skin>

/* Related Post Dengan Tooltips Membuat Blog Keren --- */
.related-post .post-thumbnail {
z-index: 1; position: relative;
width: 100px;
height: 100px;
margin: 0; display: block;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 5px #444;
-moz-box-shadow: inset 2px 2px 5px #444;
box-shadow: inset 2px 2px 5px #555;
}
.related-post {
float: left; position: relative;
width: 108px;
height: 108px;
margin: 0 10px 10px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.related-post .related-post-title {
display: none;float: left; background: #00B366;
color: #fff;
text-shadow: none;
font-weight: bold;
padding: 10px;
position: absolute;
top: -20px;
left: 40px;
z-index: 2;
width: 200px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.related-post:hover .related-post-title {display: block;}

Catatan : warna kuning adalah tinggi dan lebarnya,silahkan sobat sesuakan

• Kemudian cari kode <div class='post-footer-line post-footer-line-1'/> atau <div class='post-footer-line post-footer-line-2'/> (gunakan CTRL + F untuk mempermudah pencarian)
• Setelah ketemu Copy kode berikut ini dan letakkan tepat dibawah kode tersebut :

<div id='related-posts'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>//<![CDATA[

var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';

var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimHjzvARp6rms_kEPv5DO-dD4cIcsRFiLD3RBcY5paBV7GcAUsJtiNKo5qRVq2h-ZKhI-Swqsf22ZmC6g3Sc_NDcpqQ6OsfktZeQVlmCAp0OUutgZL_4qwQsg753mNoEp2DdhGI3PGweL4/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};

//]]></script>

<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&quot;' type='text/javascript'/>

</b:loop>

<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>

</b:if>

</div>

<div class='clear'/>

Catatan : warna orange adalah jumlah artikel yang akan ditampilkan,silahkan sobat sesuaikan

• Selesai dan simpan

Demikianlah tutorialnya,apabila dirasa kurang menarik atau ada yang salah dalam pengetikan baik kalimat atau kodenya, harap dimaklum karena saya +saif achmad juga sedang tahap belajar alias newbi, dengan tujuan hanya ingin yang terbaik untuk sobat blogger semua,terima kasih semoga bermanfaat...

Baca juga Cara pemasangan dan bentuk artikel terkait lainnya :

Untuk Related Post simpel dibawah posting sobat bisa baca DISINI
Untuk Related Post dengan fungsi scroll sobat bisa baca DISINI
Untuk Related Post menggunakan Linkwithin sobat bisa baca DISINI

Baca juga Tutorial Blog SEO :

• Cara menghilangkan/menyembunyikan tang dan obeng pada blog
• Cara mengoptimalkan posting gambar lebih SEO
• Cara mendapatkan ribuan Backlink gratis

Baca juga Artikel Muslim :

• Kebahagiaan dan kemuliaan wanita mulimah
• Kesabaran seorang wanita muslim
• Belajar memahami arti diri dalam kehidupan

Baca Juga Kisah Hidayah :

• Keajaiban ALLAH di perang Gaza
• Kisah nyata mukjizat cinta dari seorang istri
• Taubat setelah melihat sakaratul maut