Jika blog Anda memiliki posting yang panjang dan Anda ingin membantu pengunjung Anda untuk menemukan posting terbaru Anda dengan cepat, tanpa menghabiskan waktu browsing untuk mencari posting blog Anda yang lama. Kemudian menampilkan gambar thumbnail kecil yang berdekatan dengan judul postingan dalam widget Recent Post/Posting Terbaru.
Hal ini tidak hanya terlihat bagus, tetapi juga menarik pengunjung untuk mengklik pada posting Anda.
Anda dapat dengan mudah menyesuaikan apakah atau tidak Anda ingin menampilkan thumbnail, ringkasan posting, dan jumlah komentar untuk setiap posting sepanjang sisi judul.
Ikuti langkah-langkah untuk menambahkan "Widget Recent Posts Dengan Thumbnail" di (Blogspot) :
Langkah 1
Log in Blogger. Go to your Blogger Dashboard > Design/Layout > Page Element > Add a Gadget > HTML/JavaScript
Langkah 2
Copy dan paste kode di bawah ini :
<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='http://www.webaholic.co.in/other/recent-posts-widget-with-images.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='http://www.YOUR-BLOG-URL.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<small><a style='margin-left:10px;align:right;' href='http://www.blogger.webaholic.co.in/2011/08/recent-posts-widget-with-thumbnails-for.html' target='_blank'>Recent Posts Widget</a> | <a href='http://www.webaholic.co.in/' target='_blank'>Webaholic</a></small>
Langkah 3 :
Ganti YOUR-BLOG-URL dengan blog url Anda
.
Langkah 4
Save the template.
Note :
var numposts = 5; (dimana angka 5 menunjukkakan jumlah posting yang akan di tampilkan)
0 comments:
Post a Comment