Cara Memasang/Membuat Artikel Terkait

Cara memasang artikel terkait diblog. Memasang artikel terkait sesuai dengan label dan artikel terkait juga menampilkan gambar/foto.  Penggunaan label sangat penting untuk setiap Entri sehingga saat memasang artikel terkait berfungsi dengan baik.

Bagaimana cara memasang artikel terkait?

Ikuti langkah berikut ini :

Template - Edit HTML

Lompat ke widget - Blog1 - cari id="post var="post
Cari kode dibawah ini atau lebih mudah cari ini <data:post.body/> untuk template saya bentuknya seperti dibawah ini :
 <data:post.body/>
    </b:if>
</b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Pasang kode merah disini
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='post-footer'>

INI KODE YANG HARUS DI PASANG

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>

textLabel = &quot;<data:label.name/>&quot;;

</b:loop>

</b:loop>

</script>

<script src='http://jelajah.googlecode.com/files/coba-caba9.js' type='text/javascript'/>

</b:if>

Bisa disimpan dulu atau lanjut memasang css
Cari </head> diatasnya ada <b:skin>...</b:skin> klik <b:skin>...</b:skin>
Akan muncul banyak css dengan warna yang khas turun lagi sampai akhir css tadi sehingga menemukan ]]></b:skin>

Letakkan css dibawah ini tepat diatas ]]</b:skin>

/*RelatedPost*/

#toc-outer {font-size:12px;}

#loadingscript {background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJm1S1gbpSzJfWVQ8eWpXxHA3wWOXgyuLQ8TvMb2jLD_0C_zsNqYm395u4cgnV7BaXszKStJEY18awo0fZOV7cG0URBKOexBEIjf3srcUvhelhZbqWIeeoqPhiZXFF54nfMRD5Olwh1vs/s1600/loading.gif') no-repeat 50% 46%;padding:10px;font:bold 20px Georgia,Serif;color:white;height:300px;text-indent:-9999px;-webkit-box-shadow:inset 0px 0px 0px 5px black;-moz-box-shadow:inset 0px 0px 0px 5px black; box-shadow:inset 0px 0px 0px 5px black;}

.itemposts, #itempager{margin:5px;height:auto;background-color:#333;overflow:hidden;padding:4px;border:1px solid #444;-webkit-box-shadow:0px 1px 2px black;-moz-box-shadow:0px 1px 2px black; box-shadow:0px 1px 2px black;-webkit-transition: all .2s linear;-moz-transition: all .2s linear;-o-transition: all .2s linear;transition: all .2s linear;}

.itemposts:hover{background-color:#444}

.itemposts img {float:left;height:50px;width:50px;margin:2px 10px 2px 0px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border:1px solid #666;padding:4px;}

.itemposts a{line-height:30px;overflow:hidden;color:rgb(230,230,230);}.itemposts a:hover{color:rgb(38, 143, 224)}

.itemposts .itemfoot {border:1px solid #666;padding:5px 10px;background-color:#444;color:#888;overflow:hidden;text-align:right;}

#pagination, #totalposts {color:#999;padding:3px;text-align:center;}

#pagination span, #pagination a {border:1px solid #666; color:white;display:inline;margin:0 1px;padding:2px 5px;text-indent:0px;background-color:#555;text-decoration:none;}

#pagination span.actual,#pagination a:hover {background-color:#333;}

#pagination span.hidden {display:none;}

Klik simpan dan lihat hasilnya.
Catatan jika mengalami masalah harap bertanya sehingga tutorial ini berguna.