Cara Membuat Widget Related Posts

Kemarin ada seorang sobat yang bertanya kepada saya, 'bagaimana cara membuat widget related posts seperti yang saya gunakan pada blog ini'. Sebenarnya cara membuat widget related posts sudah pernah saya posting di blog ini, hanya saja memang versi related posts yang saya gunakan sekarang ini berbeda dengan versi related posts yang sudah pernah posting di blog ini. .




Sedangkan versi ini, related posts atau artikel yang berhubungan hanya menampilkan judul posting saja (tanpa judul label) dan semua artikel yang berhubungan digabung menjadi satu sehingga mirip dengan widget related posts milik Wordpress. Contoh tampilannya seperti ini:


Bagi anda yang ingin memasang related posts v2 atau related posts ala wordpress silahkan ikuti langkah-langkah dibawah ini:

1. Pada halaman dashboard blogger, buka menu Design -> Edit HTML

2. Beri centang pada "Expand Widget Templates"

3. Cari kode ]]></b:skin>

4. Letakkan kode css berikut diatasnya

#related-posts { float : left; width : 250px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; } #related-posts a{ color:#4b4b4b; }
#related-posts a:hover{ color:#ca1717; }
#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 { margin : 10px 5px 5px 20px; padding : 0; }

5. Selanjutnya cari </head>

6. Letakkan kode javascript berikut diatasnya

<script src='http://hbhost.googlecode.com/files/Related-posts.js' type='text/javascript'/>

7. Kemudian cari <p><data:post.body/></p> atau <data:post.body/>

8. Jika ada dua kode yang sama, pilih yang pertama

9. Letakkan kode berikut dibawahnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<div style='font-size:18px'><b>Related Posts:</b></div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<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>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Keterangan:
Teks yang dicetak tebal adalah judul widget dan angka 5 adalah jumlah postingan yang muncul dalam related posts. Silahkan ganti sesuai keinginan

10. Jika sudah, simpan template anda dan lihat hasilnya. Kalau berhasil jangan lupa pencet tombol like dibawah

Backlink here..

<h2><br /></h2><span class="meta"><span class="comment-icon"><a class="comment-link" href="http://www.hermanblog.com/2010/09/cara-membuat-widget-related-posts-v2.html#comment-form"></a></span></span> Kemarin ada seorang sobat yang bertanya kepada saya, 'bagaimana cara membuat widget related posts seperti yang saya gunakan pada blog ini'. Sebenarnya <a href="http://www.hermanblog.com/2008/11/cara-memasang-related-post-atau-artikel.html" target="new" title="cara membuat widget related posts">cara membuat widget related posts</a> sudah pernah saya posting di blog ini, hanya saja memang versi related posts yang saya gunakan sekarang ini berbeda dengan versi related posts yang sudah pernah posting di blog ini. .<br /><span id="fullpost"><br /><span style="font-weight: bold;"></span><br /><br /><a href="http://4.bp.blogspot.com/_15FopxVONSo/TJIvv5CkfuI/AAAAAAAAD8c/MrqQstm9Qgk/s1600/related-posts_v1.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5517524993294237410" src="http://4.bp.blogspot.com/_15FopxVONSo/TJIvv5CkfuI/AAAAAAAAD8c/MrqQstm9Qgk/s400/related-posts_v1.gif" style="cursor: pointer; display: block; height: 400px; margin: 0px auto 10px; text-align: center; width: 379px;" /></a><br />Sedangkan versi ini, related posts atau artikel yang berhubungan hanya menampilkan judul posting saja (tanpa judul label) dan semua artikel yang berhubungan digabung menjadi satu sehingga mirip dengan widget related posts milik Wordpress. Contoh tampilannya seperti ini:<br /><br /><a href="http://2.bp.blogspot.com/_15FopxVONSo/TJIvwUMwbpI/AAAAAAAAD8k/ftf99tNw484/s1600/related-posts_v2.gif"><img alt="widget related posts" border="0" id="BLOGGER_PHOTO_ID_5517525000584720018" src="http://2.bp.blogspot.com/_15FopxVONSo/TJIvwUMwbpI/AAAAAAAAD8k/ftf99tNw484/s400/related-posts_v2.gif" style="cursor: pointer; display: block; height: 283px; margin: 0px auto 10px; text-align: center; width: 254px;" /></a><br />Bagi anda yang ingin memasang related posts v2 atau related posts ala wordpress silahkan ikuti langkah-langkah dibawah ini:<br /><br />1. Pada halaman dashboard blogger, buka menu <span style="font-weight: bold;">Design</span> -> <span style="font-weight: bold;">Edit HTML</span><br /><br />2. Beri centang pada "Expand Widget Templates"<br /><br />3. Cari kode <span style="color: #cc0000;">]]></b:skin></span><br /><br />4. Letakkan kode css berikut diatasnya<br /></span><br /><blockquote><span style="color: #3333ff;">#related-posts { </span> <span style="color: #3333ff;">float : left; </span> <span style="color: #3333ff;">width : 250px; </span> <span style="color: #3333ff;">margin-left : 5px; </span> <span style="color: #3333ff;">font-size: 12px; </span> <span style="color: #3333ff;">line-height : 1.8em; </span> <span style="color: #3333ff;">margin-bottom:10px; </span> <span style="color: #3333ff;">}</span> <span style="color: #3333ff;">#related-posts a{ </span> <span style="color: #3333ff;">color:#4b4b4b;</span> <span style="color: #3333ff;">}</span> <span style="color: #3333ff;"><br />#related-posts a:hover{ </span> <span style="color: #3333ff;">color:#ca1717;</span> <span style="color: #3333ff;">}</span><br /><span style="color: #3333ff;">#related-posts .widget { </span> <span style="color: #3333ff;">list-style-type : none; </span> <span style="color: #3333ff;">margin : 5px 0 5px 0; </span> <span style="color: #3333ff;">padding : 0; </span> <span style="color: #3333ff;">} </span> <span style="color: #3333ff;">#related-posts .widget h2, #related-posts h2 { </span> <span style="color: #3333ff;">font-size : 20px; </span> <span style="color: #3333ff;">font-weight : normal; </span> <span style="color: #3333ff;">margin : 5px 7px 0; </span> <span style="color: #3333ff;">padding : 0 0 5px; </span> <span style="color: #3333ff;">}</span> <span style="color: #3333ff;">#related-posts a { </span> <span style="color: #3333ff;">text-decoration : none; </span> <span style="color: #3333ff;">}</span> <span style="color: #3333ff;">#related-posts a:hover { </span> <span style="color: #3333ff;">text-decoration : none; </span> <span style="color: #3333ff;">}</span> <span style="color: #3333ff;">#related-posts ul { </span> <span style="color: #3333ff;">margin : 10px 5px 5px 20px; </span> <span style="color: #3333ff;">padding : 0; </span> <span style="color: #3333ff;">} </span></blockquote>5. Selanjutnya cari <span style="color: #cc0000;"></head></span><br /><br />6. Letakkan kode javascript berikut diatasnya<br /><br /><blockquote style="color: #3333ff;"><script src='http://hbhost.googlecode.com/files/Related-posts.js' type='text/javascript'/></blockquote>7. Kemudian cari <span style="color: #cc0000;"><p><data:post.body/></p></span> atau <span style="color: #cc0000;"><data:post.body/></span><br /><br />8. Jika ada dua kode yang sama, pilih yang pertama<br /><br />9. Letakkan kode berikut dibawahnya<br /><br /><blockquote style="color: #3333ff;"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><div id='related-posts'><br /><div style='font-size:18px'><b><span style="font-weight: bold;">Related Posts:</span></b></div><br /><b:loop values='data:post.labels' var='label'><br /><b:if cond='data:label.isLast != &quot;true&quot;'/><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=<span style="color: red;">5</span>&quot;' type='text/javascript'/></b:if><br /></b:loop><br /><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();<br /></script><br /></div><br /></b:if></blockquote><span style="font-weight: bold;">Keterangan:</span><br />Teks yang dicetak tebal adalah judul widget dan angka <span style="color: red;">5</span> adalah jumlah postingan yang muncul dalam related posts. Silahkan ganti sesuai keinginan<br /><br />10. Jika sudah, simpan template anda dan lihat hasilnya. Kalau berhasil jangan lupa pencet tombol <span style="font-style: italic;">like</span> dibawah <img class="emoticon" src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" /> <br/> Sumber: <a href='http://gudang-gw.blogspot.com/2013/01/cara-membuat-widget-related-posts.html'> BLOGSPOT GW </a>

Description: Cara Membuat Widget Related Posts Rating: 5 Reviewer: Unknown - ItemReviewed: Cara Membuat Widget Related Posts