Cara Membuat Artikel Terkait disertai Gambar

Cara membuat artikel terkait disertai gambar, cukup mudah. Berikut tutorialnya.

Langkah 1. Login dulu ke Blog Sobat, silahkan menuju Template >> Edit HTML 

Langkah 2. Klik dimana saja dalam area kode, kemudian tekan Ctrl + F

Langkah 3. Masukkan kode berikut kedalam kotak search, lalu tekan Enter

</head>

Langkah 4. Copy dan paste kan kode berikut diatas tag </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: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:2px solid #f2f2f2;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:hover{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-->

Catatan:
-untuk mengganti ukuran gambar, ubah nilai 110px dan 100px, kode berwarna merah
-untuk mengganti warna dan ukuran huruf judul artikel terkait, ubah value kode berwarna biru
-hapus kode berwarna ungu untuk menampilkan artikel terkait di beranda dan postingan

Langkah 5. Carilah baris kode berikut (kode ini ada 2 bagian, berhenti pada kode bagian ke-2)

<div class='post-footer'>

Langkah 6. Copy paste kan kode dibawah diatas <div class='post-footer'>

<!-- 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=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Catatan:
-max-result=5 adalah jumlah postingan yang akan ditampilkan sebagai artikel terkait

-jika ingin menampilkan artikel terkait di beranda, hapuslah kode berwarna ungu

Penting!: jika artikel terkait tidak muncul, pindahkan kode (Langkah 5) diatas tag <b:/includable>

<b:includable id='postQuickEdit' var='post'>

Langkah 7. Simpan template, sekarang coba cek blog sobat!!....

Semoga berhasil...^^

SHARE

About Jaka's TechnoBytes