Cara Membuat Related Post dengan Gambar Thumbnail keren responsive

related post


Cara Membuat Related Post dengan Gambar Thumbnail Keren Di Blog - Related Post yang saya Buat Kali ini akan menampilkan Gambar dari setiap Postingan anda, tentunya related yang saya Buat Ini sangat ringan dan juga Responsive. untuk contoh nya lihat saja Gambar di atas, itu adalah contoh Related pos milik saya.

Namun sebelum membuat Related post dengan Gambar thumbnail saya sarankan setiap artikel anda memiliki gambar ya, supaya related pos nya berfungsi dengan Baik. Langsung saja ini dia cara cara nya.

CARA CARA
1. Silahkan anda masuk ke halaman utama Blog anda
2. lalu pilih menu Tema
3. Kemudian pilih edit HTML
4. Setelah editor nya terbuka Silahkan anda letakan kode di bawah ini tepat di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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:active{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:2px solid #f2f2f2;object-fit: cover;width:110px;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: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:active{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

5. kemudian anda cari kode <data:post.body/> dengan cara menekan ctrl+f di keyword anda
6. silahkan anda paste kan kode di bawah ini tepat di bawah kode <data:post.body/> yang terakhir atau bisa mencoba satu persatu


<!-- 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>
<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

7. setelah selesai silahkan Simpan Template anda kemudian Lihat Hasil nya, pasti Related Post anda sudah Tampil keren dengan Gambar Thumbnail.

Selamat Mencoba untuk membuat Related Post ya, oh ia apabila ada yang tidak mengerti silahkan bertanya di kolom komentar ya. Assalamualaikum

Berlangganan update artikel terbaru via email:

1 Response to "Cara Membuat Related Post dengan Gambar Thumbnail keren responsive"

Iklan Tengah Artikel 2