cara membuat widget related post di blog

Related post pada halaman blog sagat diperlukan, cara membuat related post ini juga sudah tergolong lebih mudah saat ini ketimbang dihari hari yang dulu, sebab pemakaian related post ini saat ini sudah hampir 93% pengguna blog . Semakin banyaknya pengguna widget related post ini sehingga banyak pakar pakar blog yang sudah membuat script tersebut dan saya juga ikut ikutan. Kegunaan dari widget related post ini tidak lain adalah untuk mengait hati para pengunjung halaman blog agar merasa nyaman singgah dihalaman blog dan membuka beberapa link artikel yang dibutuhkannya. Pengaruh widget related post ini dapat mempengaruhi jumlah pengunjung pada halaman blog anda. Script widget related post ini memakai sistem random.Gambar dibawah ini adalah screen shoot tampilan widget Relate Post ini, Oke langsung saja menuju TKP.

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

#related-posts { float : left; width : 480px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; font-weight: bold; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight: bold; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url(&quot;&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } #related-posts ul li{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIxb4TG2VGaoiXHfdbbKS9UBIPkDz7o-xYrDojIuyZuqCUgAVgP2PNayyteeaPYUDi0iwmMH9cWCnafhEfpo-OExDSu4aDav5Lkpj-DON_qKBjInm1g4wFxvckhchl6QVwbmn32PpKmdM/s1600/ico-rss.jpg) no-repeat ;display:block;list-style-type:none;margin-bottom: 13px;padding-left: 30px;padding-top:0px;} #related-posts ul li a {block;color: #222}#related-posts ul li a:hover {block;
color: #990000;
}

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Cari code
  

  <div class='post-footer-line post-footer-line-2'/>

  
  atau Kode
  

  <div class='post-footer-line post-footer-line-3'/>

• Copy kode dibawah ini pastekan tepat dibawah code diatas.
  Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
• Save template anda dan lihat hasilnya, selamat berkreative.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts </b>
</font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'>
<data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
var relatedTitles=new Array();var relatedTitlesNum=0;
var relatedUrls=new Array();function related_results_labels(json)
{for(var i=0;i&lt;json.feed.entry.length;i++)
{var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=
entry.title.$t;for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='alternate')
{relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}}
function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);
for(var i=0;i&lt;relatedUrls.length;i++){if
(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length- 1]=
relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length- 1]=relatedTitles[i];}}
relatedTitles=tmp2;relatedUrls=tmp;}
function contains(a,e){for(var j=0;j&lt;a.length;j++)if(a[j]==e)return true;return false;}
function printRelatedLabels(){var r=Math.floor((relatedTitles.length- 1)*
Math.random());var i=0;document.write('&lt;ul&gt;');
while(i&lt;relatedTitles.length&amp;&amp;i&lt;20)
{document.write('&lt;li&gt;&lt;a href=&quot;'+ relatedUrls[r]+'&quot;&gt;'+
relatedTitles[r]+'&lt;/a&gt;&lt;/li&gt;');if(r&lt;relatedTitles.length- 1){r++;}else{r=0;}
i++;}
document.write('&lt;/ul&gt;');document.write();}
</script>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name +
&quot;?alt=json-in-script&amp;callback=related_results_labels&amp;
max-results=5&quot;' type='text/javascript'/>
</b:if></b:loop></font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
</div></b:if>

Keterangan Code

• Tulisan kode warna MERAH adalah jumlah tampilan link related post yang akan ditampilkan.
• Tulisan warna BIRU adalah judul dari related post ini, silahkan ganti dengan judul related yang anda sukai.
• Bila anda ingin lebih berkreasi silahkan anda edit CSSnya untuk menyesuaikan tampilan related post ini dengan tems template anda.

Kesimpulan

Widget Related Post ini sangat bagus anda pasang di halaman blog anda selain untuk mempercantik tampilan akan meningkatkan trafik pengunjung halaman blog anda. Widget Related Post ini valid html 5 dan CSS 3.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 5:47 PM