Recent Posts atau Artikel Terbaru yang baru dipublish atau dipostingkan akan lebih menarik jika ditambah dengan gambar atau thumbnail dan cara meletakkan widget recent post / artikel terbaru ini biasanya di sidebar blog. Tampilan widget recent post ini sangat menarik karena hanya menampilkan hanya judul postingan saja dan menggunakan slide yang turun kebawah. Langsung saja yuk simak cara memasang widget recent posts dengan thumbnail di blog dibawah ini.
Baca juga : Modifikasi Recent Posts dengan Fungsi Next dan Previous
Cara Membuat Recent Posts / Artikel Terbaru dengan Gambar di Blog
1. Login ke blogger
2. Pilih Tata Letak
3. Pilih Tambah Widget
4. Pilih HTML/Java Script.
5. Masukan kode berikut kedalamnya
<style type="text/css">
#rp_plus_img{height:360px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#e9e9e9;
border:solid 1px #a0a0a0;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/lintastutor/rudy/artikelterbaru.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script>
</ul>
Keterangan :
- var numposts = 5; adalah jumlah artikel yang ditampilkan, silahkan ganti menurut selera anda
6. Simpan
Demikianlah tutorial blog mengenai cara memasang artikel terbaru dengan thumbnail, silahkan dicoba dan semoga bermanfaat.
