Dengan adanya Recent Post membuat tampilan blog kita menjadi menarik dan membuat pengunjung ingin melihat artikel postingan kita yang lainnya.Selain itu fungsinya bisa juga sebagai pemberitahu apa yang ada dipostingan terakhir sobat selain itu juga sebagai referensi agan bisa lihat di sidebar blog milik saya. Karna saya juga memasangnya hehee.Kelebihan dari recent post ini selain dapat bergerak atau animasi yaitu, dilengkapi dengan gambar, judul post dan cuplikan isi post.
Nah bagaimana tertarikah sobat untuk membuatnya langsung saja ikuti langkah langkah berikut ini :
Silahkan Ikuti Langkah-langkah berikut :
1. Silahkan login akun Blog Anda https://draft.blogger.com/
2. Jika sudah Pilih menu Rancangan dan Pilih Elemen Laman atau Tata Letak
3. Setelah itu pilih Tambah Gadget (diposisi yang sobat inginkan)
4. Kemudian Tambahkan HTML/JavaScript
5. Dan Copy dan kode di bawah ini:
<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>
Keterangan :
width:60px;height:65px diatas adalah ukuran untuk gambar di Recent Post.var speed = 400; var pause = 3500; diatas adalah kecepatan Slide gambar Recent Postvar numposts = 10; var numchars = 60; diatas adalah 10 Jumlah posting yang akan di tampilkan di Recent Post dan 60 adalah Huruf atau deskripsi postingan yang ditampilkan di Recent Post.
6. Pastekan scriptnya
7. Dan Lihat hasilnya !! bisa kan ?? itu bagi agan yang ingin edit di rancangan tata letak, kalau agan ingin edit di html ini kodenya :
<div style="BORDER: #cccccc 1px dashed; PADDING: 5px; WIDTH: 95%; BACKGROUND: #f0f0f0; COLOR: #000000; FONT-SIZE: 12px; OVERFLOW: auto; height:auto"><pre><div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div></pre></div>
8. oke sekian tutorial dari saya semoga bermanfaat yah hehee..