Cara Memasang Widget Artikel Terkait Dengan Gambar di Blogspot

Assalamu’alaikum.Wr.Wb | Ada seorang pengunjung BoyTrik, bertanya ke saya tentang, bagaimana cara memasang widget artikel terkait, seperti punya blog saya. Namun dengan di sertai gambar seperti punya BoyTrik. Untuk lebih jelas pertanyaannya seperti ini:
"minta cara membuat artikel terkait donk mas
yang kayak punya mas itu" di Postingan Cara Mengetahui Harga Blog
Gio887 Regio Pangestu Pemilik Blog http://www.ionnity.com/
Tak ingin membuat menunggu saya langsung mencari caranya di Google, jujur saja Widget artikel terkait dengan Gambar milik blog ini sudah bawaanya, jadi jelas saya tidak tahu cara memasangnya. Dan setelah sekian lama, akhirnya sayapun berhasil menemukannya, dan sekarang ini mungkin saya telah berhasil menjawab pertanyaan dari beliau, ”WUISS”.

Oke, biar gak nunggu lama lagi, berikut Cara Memasang Widget Artikel Terkait Dengan Gambar:

1. Pertama masuk ke Akun Blogger anda
2. Masuk design kemudian edit HTML
3. Centang kotak kecil di kanan atas Expand Widget Templates
4. Untuk menghindari kesalahan sebaiknya download template anda dulu

5. Setelah itu letakkan kode di bawah ini di atas </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: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: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sastrablog.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Kalau sudah, cari kode berikut
<div class='post-footer'>
Dan letakkan kode di bawah ini di atas kode di atas

<!-- 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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=8;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

 Nb_ Var maxresults=8 adalah jumlah artikel terkait yang muncul, silahkan di sesuaikan _ Anda bisa mengganti warna tulisan sesuka anda ( background-color:#d4eaf2;) background anda.
Script di atas saya dapatkan di http://www.kutulis.com/2012/04/cara-membuat-artikel-terkait-dengan.html

6. Simpan Template dan lihat Hasilnya

Baik, saya rasa pertanyaan sudah berhasil terjawab. Baik, sekarang waktunya bagi anda yang ingin bertanya kembali, atau mengkritik dan memberikan saran, silahkan jangan ragu langsung tuangkan di kotak komentar. Saya tunggu Lho.

25 Responses to "Cara Memasang Widget Artikel Terkait Dengan Gambar di Blogspot"

  1. wahh...thanks gan jujur ini yang ane tunggu2 sejak lalu, sempat ane ngeliat salah satu pengunjung yg bertanya demikian,,n sya juga berharap bisa di realisasikan ekkhhh..akhiirrnya terwujud juga, langsung y ane terapkan!!! di blog ane

    BalasHapus
  2. kalo boleh...request juga y artikel berlangganan kyk punya blog ini juga

    BalasHapus
  3. weh... mantab gan... ntar ane coba... mudah-2han berhasil..

    salam blogger

    BalasHapus
  4. Mantap gan... ane coba juga berhasil. izin copy gan buat repferensi belajar...

    BalasHapus
  5. terimakasih gan,dah ane pasang tipsnya ni.good,,.mantap tap!

    BalasHapus
  6. gan tu udah ane coba tapi gx bisa gan,,,, mohon bantuan.a

    BalasHapus
  7. bagus juga nih sob, template saya tidak ada related postnya. dah di coba nih,, jgn lupa tips dari saya..

    BalasHapus
  8. makasih yaa ssoobbb !! atas bantuannya,

    ternyata bisa kogh.
    :)

    kunjung balik http://aldofahreza.blogspot.com

    BalasHapus
  9. .dah aku coba manteppp broooo

    BalasHapus
  10. saya coba di blogku www.addausry.com manssstaaaaaaaabbb !!

    BalasHapus
  11. yes,akhirnya nemuin juga yang saya cari"
    makasih mz dah share info nya...
    mampir ke gubug saya mz bila berkenan,,^^
    tq b4

    BalasHapus
  12. langsung di coba kang.. makasih...

    BalasHapus
  13. Udah diikutin tapi kok error kang,, bantuin dong,,,

    BalasHapus
  14. Thank's infonya...
    ane pengen coba dulu ni

    BalasHapus
  15. Panduan yang sangat bagus dan lgs bisa diterapkan tanpa bingung dan error. Good Job! Monggo Silakan Mampir...

    BalasHapus
  16. Mantab surantaaabbbbb........josss gan..,ini yg ane cari'' dr dulu,soalnya bisa tak pasang di template blog ane,yg lain kagak bisa smua.izin bookmark gan..!!tks

    BalasHapus
  17. Langsung tak kei bintang limo...!!!!hehehehe....
    Blog ane yg kurang apa nya gan..!!! Maklum newbie

    BalasHapus
  18. weh... mantab gan... ntar ane coba... mudah-2han berhasil..

    salam blogger -

    BalasHapus
  19. yes,akhirnya nemuin juga yang saya cari"
    makasih mz dah share info nya...
    mampir ke gubug saya mz bila berkenan,,^^
    thanks -

    BalasHapus
  20. bgusa gan..blog saya jadi lebih bagus

    BalasHapus
  21. maaf bro, komplain dan minta bantuan....
    saya masuk ke bagian html, ane cari tag yang kayak agan maksud kagak nemu-nemu...
    kalau nyari script
    div class='post-footer'
    gk ketemu ane harus kek gmana...???

    jangan lupa kunjungi http://komputerista.blogspot.com/

    BalasHapus

Terimakasih ya udah repot-repot berkunjung kesini. Dan sebagai tanda jejak, dengan senang hati saya menerima setiap Komentar dari Anda. Dan bagi Anda yang Blogger, boleh menyematkan LINK di Namanya, biar Nanti saya bisa berkomentar Balik Keblog Anda!!!