Skip to main content

Cara Membuat Related Post Thumbnails Blogger

Tips Menghias blog ini akan membuat seperti gambar diatas, untuk contoh nyatanya lihat dibawah postingan ini..
Oke langsung saja yah..
1.Langkah pertama masuk dulu ke blogger dasbor sobat, lalu back up atau download terlebih dahulu template sobat, untuk jaga jaga jika sobat mengalami kesalahan, kemuidian edit HTML dan centang "Expand Widget Templates"
2.Kemudian cari code dibwah ini, gunakanlah Ctrl + F untuk memudahkan sobat mencari
</head>

Setelah ketemu gantikan dengan kode dibawah ini..
<!--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 type='text/javascript'>
var defaultnoimage=" https://lh3.googleusercontent.com/-FPqdjkT1gDg/T00edMGpNFI/AAAAAAAAAas/UE79zCbeq4E/s254/No%2520Image.jpg";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Jangan Lewatkan Artikel Lainnya";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>



3.Setelah itu cari lagi kode berikut..

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

jika sobat tidak menemukan kode seperti diatas coba cari kode dibawah ini..

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

Setelah itu letakkan kode dibawah ini setelah kode yang tadi atau tepat dibawah kode yang tadi.

<!-- 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>
<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=5&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'/>
</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-->

Kemudian jangan lupa untuk save..lalu lihat hasilnya..

4.Kalau sobat ingin menambah atau mengurangi jumlah artikel terkait atau related post yang akan ditampilkan sobat tinggal menggantikan nomor seperti kode dibawah, gantikan nomor sesuai dengan yang sobat ingin tampilkan.

var maxresults=5;

Untuk mengubah jumlah label yang akan diperlihatkan sobat tinggal edit kode sperti dibawah ini

max-results=5

5.Untuk merubah judulnya sobat bisa edit kode seperti kode berikut.

var relatedpoststitle="Related Posts";

6.Untuk postingan yang tidak ada photo, supaya terlihat ada photonya gantilah url photo yang sobat ingin tampilakan supaya nanti jika secara otomatis untuk postingan yang tidak memiliki photo akan menampilkan photo yang sobat mau

var defaultnoimage="https://lh3.googleusercontent.com/-FPqdjkT1gDg/T00edMGpNFI/AAAAAAAAAas/UE79zCbeq4E/s254/No%2520Image.jpg";

7.Editlah kode warna dibawah ini kalau sobat ingin mengganti warna framenya

var splittercolor="#d4eaf2";


Selamat Mencoba... !!!

Comments

Popular posts from this blog

Lirik Indal Faji kuntu usolli

Lirik lagu Indal Fajri ***
Indal fajri
kuntu usolli
Usolli lillahi ta'ala
Adzkuru syauqon
Ismallahi
hubban ikroman ijlala 2X

subhanallaah
manrofaassama
waahsanal bina
subhanallah

subhannalah
faahatidzuhur
biazmalil 'utur
subhanallah

subhanallah
manzada bil hawa
antamuhu jawa
subhanallah

subahanllah
maasmalasuhun
minhosmihatakun
subhanallah

allah allah ....ya allah .....ya allah .....ya allah


Indal fajri
kuntu usolli
Usolli lillahi ta'ala
Adzkuru syauqon
Ismallahi
hubban ikroman ijlala 2X

subhanallah
kawwanal insan 'allamal bayan subhanallah

subhanallah
yaman wahab dalluh
 hatta nagtu wanaruh
 subhanallah

subhanallah
wal aqla wal janan
wal hubba wal hanan
subhanallah

subhanallah
hamdan syukron lillah
kullu rojabillah
subhanallah

allah.. ya allah... ya allah... ya allah


Indal fajri
kuntu usolli
Usolli lillahi ta'ala
Adzkuru syauqon
Ismallahi
hubban ikroman ijlala 2X

Tahapan alur novel, cerpen dan drama