Membuat Artikel Terkait Horizontal dengan Thumbnail. Disini kita hanya memerlukan sedikit langkah otak-atik HTML namun alangkah baiknya jika sebelumnya anda beckup dulu templatenya buat jaga-jaga
1. Jelas login ke blog
2. Rancangan - Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode <data:post.body/> agar lebih mudah gunakan CTRL+F
5. Copy kode berikut tepat di bawah <data:post.body/>
<!-- Related Posts with Thumbnails Code Start--><!-- remove --><b:if cond='data:blog.pageType == "item"'><div id='related-posts'><b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'></b:if><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop><script type='text/javascript'>removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs("<data:post.url/>");</script></div><div style='clear:both'/><!-- remove --></b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://pisbon.blogspot.com/2012/03/widget-entri-terkait-trumbails.html'><img alt='Widget Artikel Terkait dengan Thumbnail' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a></b:if></b:if><!-- Related Posts with Thumbnails Code End-->6. Kalau sudah cari lagi kode </head>
7. Copy kode berikut tepat diatas kode </head>,
<!--Related Posts with thumbnails Scripts and Styles Start--><!-- remove --><b:if cond='data:blog.pageType == "item"'><style type='text/css'>#related-posts {float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}Anda ganti sesuai keinginan anda tulisan berikut : Artikel Lainnya : Judul pada widget, var maxresults=6: Jumlah artikel yang di tampilkan. Terakhir simpan/save dan lihat hasilnya.
#related-posts h4{font-weight: bold;color: black;font:normal 14px Arial;text-transform:none;margin:0px;letter-spacing:.01em;line-height: 1.2em;color:#666;}margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;}#related-posts a{color:black;}#related-posts a:hover{color:black;}
#related-posts a:hover {background-color:#d4eaf2;}</style><script type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja4OTvkLFQ0I8aHAKypyYa6qZl6J-Qfmr_f7qGIo7xPGp5EvVtxzNTiNpB22AxVJeSSFSrcDNC__qX7_Rv88qAq2rycdIMwDKQu4pE7rEo7qJgj7GKcGTNi2qzw-myM4ovnwT0k3Xu3ks/s400/noimage.png";var maxresults=6;var splittercolor="#d4eaf2";var relatedpoststitle="Artikel Lainnya";</script><script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/><!-- remove --></b:if><!--Related Posts with thumbnails Scripts and Styles End-->
