November 12, 2012
MR.L.A
Baiklah, kita kembali kepada tajuk asal. Related ini saya terjump semasa mencari template blogger, dan akhirnya alhamdulillah widget ini boleh digunakan dan diubahsuai sedikit untuk menjadikan ianya sebagai widget related post yang boleh diguna pakai.
Related post ini versi ke-4 kalau anda nak versi lama boleh lihat dengan klik link dibawah.
v1 > Related Posts Yang Paling Cool Untuk Blogger
v2 > Link Related Posts Blogger Yang Mengiurkan v2
v3 > Related Post Mengkagumkan dengan Gambar Untuk Blogger v3
Anda juga perlu mengetahui apakah keistimewaan related post v4 ini
Apakah kelebihan related post ini?
- Stylish.
- Akan mengatakan "No related post available" Jika post page anda tidak mempunyai label(Anda boleh mengubah perkataannya nanti).
- Mempunyai Thumbnail.
- Mengurangkan bounce rate.
Jika anda nak melihat related post ini secare live boleh klik button demo di bawah.
Pasang Sekarang Widget Related Yang Stylish
1. Pergi ke Blogger Dashboard > Tempate > Klik Edit HTML > Klik Proceed > Klik Expand Widget Templates2. Cari kod tersebut
<div class='post-footer'>
Nota: Jika anda terjumpa 2 kali, pilih yang mula-mula.
3. Selepas anda sudah jumpa kod di atas. Copy kod di bawah dan letakkan di atas kod <div class='post-footer'>
Code Updated: 8:55 > 12/11/2012
<style>#related-posts li{border-bottom:1px solid #eee;margin-bottom:10px;padding-bottom:10px}#related-posts a{font-weight:bold;font-size:13px;line-height:1.2em}#related-posts li{display:block;float:left;margin-left:15px;width:47%}#related-posts{margin-bottom:20px}.pthumb{float:left;margin:3px 10px 0 0;border:4px solid #eee;width:72px;height:55px;overflow:hidden;position:related}.heading-border{font-family:oswald;font-size:20px;font-weight:normal;margin:10px 0 15px;padding-left:15px}#related-posts>ul{width:97.7%!important}</style>
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<script type='text/javascript'>var ry='<h3 class="heading-border"><span>Post Yang Ditakdirkan Untuk Anda</span></h3>';rn='<h3 class="heading-border"><span>No related post available</span></h3>';rcomment="comments";rdisable="disable comments";commentYN="yes";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(k){for(var h=0;h<k.feed.entry.length;h++){var j=k.feed.entry[h];titles[titlesNum]=j.title.$t;for(var i=0;i<j.link.length;i++){if("thr$total" in j){commentsNum[titlesNum]=j.thr$total.$t+" "+rcomment}else{commentsNum[titlesNum]=rdisable}if(j.link[i].rel=="alternate"){urls[titlesNum]=j.link[i].href;timeR[titlesNum]=j.published.$t;if("media$thumbnail" in j){thumb[titlesNum]=j.media$thumbnail.url}else{thumb[titlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzlB0WcOlXLzFZbMdiGfoF3SbyO3pEtB7ggfyZxAUHiUReD3SOszAiSnAjVUWjZQRNK9a3PCxQ56RQRi2Mn3rdHZpB57rf73Xv-FQEC3s3xtgZzHdJhTPwRHU4G8SxS13KCrigeNxP8eOV/"}titlesNum++;break}}}}function removeRelatedDuplicates(){var d=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var h=0;h<urls.length;h++){if(!contains(d,urls[h])){d.length+=1;d[d.length-1]=urls[h];c.length+=1;c[c.length-1]=titles[h];e.length+=1;e[e.length-1]=timeR[h];f.length+=1;f[f.length-1]=thumb[h];g.length+=1;g[g.length-1]=commentsNum[h]}}urls=d;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(a,h){for(var i=0;i<a.length;i++){if(a[i]==h){return true}}return false}function printRelatedLabels(h){var j=h.indexOf("?m=0");if(j!=-1){h=h.replace(/\?m=0/g,"")}for(var d=0;d<urls.length;d++){if(urls[d]==h){urls.splice(d,1);titles.splice(d,1);timeR.splice(d,1);thumb.splice(d,1);commentsNum.splice(d,1)}}var i=Math.floor((titles.length-1)*Math.random());var d=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+="<ul>";while(d<titles.length&&d<20&&d<maxresults){if(j!=-1){urls[i]=urls[i]+"?m=0"}if(commentYN=="yes"){comments[i]=" - "+commentsNum[i]}else{comments[i]=""}dw+='<li><div class="pthumb"><img alt="'+titles[i]+'" src="'+thumb[i]+'"/></div><a href="'+urls[i]+'">'+titles[i]+'</a><div class="clear"></div></li></div>';if(i<titles.length-1){i++}else{i=0}d++}dw+="</ul>"}urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById("related-posts").innerHTML=dw}</script>
<a href="http://danialde4.blogspot.com.com" title="Danialde4 - Diari Motivasi Blog" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels("<data:post.url/>");</script>
</div>
<div class='clear'/>
</b:if>
4. Preview dahulu. Jika tiada apa-apa masalah SAVE N DONE!!!.
Pengubahsuaian
Anda boleh mengubah beberapa kod/ayat.ABC - Post Yang Ditakdirkan Untuk Anda
Anda nampak yang saya highlight tu? Mestilah. Anda boleh gantikan ayat tersebut dengan ayat yang anda mahu.
ABC - No related post available
Yang ni juga anda boleh gantikan dengan ayat yang anda mahu
ABC - maxresults=6
Ha, inilah yang khasnya. Max results, maksudnya berapa banyak yang anda ingin paparkan Thumbnail pada related post tersebut. Saya pilih 6 anda pula bagaimana?
Daripada Penulis
Alhamdulillah, anda sudah siapa memasang widget related post ini. Kesemua kod ini dikreditkan ke Sora Templates. Kerana blog tersebut saya boleh kongsikan kepada anda widget ini.Kalau anda ada sebarang masalah nak memasang widget ini, silalah komen dibawah. Jangan segan-segan. Komen di blog ini sudah diperbaharui dengan system facebook comment. Tak percaya? Lihat sendiri dibawah.
See?
