Membuat Related posts Thumbnail Terbaru

Membuat Related posts Thumbnail V.2 - sebelumnya saya mengulas mengenai related post Thumnail, pada kali ini saya masih dalam topik yang sama mengenai related post, namun memiliki perbedaan dalam related post yang akan saya ulas kali ini dengan sedikit sentuhan efek.

kelebihan menggunakan related post thumnail pengunjungan dapat langsung melihat gambar sesuai dengan yang mereka cari dan menjadikan tampilannya semakin menarik, bila anda tertarik berikut langkah-langkahnya :

Membuat Related posts Thumbnail V.2

Anda buka editor template, dengan menggunakan ctrl+f anda cari kode </head> copy kode dibawah ini dan terapkan diatasnya :

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 10px;  -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='https://aakyos.googlecode.com/svn/trunk/Related-posts%20v.2.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Selanjutnya anda cari kode <div class='post-footer'>, kemudian anda terapkan kode berikut dibawahnya :

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<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_thumbs&amp;max-results=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
  var relatedpoststitle=&quot;<b/>Baca juga artikel lainnya :&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://aak-share.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR_tNVAUOSim3RHhI7rl4rrx19_B7fPtsEk9Ajsq-pY7prp2-YjKtYXGKBtaCVZ4WOj1LObbdw5D7Y-NjM_mVrWv758ZnKHYjDkIeZWhrMCvvqF6ec8WvxJTQO7Bq1ka_zrmH_0mK0vtMj/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

Demikian Membuat Related posts Thumbnail Terbaru , semoga bermanfaat!

Share this post