Monday, 11 March 2013

Cara Membuat Artikel Terkait/Related Post (Dengan Gambar)

Hallo sobat Blogger. Sekarang lagi agak males update posting karena keasyikan main game online nih haha. Kemarin udah baca artikel Mr. Bloggie tentang ini? "Cara Membuat Artikel Terkait/Related Post (Tanpa Gambar)". Nah bedanya dengan postingan Mr. Bloggie yang kemarin itu cuma di gambar :p. Kalo yang kemairn Artikel Terkaitnya cuma berupa list artikel. Di postingan yang sekarang Mr. Bloggie bahas itu yang pake gambar. Mau liat contohnya? Nih kayak gini nantinya :

Gambar Artikel Terkait/Related Post dengan Picture | Mr Bloggie
Gambar Artikel Terkait/Related Post dengan Picture
Udah pada taukan fungsi Artikel Terkait soalnya di postingan yang kemarin udah Mr. Bloggie bahas walaupun hanya intinya. Intinya Artikel Terkait ini berfungsi agar postingan kita yang sudah lama dapat terbaca oleh pengunjung. Sehingga dampaknya Bounce Rate menjadi kecil dan mempengaruhi SEO juga. Tanpa banyak ngomong langsung aja ya ke topik Check this out!

1. Login ke Blogger
2. Buka Menu 'Template'
3. Lalu klik 'Edit Html' (Sebelum mulai, harap backup template yang digunakan agar dapat di restore kembali jika ada masalah dalam pemasangan).
4. Cari kode berikut : </head> (Pakai Ctrl+F untuk mempermudah)
5. Copy Paste kode di bawah ini tepat di atas </head>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:90%;
min-height:90%;
padding-top:0px;
padding-left:8px;
}
#related-posts h2{
font-size: 1.0em;
font-weight: bold;
color: white;
font-family: Rockwell,Georgia,Serif;
margin-bottom: 0.8em;
margin-top:0em;
padding-bottom:0em;
}
#related-posts a{
color:white;
}
#related-posts a:hover{
color:white;
}
#related-posts a:hover {
background-color:#080;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://4.bp.blogspot.com/_rKG-ziTSNUQ/TQjMBwjYg5I/AAAAAAAACgc/BT3MbSXKv1g/s1600/No+Image.jpg&quot;;
var maxresults=6;
var splittercolor=&quot;#000000&quot;;
var relatedpoststitle=&quot;Artikel Terkait :&quot;;
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--End Related Post-->
6. Cari kode berikut : <data:post.body/> (Pakai Ctrl+F untuk mempermudah)
7. Copy Paste kode dibawah ini kemudian letakkan di bawah <data:post.body/> 
Catatan : Biasanya terdapat 2 buah <data:post.body/> Pakai kode yang kedua lalu paste di bawahnya ya. 
<!-- Start Related Posts-->
<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'/>
</b:if>
<!-- End Related Posts-->
8. Save.

Kayaknya segitu aja yang bisa Mr. Bloggie share buat sobat blogger tentang "Cara Membuat Artikel Terkait/Related Post (Dengan Gambar)". Mohon maaf kalo ada salah-salah penulisan dan misalkan ada kalimat yang kurang berkenan di hati sobat blogger semua. Terima Kasih telah berkunjung. Have nice day! and Keep Blogging!.

Punya Pertanyaan seputar postingan di atas? Langsung aja berkomentar atau tanya melalui E-mail : misterbloggie@gmail.com ^^
Next
This is the most recent post.
Older Post

9 comments:

  1. thanks atas artikelnya yang keren ini..

    ReplyDelete
  2. Slamat siang mas.. Ijin nyobain dulu.. Thank.

    ReplyDelete
  3. makasih gan, udah saya coba dan berhasil :)
    http://blog-medianet.blogspot.com/

    ReplyDelete
  4. Makasih gan untuk tutornya, sangat membantu :) :>)
    http://goo.gl/yeUiCg

    ReplyDelete
  5. terimakasih informasinya :)
    http://goo.gl/4jDhC3

    ReplyDelete

Speak up your mind! Don't Junk, Spam, Porn. I hate this!