Related Post Mengkagumkan dengan Gambar Untuk Blogger v3

Assalamualaikum WBT dan selamat sejahtera kepada tetamu yang dihormati. Amat jarang sekali saya mendupate blog sehinggakan menampak aurat(Main2 hehe... ;). Saya ingin meminta maaf sebab jarang update blog. Harap kemaafan saya dapat diterima.

Baiklah, post kali ini ialah tentang widget untuk blogspot. Widget related post ini boleh dikatakan lebih hebat dari sebelum ini. Kalau anda terlepas dengan widget sebelum ini sila lihat dahulu yang pertama dan kedua, manala tahu berkenan di hati... gunalah widget tersebut. Tetapi kali ni widget related post ini lebih hebat.

Jadi Apakah Kelebihan Widget Related Post ini?

Cool Hover
Large Thumbnail

Kalau guna ayat bukan jelas pun gambarannya. Nak lebih jelas sila lihat demo dibawah

Pasang Sekaranag Kat Blog Anda!

1. Log In Blogger.com

2. Pergi ke "TEMPLATE"

3. Klik "EDIT HTML"

4. Klik "PROCEED"

5. Tik "EXPAND WIDGET TEMPLATES"

6. Cari kod dibawah

<div class='post-footer'>

NOTA: Selalunya terjumpa 2 kali. Pilih yang mula-mula(ke-1) bukan yang ke-2.

7. Selepas jumpa kod di, letak kod dibawah(#8) Di ATAS kod #6

8. Kod (#8)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
/*
Related Post with Thumbnail & Summary 1.0 (May 02, 2011)
copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
*/
var relnojudul = 0;
var relmaxtampil = 4;
var numchars = 200;
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>
<style>
#related_posts h4{margin:0;padding:0;font-size:200%;height:39px;color:#181818}
#related_posts{overflow:hidden;margin-top:30px}
#relpost_img_sum{margin:0;padding:0}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none;background:none;margin:0;padding:0}
#relpost_img_sum li{overflow:hidden;margin:0;padding:0;height:124px;list-style:none;width:49.5%;float:left;margin-right:2px;margin-bottom:2px}
#relpost_img_sum li:nth-child(odd){margin-right:2px}
#relpost_img_sum .news-title{font-weight:bold !important;display:block;position:relative;margin:1px}
#relpost_img_sum li .relinkjdulx{position:absolute;font-size:140%;color:white;left:15px;line-height:20px;bottom:30px;text-shadow:0 1px 0 black;z-index:2}
#relpost_img_sum .news-text{display:block;text-align:left;text-transform:none;position:absolute;left:-9999px;bottom:-9999px;font-weight:normal}
#relpost_img_sum img{float:left;width:100%;height:180px;position:absolute;bottom:-30px}
.overlayb{width:100%;height:200px;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);z-index:1;position:absolute;background-position:0 0;background-repeat:repeat-x;bottom:-10px;transition:all 0.3s ease-in-out 0s;}
#relpost_img_sum li:hover .overlayb{-khtml-opacity:0;-moz-opacity:0;opacity:0}
</style>
<div id='related_posts'>
<h4>Related Post</h4>
<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=relpostimgcuplik&amp;max-results=99999&quot;' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>
artikelterkait();
</script>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e, b) {
var c = document.getElementById(e),
d = c.getElementsByTagName("img");
for (var a = 0; a < d.length; a++) {
d[a].src = d[a].src.replace(/\/s72\-c/, "/s" + b + "");
d[a].width = b;
d[a].height = b
}
}
resizeThumb("related_posts", 328);
//]]>
</script>
</b:if>

9. Klik "PREVIEW"

10. Kalau tidak ada apa-apa error klik SAVE TEMPLATE!!!

Senangkan. Cuma 10 langkah sahaja :D

Dari Penulis

Memang lama saya menghilang, entah kemana tidak ada arah tuju... huhu :(

Tapi, Alhamdulillah Tuhan telah pertemukan anda untuk membaca tutorial ini. Widget ini sebenarnya dari template Extra News. Saya ambil dan edit sikit untuk membuat ianya satu widget yang boleh dikongsikan untuk anda.

Kalau ada apa-apa masalah komen-komen lah di bawah.

Anda ada hak untuk komen, disini ialah blog yang terbuka. Komen anda amat bernilai untuk saya :)

Wallahualam