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.
Related Posts
tutorial blog
- How to Use Pokespy
- Cara Membuat Link Download dari MediaFire
- Menambah Elemen Sidebar Sebelah Kiri di Blogspot
- Cara Mendaftar Blog ke Dmoz
- Begini Cara Daftar Blog di Technorati
- Cara Claim Token Di Technorati
- Menyembunyikan Titel Blog Untuk Diganti Logo Di Header
- Membuat Header dan Menu Navigasi Tidak Bergerak (Tetap Diatas)
- Membuat Ruang Posting Blog Menjadi 2 Kolom Di Homepage
- Static Pages Blogger Bermasalah? Solusinya Begini
- Memasang Widget Cek No Resi JNE, TIKI, Pos Indonesia
- Membagi Elemen Postingan Blog Menjadi Dua Kolom Tanpa Edit HTML
- Cara Mengganti Template Baru di Blogspot
- Membuat Efek Marquee di Blogspot
- Cara Membuat Tabel dan Thumbnail di Postingan Blog
- Membuat Related Posts Dengan Thumbnail di Bawah Postingan
- Cara Mengganti Warna Link di Blogspot
- Cara Memberi Tombol Scroll di Kotak Komentar Blog
- Cara Membuat Related Posts Super Cepat
- Cara Pasang Tombol Spoiler di Komentar Blogspot Versi 2
- Cara Memasang Google Translate di Blog
- Cara Membuat Blockquote di Postingan Blog
- Inilah Widget Random Post Fast Loading Plus Thumbnail
- Merubah Tampilan Blog Yang Berbeda Pada Homepage dan Halaman Posting
