Cara Membuat Sendiri widget artikel terkait di blog

Widget artikel terkait atau sering juga disebut dengan widget related post merupakan salah satu widget yang cukup penting, yang harus anda pasang di blog. Alasannya, karena dengan adanya widget artikel terkait ini akan memudahkan kepada pengunjung kita dalam membaca artikel-artikel yang telah disediakan khususnya artikel yang berkaitan dengan artikel yang sedang dibaca oleg para pengunjung.

Misalnya, jika anda membuat artikel mengenai blogging. Mulai dari cara awal membuat blog, cara menambahkan widget, cara menghapus nya, dan yang lainnya. Maka dengan memasang widget artikel terkait, di blog anda akan muncul link yang berhubungan dengan artikel yang sedang pengunjung baca. Hasil nya pengunjung akan lebih lama dan betah di blog anda karena navigasi blog nya mudah diakses. Biasanya widget artikel terkait ini akan menampilkan hasil disesuaikan dengan pemberian label / kategori pada artikel.


 Baca juga : 
   Cara-menambahkan-playlist-mp3-kedalam blog               
   Tutorial-menggunakan-ssh-tunnel-di Android           
   Cara-simple-menyembunyikan-gadget-di Blog

Maka nya sangat penting sekali untuk memberikan kategori pada artikel dengan benar agar semua berkaitan. Ada banyak sekali jenis (bentuk) widget artikel terkait, mulai dari widget artikel terkait yang hanya menampilkan judul nya saja, menampilkan dengan gambar, atau pun menampilkan nya dengan tooltip.Akan tetapi kali ini saya akan menjelaskan mengenai cara membuat artikel terkait di blog dengan menggunakan widget artikel terkait generator yang dibuat oleh blog DTE.
Berikut alamat widget generator nya :dte-project.googlecode.com . Untuk mempermudah sobat sekalian Berikut contoh Scriptnya:

Cara membuat Artikel terkait di blog dengan mudah 

CSS

/* ==== Related Post Widget Start ==== */<br /> <br /> .related-post {<br /> margin:2em auto 0;<br /> font:normal normal 11px/1.4 Arial,Sans-Serif;<br /> }<br /> .related-post h4 {<br /> font-size:150%;<br /> margin:0 0 .5em;<br /> }<br /> <br /> /* ==== Related Post Widget End ==== */


Sedangkan untuk kode HTML nya, sebagai berikut :
<!-- Related Post Widget Start --><br /> <b:if cond='data:blog.pageType == "item"'><br /> <div id='related-post' class='related-post'/> <script type='text/javascript'> var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> "<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop></b:if>]; var relatedPostConfig = { homePage: "<data:blog.homepageUrl/>", widgetTitle: "<h4> Related Post:</h4> ", numPosts: 5, summaryLength: 370, titleLength: "auto", thumbnailSize: 80, noImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", containerId: "related-post", newTabLink: false, moreText: "Read More", widgetStyle: 1, callBack: function() {} }; </script><br /> <script type='text/javascript' src='http://dte-project.googlecode.com/svn/trunk/related-post/related-post.min.js'/> </b:if> <!-- Related Post Widget End -->

Kode di atas hanyalah satu dari banyak jenis model yang disediakan,silahkan di sesuaikan dengan blog anda, Untuk memasukanya kedalam blog pasti agan sudah tau bagai mana caranya kan.kalo begitu sekian toturial dari saya,terimakasih.

Tweet