Membuat Related Posts dengan Thumbnail - 2 | Buku Catatan si Ugi

Banyak cara membuat dan memasang Related Posts dengan Thumbnail. Selain memasang dengan cara otomatis, Related Posts dengan Thumbnail ini juga bisa dipasang secara manual.
Selain customisasi yang bisa disesuaikan dengan selera, Related Posts dengan Thumbnail ini juga cukup lumayan cepat dalam loading. jika anda tertarik memasangnya, ikuti saja tutorial berikut ini.



Cara Memasang Related Posts dengan Thumbnail-2
  •  Login ke blogger
  • Tata Letak
  • Edit HTML, centang Expad Widget Templates
  • Cari kode </head> dan
  • Letakkan kode script di bawah ini tepat diatas kode </head> 



<!--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/AVvXsEhZgotsuEL9H3krs6p3-4ZzwHanPLCpUdD5-0RTLffcCM-y3DAkSP1mDYGOAhO-b2fOHeY3PZmrZ_cX87wdlR52AH5GfNj-kcaMgdKwBi8CDsLWCwC9snvCGB625o72nFMZ2WyXGMCdH8Y/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='https://sites.google.com/site/archivesiugi/javascr/PostThumbnail.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->


Keterangan:
  • Warna Hijau, Untuk mengubah thumbnail default
  • Warna Merah, Untuk menyesuaikan jumlah maksimum posting terkait yang ditampilkan
  • Warna Biru, Untuk mengubah warna
  • Warna Kuning, Untuk mengedit judul widget

  • Sekarang cari lagi kode dibawah ini
<div class='post-footer-line post-footer-line-1'> atau

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

  • Kemudian letakan kode dibawah ini tepat dibawah salah satu dari kode diatas


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



  • Lalu simpan dah lihat hasilnya

Selesai, selamat mencoba...!!!




2 komentar:



Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan