Cara Membuat "Related Post" Di Blog Cara Membuat "Related Post" Di Blog

 Panduan Cara Membuat "Related Post" di blog.Related post atau Artikel Terkait pada blog mempunyai peran penting untuk blog itu sendiri dan akan memudahkan para pengunjung blog untuk menemulan artikel yang mungkin mereka anggap menarik.Dalam hal ini penggunaan Related Post atau Artikel Terkait memang membantu pengunjung blog dan juga membantu pemilik blog itu sendiri,sehingga setiap artikel/postingan dapat dimungkinkan untuk dibaca oleh pengunjung.

Related Post akhir-akhir ini banyak digunakan oleh para blogger,dan akoe rekomendasikan kepada sobat untuk menggunakannya/memasang di blog.Untuk melihat contoh dari widget related post ini,silahkan sobat liat aja di blog ini "andyrra".Nah....jika sobat tertarik untuk memiliki related post yang serupa dengan blog ini,silahkan ikuti langkah-langakah berikut untuk panduan memasangnya.

Berikut Panduannya :

1. Seperti biasa sobat blogger mesti Login dulu ke akun blog sobat masing-masing
2. Setelah login,klik Rancangan
3. Klik EDIT HTML
4. Centang "Expand Widget Templates"
5. Sekarang cari kode </head&g; ,untuk pencarian termudah silahkan sobat tekan Ctrl + F pada keyboard komputer sobat trus masukkan kode tersebut </head> 
6. nanti hasilnya kode tersebut akan disorot warna hijau.
7. Copy dan Paste kode di bawah ini :

<!--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:center;

text-transform:none;

 height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts  a:hover {

background-color:#d4eaf2;

}

</style>

<script type='text/javascript'>

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPTq_n8RK28v1Zq4vqpTZ8McdL4KwW0c4QMpPQaMZ8jXZf54ikwG2ElDJVJWdfHnDS6zuPR1GpbZ3skNBdpQsXOxd1f1NJr-oJir-bQAffnae1H_RgtbWcoec4GQG24EL8CefhUXjZ5W0/s400/noimage.png";

var maxresults=5;

var splittercolor="#d4eaf2";

var relatedpoststitle="Related Posts";

</script>

<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

7.   Letakan kode diatas sebelum/di atas kode </head>

8.    Langkah selanjutnya sobat cari kode
        <div class='post-footer-line post-footer-line-1'>

9.    Cara mencarinya sama seperti panduan no.5

10.  Jika sobat tak menemukan kode tersebut,silahkan sobat cari kode

         <p class='post-footer-line post-footer-line-1'>

11.  Copy dan Paste kode di bawah ini dan letakkan setelah/di bawah kode di atas

<!-- Related Posts with Thumbnails Code Start-->

<!-- remove --><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'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</script>

</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

12. Save....

Semoga berhasil