trans online

Pasang Related Post Artikel Terkait Ala Template Gallery

Baiklah saya langsung saja yah all, soalnya da keburu mlm :D , jadi Related Post (Artikel Terkait) yg akan saya share kali ini, yaitu related post ala template gallery yg dmna dilengkapi thumbnail images overlay. nah berhubung karena saya telah memasang related post pada tempalate yg sy share beberapa hari lalu, jadi sobat bisa melihat contoh secara details dari related post ini.!heheee,..

Oke, biar gampang bisa dilihat seperti gambar di bawah ini :


atau bisa lihat contohnya pada template saya disini,... Gimana?? tertarik untuk memasangnya....
jika begitu sobat tinggal mengikuti langkah-langkah berikut.

1. Login ke blogger
2. Tata Letak.
3. Edit HTML.
4. Carilah kode </head> ,lalu letakkan Kode CSS berikut tepat diatasnya.

<b:if cond=data:blog.pageType == &quot;item&quot;>
<style media=screen type=text/css>
/*----- http://.blogspot.com/ Related Post -----*/
.relatedproduct h1{font:bold 22px arial;color:#5E0001;text-shadow:0 1px 0 #444;}
ul#related-posts{font-size:15px;list-style:none;text-transform:none;margin:10px 0;padding:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:4px solid #bbb;display:block;height:106px;position:relative;width:101px;color:#eaeaea;text-decoration:none;text-shadow:0 1px 0 #000}
ul#related-posts li .overlay{height:100px;line-height:16px;position:absolute;width:95px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg_cmaktdJ-P61A6jFOnz7TvgkOAHIhPDxg6dfcUIY2RA3__mQ2jg4SqpHBg_f7liNk2qrhrqJv4eWrBYEoaYbB9zdnqwCA9vjLmc0ms-a_sJ040JsuIUyliyUfvTcKHG63SYd-5LwyQs/s1600/transparant.png);display:block!important;}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);border:4px solid #666}
</style>
</b:if>

5. Langkah Selanjutnya kita cari lagi Kode <p><data:post.body/></p> , Setelah ketemu, letakkan kode script berikut tepat dibawahnya. (bisa juga diletakkan diatas kode <div class=post-footer-line post-footer-line-1> )

<!-- Related product  -->
<b:if cond=data:blog.pageType == &quot;item&quot;>
<div class=relatedproduct>
<h1>Related product you might see:</h1>
<script type=text/javascript>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbGv3gF88aCpNXbeNYm_SiBPIV41laYd1nohJm8qlT9NPCOWewKo6_CSUHTyIhvJV76XAhDYYuCKeVE92iX4cNXXoiDUiMRt5JitxxDLrTC97GM1KKnD-tFKOS8SM_z22Ccy3oSuZFqsc/s1600/no+image.jpg&quot;;
var maxresults=6;
</script>
<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.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{if(typeof(defaultnoimage)!==undefined)thumburl[relatedTitlesNum]=defaultnoimage;else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiai89Tgijx0OK9d-N5fb3-9X01BKB9dArZysiYVxingwqa42CvjaGgbidQlrRyb8LJQuA_VGe7qUJ-n4CWfFAz0-Tq0BIxKI6qF6P0GKDRbPZN_iYzHxSmxIOyxxsGZdPBoNmnysDgTgk/s400/noimage.png"}}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(current){var splitbarcolor;if(typeof(splittercolor)!==undefined)splitbarcolor=splittercolor;else splitbarcolor="#d4eaf2";for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!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(<ul id="related-posts">);while(i<relatedTitles.length&&i<20&&i<maxresults){document.write(<li><a);document.write( href="+relatedUrls[r]+"><span class="overlay" style="display:none;">+relatedTitles[r]+</span><img style="width:101px;height:101px;border:0px;" src="+thumburl[r]+"/></a></li>);i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write(</ul>);relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</div>
<b:loop values=data:post.labels var=label>
<b:if cond=data:label.isLast != &quot;true&quot;>
</b:if>
<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=6&quot; type=text/javascript/>
</b:loop>

<script type=text/javascript>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</b:if>
<div style=clear: both;/>
<!-- Related product  -->

6. Priview dulu, jika tidak terjadi masalah pada templatenya, maka baru Klik SIMPAN TEMPLATE.

NB :>> Diatas terdapat tulisan yang berwarna, sobat tinggal merubahnya saja sesuai keinginan.

Lihat Juga Related Post Yang Lainnya :

1. Pasang Related Post (Artikel Terkait) Thumbnails - Marquee (Berjalan). dan
2. Pasang Related Post (Artikel Terkait) With Thumbnail And Summary.
3. Pasang Related Post (Artikel Terkait) Cantik Ala Utta Bag.2