DIRGAHAYU KEMERDEKAAN REPUBLIK INDONESI KE 71 TH. JAYA SELALU !!!

Senin, 06 Februari 2012

Related Post Widget Untuk Blogger (Keren Abis!)

Senin, 06 Februari 2012
Sebenarnya sudah pernah saya posting sebelumnya,bagaimana membuat related post pada blogger di Cara Membuat Artikel Yang Berhubungan / Related Post / Artikel Terkait.
Namun widget related post yang satu ini sangatlah unik, menarik sekaligus dapat membantu pengunjung melihat posting yang berkaitan.

Ada 2 pilihan widget related post keren abis yang bisa sobat gunakan,dan dua-duanya pantas untuk sobat coba.

1.Related Post Widget for Blogger dengan Javascript

Teknik ini menggunakan javascript dari http://theblogtemplates.com/scripts/Related_posts_hack.js,lihat sumbernya.
Jika javascript tersebut masih valid alias tersedia,maka widget ini akan bekerja dengan baik.

Contoh gambarnya sobat bisa lihat dibawah ini:

Related Post Widget Untuk Blogger (Keren Abis!)

Dan hasilnya kurang lebih akan seperti di sini

Nah,untuk caranya bisa sobat ikuti langkah berikut ini:
  • Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.

    Related Post Widget.
    Gb.1
  • Selanjutnya pilih tab Edit Html (Gb.2).

    Widget Artikel Yang Berhubungan.
    Gb.2
  • Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).

    Artikel Terkait / Yang Berkaitan Widget.
    Gb.3


Nah,setelah itu cari kode </head> (Gunakan Ctrl+F),setelah ketemu,persis diatasnya letakkan kode javascript ini di atas kode </head> tersebut:

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; 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 : normal; 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghVbBAKT2rIypyUjoD541qQ_lo2mKbbUNk_3lHsXd1yGhiG16IauHp8mBpXRXhZBTHhOLA9cu6Dg3ZLWRAeefF6lV1nwURrbOUkknijIQG4y4AxG_q5u3qEQmjRc_HdOqt2QYbWzUsYMI/") 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; } </style> <script src='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>


Setelah itu,cari lagi kode berikut <data:post.body/>,setelah ketemu,tepat dibawahnya letakkan kode berikut:

<br/><br/><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 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>


Setelah itu simpan, selesai !

2.Related Post Widget for Blogger dengan Jasa Blogger Widget (LinkWithin)


Tampilan related post blogger dengan jasa www.linkwithin.com akan seperti ini:

linkwithin related post widget.

Ingin memilih cara yang no 2 ini? tinggal sobat kunjungi saja situsnya di sini

Bagaimana? siap menghias blog dengan tampilan widget related post terbaru?
 

0 comments:

Posting Komentar

Related Posts Plugin for WordPress, Blogger...