Cara Membuat Artikel Terkait dengan Gambar Berjalan Pada Blog

Related post lagi related post lagi… mungkin sobat udah bosan dengan artikel yang satu ini, akan tetapi saya tekankan lagi jika related post ini jauh berbeda dengan related post sebelumnya dan sebelumnya, letak perbedaannya yaitu related post kali ini dengan menggunakan gambar dan gambarnya bisa jalan lagi, keren kan? Dijamin sobat pasti tertarik mengganti related yang sobat pake dengan related post yang satu ini. Oke, langsung aja saya akan menjelaskan bagaimana cara membuatnya. Sobat ikuti langkah-langkah di bawah ini dengan benar dan jika sobat tidak ikuti dengan benar maka sobat akan tersesat hehehe.

1. Terlebih dahulu sobat login ke blogger atau klik disini
2. Pilih Template >> Edit Html >> Lanjutkan
3. Centang Expand widget template
4. Copy script di bawah ini dan letakkan di atas code </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: 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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

5. Copy script di bawah ini dan letakkan di bawah code <div class='post-footer-line post-footer-line-1'> jika tidak ada cari code ini <p class='post-footer-line post-footer-line-1'>

<!-- Marquee Serbablog 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=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://kurniasepta.blogspot.com/2010/01/membuat-artikel-terkait-dengan-disertai.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End—>

6. And finally Simpan/save template.

Catatan:

 var maxresults=10; maksudnya ialah jumlah artikel yang akan ditampilkan pada related post ganti sesuai dengan keinginan sobat  

Hasilnya akan nampak seperti di bawah ini

related post

3 komentar:

  1. kayanya keren tuh, sob kalau dipasang, mesti dicoba kayanya
    http://si-kudil.blogspot.com/

    BalasHapus
    Balasan
    1. Silahkan dicoba gan semoga sukses :)

      Hapus
  2. praktek dulu ah, mudah-mudahan lancar..

    BalasHapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top