Cara Membuat Thumbnail Related Post di Bawah Posting

>

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

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

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