Membuat Related Post dengan Thumbnail pada Blogger bukan hal yang baru lagi bagi sahabat yang sudah sekian lama hidup di dunia blogspot. Related Post
yang menyertakan image alias gambar secara thumbnail akan lebih
mempercantik tampilan blog, dan diyakini dapat meningkatkan pageview
pada blog sahabat yang mungkin saja bisa meningkatkan kualitas alexa
pagerank atau tambahan recehan dolar. Berhubung kemarin ada sahabat
blogger yang bertanya di blog sebelah, maka langsung saja saya share
tips yang telah tersimpan dalam sanubari :embeerrrr:, untuk sedulur yang
sudah lebih expert,” tidurlah selamat malam, lupakan sajalah.. aku..”
biarkan pemula ini lagi belajar merangkak -glunthang-
Cara Membuat Related Post dengan Image Gambar Posting adalah sebagai berikut:
1. Edit HTML Template Blogger
Silahkan login ke blogger.com
Klik Rancangan/Design, klik Edit HTML, kemudian checkmark alias contreng Expand Widget Templates
Membuat CSS Related Post lebih dahulu, salin kode berikut ini
<b:if cond=’data:blog.pageType == "item"’>kemudian pasang/letakkan di atas kode </head>
<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 src=’http://jiox.googlecode.com/files/sambung.js’ type=’text/javascript’/>
</b:if>
3. Tekan F3, kemudian search atau cari kode ini
<div class=’post-footer-line post-footer-line-1′>kalau tidak ada, alternatifnya cari kode ini
<p class=’post-footer-line post-footer-line-1′>kemudian salin dan letakkan kode dibawah ini, setelah kode di atas
<b:if cond=’data:blog.pageType == "item"’>Keterangan:
<div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != "true"’>
</b:if>
<b:if cond=’data:blog.pageType == "item"’>
<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:if></b:loop><a href=’http://alkatro.com/’ style=’display:none;’>simple tips</a>
<script type=’text/javascript’>
var currentposturl="<data:post.url/>";
var jumlahpost=7;var judulnya=”Artikel Terkait”;
removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();
</script>
</div><div style=’clear:both’/>
</b:if>
text yang bercetak miring dan di bold : var jumlahpost=7
menandakan jumlah judul posting yang akan muncul, angka 7 silahkan sesuaikan dengan selera sahabat
Text Artikel Terkait, adalah kalimat judul yang akan muncul di atas daftar artikel posting terkait pada blog sahabat,silahkan ganti dengan kalimat yang lebih romantis dan mendayu dayu :halah:
Kalau Sudah silahkan “Save Template”
0 comments:
Post a Comment