Cara Membuat Thumbnail Related Post di Bawah Posting

>

Jangan Lewatkan Artikel Yang Berkaitan Dengan Cara Membuat Thumbnail Related Post di Bawah Posting dibawah ini:

• Cara membuat slide dengan efek marqueeMaaf untuk Demonya belum dibuat.... Nih langkah - langkahnya: 1. Login ke blogger dengan ID anda. 2. Klik Rancangan. 3. Dan KLik tab Edit HTML. 4. Cari kode </head> : 5. Copy kode di bawah i ... lihat selengkapnya
• Cara Membuat Read More Otomatis di Blogger Read More Otomatis pada Template Blogger Seperti janji minggu lalu ya sob,kali ini akan mengulas dan mengutak atik 'seputar blogger template' yang kita gunakan saat ini. Betul gan,ini kaitannya 'm ... lihat selengkapnya
• cara menampilkan hanya judul posting saja di homepage  untuk demonya sobat bisa lihat di homepage blog ini DemoSekedarbiasa blogspot.. nih langkah-langkahnya: 1. Login ke blogger dengan ID anda. 2. Klik Rancangan. 3. Dan KLik tab Edit HTM ... lihat selengkapnya
• Cara buat slide menu drop down Klik DEMO untuk lihat contohnya Nih Langkah"nya: 1. Login ke blogger dengan ID anda. 2. Klik Rancangan. 3. Dan KLik tab Edit HTML. 4. Disarankan Back up template dulu. 5. Jangan lupacentang ... lihat selengkapnya
• otomatis menjadi status berikut langkah-Langkahnya: 1.Silahkan anda buka alamat https://twitterfeed.com/2.Klik Register Now maka akan tampil  gambar , silahkan anda isi email aktif anda, password untuk login k ... lihat selengkapnya

بسم الله الرحمن الرحيم

Nah,untuk bentuk fisiknya,sobat bisa lihat di SINI.

Langkah dan Cara Membuat / Memasang Related Post Bergambar (Thumbnail Related Post)

1. Pertama, masuk ke akun Blogger sobat, buka tab Edit HTML dan contreng tulisan "Expand Widget Templates"



















2. Selanjutnya cari kode :

</head> (gunakan CTRL+F untuk mempermudah pencarian)

3. Jika sudah ketemu,tepat diATASnya letakkan kode berikut ini:(diblog ya biar muncul scriptnya)

<!--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/AVvXsEj57SwF0bRTangATavcu9mOKk5Nw7xA1uNrC8DdqFIYdSYYmewCCNH68PQsJf8QFY3YUjPPs79yaZUaX9ooQUelUNhP1ee7yKUqFVy4-3tTwU6huSDIiVSc_9vEhp-6u-T1V7sPge9kd_s/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-->

4. Kemudian sobat cari kode berikut ini..(diblog ya biar muncul scriptnya)

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

5. Bila belum juga dapat diketemukan maka cari kode ini.(diblog ya biar muncul scriptnya)

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

kalo tidak ketemu juga cari kode:

data:post.body

6. Jika sudah ketemu dari salah satu kode tersebut,letakkan diBAWAHnya kode berikut ini:(diblog ya biar muncul scriptnya)

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

7. Simpan tempate sobat.8. Untuk mengatur jumlah kotak yang ditampilkan kita ubah value dari kode berikut.
var maxresults=5;
9. Untuk mengubah jumlah post yang ditampilkan tiap label kita harus mengubah kode berikut.
max-results=6
10. Untuk mengubah title "Related Post" maka editlah kode berikut.
var relatedpoststitle="Related Posts"
11. Untuk mengubah warna pembatas ubahlah kode berikut.
var splittercolor="#d4eaf2"
12. Untuk mengganti tampilan gambar kosong bisa mengubah URL dari kode berikut.
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj57SwF0bRTangATavcu9mOKk5Nw7xA1uNrC8DdqFIYdSYYmewCCNH68PQsJf8QFY3YUjPPs79yaZUaX9ooQUelUNhP1ee7yKUqFVy4-3tTwU6huSDIiVSc_9vEhp-6u-T1V7sPge9kd_s/s400/noimage.png"
Selesai, selamat mencoba sob!

Sumber

Bila anda merasa artikel diatas bagus dan bermanfaat, anda bisa gunakan URL atau HTML dibawah ini. Silahkan anda dipasang dihalaman web atau blog anda untuk menuju kehalaman ini :

URL:

HTML Link:

Forum Link:

Widget by BloggerTipAndTrick

sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Thumbnail Related Post di Bawah Posting ini sangat bermanfaat bagi teman-teman sobat, namun jangan lupa untuk meletakkan link Cara Membuat Thumbnail Related Post di Bawah Posting sebagai sumbernya. Trims ...mencuri itu tidak baik...hargailah karya anak bangsa