Tips n Trick | Cara Membuat Related Post / Artikel Terkait

Gie Morello Friday, April 22, 2011 Blogger

Pada tutorial kali ini saya akan membuat tutorial tentang cara membuat related post. Membuat related post bukan hanya monopoli pengguna blog berplatform wordpress saja. Sekarang ini, pengguna blog berplatform Blogspot pun bisa membuat related post tampil di sidebar blog mereka. Tidak Seperti Wordpress yang mempunyai Tag dan Category yang bisa digunakan sebagai acuan untuk related post, pada blogspot prinsip ini menggunakan pemanfaatan dari Label saat kita posting.

Related Post akan menunjukkan posting mana saja yang mempunyai label yang sama. Lihat screenshot di bawah ini :

Cara Membuat Related Post di Blogspot :

Login ke akun blogger kamu, pilih blog yang ingin kamu edit, klik link Layout kemudian masuk ke Edit HTML.
Jangan lupa centang/tandai/aktifkan Expand Widget Templates Untuk bisa mengedit template secara keseluruhan.
Download template anda untuk membackup jika terjadi error.
Masukkan kode script berikut sebelum tag </head> :

     <style>
    #related-posts {
    float : left;
    width : 540px;
    margin-top:20px;
    margin-left : 5px;
    margin-bottom:20px;
    font : 11px Verdana;
    margin-bottom:10px;
    }
    #related-posts .widget {
    list-style-type : none;
    margin : 5px 0 5px 0;
    padding : 0;
    }
    #related-posts .widget h2, #related-posts h2 {
    font-size : 20px;
    font-weight : normal;
    margin : 5px 7px 0;
    padding : 0 0 5px;
    }
    #related-posts a {
    text-decoration : none;
    }
    #related-posts a:hover {
    text-decoration : none;
    }
    #related-posts ul {
    border : medium none;
    margin : 10px;
    padding : 0;
    }
    #related-posts ul li {
    display : block;
    background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sCLRCuMcVvFzCliBKtib7CLRGtCku8W6w4xfaNwc6alo3UrBo6AC92XYgbbV8WtTbUUZFfs3FwUmP6NAeAfCNz2EsPg7QyXja_fBFU3TdAdKAPhkzamx5U-RSx7OWzgAJScu_tSnlu4/") no-repeat 0 0;
    margin : 0;
    padding-top : 0;
    padding-right : 0;
    padding-bottom : 1px;
    padding-left : 21px;
    margin-bottom : 5px;
    line-height : 2em;
    border-bottom:1px dotted #cccccc;
    }
    #related-posts ul li:hover {
    background-color:#E2EBF8;
    border-top:1px dotted #cccccc;
    }
    </style>
    <script src='http://oemar.googlecode.com/files/Related_post_hack.js' type='text/javascript'/>

Kemudian cari kode berikut :

<data:post.body/>

Lalu letakan kode berikut sesudah <data:post.body/> :

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
Widget by <a href='http://anthneic.blogspot.com/' title='aNtH Blog'> aNtH Blog</a>
</div></b:if>