tipsandcara: Widget

Semua sobat blogger pasti menginginkan blognya menjadi terkenal dan memiliki banyak pengunjung. Ada beberapa hal yang dilakukan oleh sobat blogger untuk mewujudkan keinginannya. Dalam mewujudkannya, ada sobat blogger yang mendaftarkan blognya kedalam search engine, mendaftarkannya kepada direktori blog, ada yang memamfaatkan twitter, social bookmarking, technorati, forum dan lain sebagainya.

Namun, hal yang tidak kalah penting untuk semua itu yaitu isi dari blog kita (content). Bahkan ada yang menyebut bahwa isi blog ada segalanya (contents is the king). Dengan artikel yang menarik dan bermamfaat, orang akan terus berkunjung dan berkunjung lagi. Namun, kita juga jangan lupa untuk membuat suatu cara agar artikel kita mudah dicari oleh pengunjung. Ada sebagian yang membuat daftar isi dengan sistem "clickable", "drop down", "scroll menu" dan lain sebagainya.

Selain itu, ada juga cara yang lebih efektif dalam memberikan jalan kepada pengunjung kita untuk menjelajah isi blog kita, dalam hal ini artikel. "Related Post Widget". Widget ini berfungsi untuk memberikan list atau daftar tentang artikel yang ada didalam blog kita yang mana artikel yang diberikan memiliki topik atau content yang relatif sama dengan artikel yang sedang dibaca oleh pengunjung. Widget ini akan terlihat seperti ini:

Untuk menggunakan widget tersebut, sobat harus melakukan beberapa tahapan.
1. Masuk kedalam akun blogger sobat.
2. Klik "Layout".
3. Klik "Edit HTML".
4. Centang "Expand Widget Template".
5. Masukkan kode kedalam template sobat sebelum kode </head> .

<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 {color : #940f04;font-size : 20px;font-weight : normal;margin : 5px 7px 0;padding : 0 0 5px;}#related-posts a {color : #054474;font-size : 11px;text-decoration : none;}#related-posts a:hover {color : #054474;text-decoration : none;}#related-posts ul {border : medium none;margin : 10px;padding : 0;}#related-posts ul li {display : block;background : url("http://i263.photobucket.com/albums/ii150/mohamedrias/newconcept_bullet.png") no-repeat 0 0;margin : 0;padding-top : 0;padding-right : 0;padding-bottom : 1px;padding-left : 16px;margin-bottom : 5px;line-height : 2em;border-bottom:1px dotted #cccccc;}</style><script type='text/javascript'>//<![CDATA[var relatedTitles = new Array();var relatedTitlesNum = 0;var relatedUrls = new Array();function related_results_labels(json) {for (var i = 0; i < json.feed.entry.length; i++) {var entry = json.feed.entry[i];relatedTitles[relatedTitlesNum] = entry.title.$t;for (var k = 0; k < 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 < 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 < 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('<ul>');while (i < relatedTitles.length && i < 20) {document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');if (r < relatedTitles.length - 1) {r++;} else {r = 0;}i++;}document.write('</ul>');}//]]></script>

Sobat bisa merubah lebar (width) dari kode tersebut sesuai dengan kebutuhan sobat.
6. Sekarang sobat cari kode dibawah ini.

<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop>

Ganti kode yang tadi sobat cari dengan kode dibawah ini.

<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/> </b:if> </b:loop>

7. Gerakkan cursor sobat kebawah samapai menemukkan kode span atau div. Kemudian sali n kode dibawah sebelum kode span atau div tersebut.

<b:if cond='data:blog.pageType == "item"'><div id="related-posts"><h2>Other Recommended Posts</h2><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script></div></b:if>

8. Simpan template sobat.
9. Lihat hasil yang telah sobat lakukan.