Related Post With Thumbnail
Assalamualaikum WBT dan selamat sejahtera kepada tetamu yang dihormati. Sejak sekian lama, blog ini jarang post kerana belajar template thesis theme untuk blogspot. Memang tidak dinafikan template itu sememangnya mesra SEO dam mesra pengguna (Semalaman tak tidor belajar template thesis).

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 Templates

2. 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'>


<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&gt;ul{width:97.7%!important}</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<script type='text/javascript'>var ry=&#39;&lt;h3 class=&quot;heading-border&quot;&gt;&lt;span&gt;Post Yang Ditakdirkan Untuk Anda&lt;/span&gt;&lt;/h3&gt;&#39;;rn=&#39;&lt;h3 class=&quot;heading-border&quot;&gt;&lt;span&gt;No related post available&lt;/span&gt;&lt;/h3&gt;&#39;;rcomment=&quot;comments&quot;;rdisable=&quot;disable comments&quot;;commentYN=&quot;yes&quot;;var dw=&quot;&quot;;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&lt;k.feed.entry.length;h++){var j=k.feed.entry[h];titles[titlesNum]=j.title.$t;for(var i=0;i&lt;j.link.length;i++){if(&quot;thr$total&quot; in j){commentsNum[titlesNum]=j.thr$total.$t+&quot; &quot;+rcomment}else{commentsNum[titlesNum]=rdisable}if(j.link[i].rel==&quot;alternate&quot;){urls[titlesNum]=j.link[i].href;timeR[titlesNum]=j.published.$t;if(&quot;media$thumbnail&quot; in j){thumb[titlesNum]=j.media$thumbnail.url}else{thumb[titlesNum]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzlB0WcOlXLzFZbMdiGfoF3SbyO3pEtB7ggfyZxAUHiUReD3SOszAiSnAjVUWjZQRNK9a3PCxQ56RQRi2Mn3rdHZpB57rf73Xv-FQEC3s3xtgZzHdJhTPwRHU4G8SxS13KCrigeNxP8eOV/&quot;}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&lt;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&lt;a.length;i++){if(a[i]==h){return true}}return false}function printRelatedLabels(h){var j=h.indexOf(&quot;?m=0&quot;);if(j!=-1){h=h.replace(/\?m=0/g,&quot;&quot;)}for(var d=0;d&lt;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+=&quot;&lt;ul&gt;&quot;;while(d&lt;titles.length&amp;&amp;d&lt;20&amp;&amp;d&lt;maxresults){if(j!=-1){urls[i]=urls[i]+&quot;?m=0&quot;}if(commentYN==&quot;yes&quot;){comments[i]=&quot; - &quot;+commentsNum[i]}else{comments[i]=&quot;&quot;}dw+=&#39;&lt;li&gt;&lt;div class=&quot;pthumb&quot;&gt;&lt;img alt=&quot;&#39;+titles[i]+&#39;&quot; src=&quot;&#39;+thumb[i]+&#39;&quot;/&gt;&lt;/div&gt;&lt;a href=&quot;&#39;+urls[i]+&#39;&quot;&gt;&#39;+titles[i]+&#39;&lt;/a&gt;&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;&lt;/li&gt;&lt;/div&gt;&#39;;if(i&lt;titles.length-1){i++}else{i=0}d++}dw+=&quot;&lt;/ul&gt;&quot;}urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById(&quot;related-posts&quot;).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='&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=6;removeRelatedDuplicates();printRelatedLabels(&quot;<data:post.url/>&quot;);</script>
</div>
<div class='clear'/>
</b:if>
Code Updated: 8:55 > 12/11/2012

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?

Total Pageviews

Search This Blog

Powered by Blogger.

Followers

Translate

Popular Posts