Cara Membuat Artikel Terkait Dengan Thumbnail

Cara Membuat Artikel Terkait Dengan Thumbnail Horizontal. Assalamualaikum Sobat,,Beberapa waktu lalu saya udah sare Cara Membuat Artikel Terkait Dengan Scroll .Sekarang saya share lagi tentang membuat artikel terkait, tetapi dengan efek Thumbnail atau Disertai Gambar dan Keterangan. Untuk lebih jelas bisa dilihat screnshoot di bawah ini. Tanpa panjang lebar kita langsung aja ke TKP

Langkah Pertama, Tentunya Login dulu Ke Akun Blogspot sobat,,jangan ke akun orang laen ya,,hehe.... Trus pilih Template, Pilih Edit HTML, Centang Expand Template Wdget yang terdapat pada pojok kiri atas..Kalo udah..

1. Cari Kode <data:post.body/> . Untuk memudahkan pencarian,,Tekan Ctrl+F.

2. Kalo kode <data:post.body/>, letakan kode di bawah ini tepat DIBAWAHnya.

<!-- 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://www.blogdhika.com/2012/01/artikel-terkait-horizontal-dengan.html'><img alt='Cara membuat 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-->
3. Langkah selanjutnya,,Cari kode </head> .Untuk memudahkan pencarian,,Tekan Ctrl+F.
4. Letakan kode di bawah ini tepat DIATASnya.

<!--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; } #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/AVvXsEgBjkqAXxeevd5DExL2BAVfHXp5kRDt66mLB_WuPxKuBl5JCdjVpKKjVBD-4wg7SXp30xK8WPKcFIoEqAk-DXCTy6_NByXijC2M6AEcM6VwH4N8s7z5iG-x3nGPa0mT0ulYpEZMT6MYyWY/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-->
CATATAN : Kode diatas inilah yang mempengaruhi tampilan Artikel Terkait Horizontal dengan Thumbnail di blog sobat, ganti sesuai keinginan
Artikel Lainnya : Judul pada widget
var maxresults=6: Jumlah artikel yang di tampilkan
SAVE DAN SELESAI
Cara Membuat Artikel Terkait Dengan Thumbnail HorizontaL