Membuat Related Post dengan gambar di Blogspot

Home » Blogging » Membuat Related Post dengan gambar di Blogspot

Senin, 28 November 2011

Membuat Related Post dengan gambar di Blogspot

Posted by Mohamad Rivai on 04.43.00 46 comments

Tampilan template blog saya berubah lagi, yang kemarin 3 kolom sekarang menjadi 2 kolom. Itulah kelemahan saya, suka ngedit ngedit template, yang ini yang itu, kurang gini kurang gitu, pokoknya cepet banget yang namanya bosan itu datang. Gara gara linkwithin kemarin ndak berjalan sesuai rencana, pertama seharusnya muncul 4 buah ternyata hanya bisa muncul 3 buah trus loadingnya juga minta ampun, akhirnya untuk kedua kalinya saya copot lagi linkwithin dan saya ganti pakai related post dengan gambar yang bentuknya mirip lah sama bikinan linkwithin.

Karena hari ini tidak ada kejadian yang bisa diceritakan makanya saya tulis saja cara membuat related post dengan gambar di blogspot. Kita tidak dituntut paham yang namanya html, CSS ataupun javascript untuk membuat related post dengan gambar ini. Yang anda perlukan hanya mouse, klik kiri dan klik kanan, serta rasa tidak mudah putus asa, hehehehe.

Langsung saja menuju Design , edit HTML, centang Expand Widget Templates (jangan lupa back up dulu template buat jaga jaga)

cari kode:

</head>

ganti dengan kode:


<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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/AVvXsEhOziRCncezeHaqB47XmHGT1bfYIjd0Lyo5J0Ad_D_eLtZuqpx5p4t_QyjdBs9GJ54wroat6g7JR0r0glgS3c1Q-hUQxh9-jsrBM2TKt_TGXmsWiQw_Ra2bhKva7wEMon46RmdgZBbJKyM/s400/noimage.png";

var maxresults=5;

var splittercolor="#d4eaf2";

var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

</head>

Selanjutnya cari

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

apabila tidak ada cari

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

taruh kode ini dibawah nya kode diatas


<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>


Untuk menggati jumlah halaman yang muncul ganti angka 5 pada kode var maxresults=5;
Untuk menguba warna spliter silahkan ganti "#d4eaf2" pada kode var splittercolor="#d4eaf2";
Untuk mengganti judul silahkan ganti tulisan "Related Post" pada kode var relatedpoststitle="Related Posts";

Nah itu dia tadi sedikit sharing untuk cara membuat related post dengan gambar di blogspot.

Bagi yang belum jelas silahkan tanya tanya, kalau bisa ya tak jawab kalau tidak ya maaf, atau bisa lihat langsung saja di www.bloggerplugins.org.