November 03, 2012
MR.L.A
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.com2. 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 == "item"'>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZK3QK8GaStrJWBis8kRjt_QaXMJ0ejFJwVss_Wa71CR65T_8ZDRYSmR8xs9ealxwusYzJ1sKROwCWu_nM-ReT97-GyBx-0NKLoynIvNLoxXOtwJv_EIh9kxPcQw5q9B-ZO6G1sDoc4nk/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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=99999"' 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
