Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Saturday, July 27, 2013

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.

cara membuat widget related post diblog

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(http://1.bp.blogspot.com/-LZRTi6LiSXc/UfOaqASxwSI/AAAAAAAABlU/TcibyuwSwJo/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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 5:47 PM

9 comments :

  1. kayaknya tampilan related postnya keren tuh, ane mau ganti dengan yang ini ah. makasih gan ilmunya. sukses selalu.

    ReplyDelete
  2. silahkan sob, salam kenal dari saya.. makasih atas salamnya

    ReplyDelete
  3. silahkan sob,
    sama sama sob @Edi
    salam kenal

    ReplyDelete
  4. Saya colong dulu OM.... :D

    O y, kode yang ini < div class='post-footer-line post-footer-line- ada 3 ditempatku Om..
    Kalau dipasang setelah < div class='post-footer-line post-footer-line-1' > boleh ga Om ??

    Terema kasih sebelumnya

    ReplyDelete
    Replies
    1. silahkan sob..
      soal boleh atau tidaknya tergantung jenis tag xml/html nya sob, ada yang bisa dan ada yang tidak, kalo bawaan blogspot pastinya tidak bisa sob.

      Thx atas kunjungannya...

      Delete
  5. kog punya saya yang muncul cuma 1 gan,,,?
    mhon pencerahannya...

    ReplyDelete
    Replies
    1. Coba gan dicek kembali codenya...
      atau sistem RSS devaultnya template agan bermasalah...

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog