Widget Recent Pos atau daftar postingan terkini di blog memudahkan pengunjung blog untuk melihat postingan-postingan terbaru sebuah blog. Namun widget ini tidak tersedia di gadget blogger. Bila kita ingin membuatnya harus memasukkan kode HTML/JavaScript. Namun, banyak kode HTML/JavaScrib yang tidak berfungsi saat dipasang di blog.
Beberapa waktu yang lalu saya ingin menambahkan menu Recent Post di blog ini. Setelah browsing di internet banyak blogger yang menawarkan kode-kode HTML/JavaScript, namun setelah kode-kode itu saya copy dan saya pasang di blog ini tidak ada satupun yang berhasil. Sampai pada suatu hari, ketika saya browsing di internet, tidak sengaja menemukan kode dari blog dengan alamat www.masigun.com di dalam postingan yang berjudul "Cara membuat Widget Recent Post Responsive di Blogger" yang berisi kode HTML/JavaScript untuk membuat Recent Post. Ketika kode itu saya pasang di blog, menu recent post langsung muncul di sidebar kanan blog, seperti yang bida Anda lihat.
Recent Post yang saya pasang ini cukup bagus, ada tombol navigasinya (previous, home, dan next) di bagian bawah. Misalnya recent post tersebut Anda atur untuk menampilkan 5 postingan terkini, dengan klik tombol "next" maka widget tersebut akan menampilkan 5 postingan yang lebih lama lagi.
Selain menarik, tampilan recent post dengan memakai kode HTML/JavaScript ini mudah diatur. Seperti jumlah postingan yang ditampilkan, ukuran huruf, warna huruf, dan lain-lain.
Berikut ini langkah-langkah untuk membuat recent post beserta kode HTML/JavaScript yang saya bahas tadi:
1. Masuk ke blogger kemudian klik Tata Letak
2. Klik Tambahkan Gadget
3. Klik tanda tambah (+) pada HTML/JavaScript
4. Tulis judul sesuai keinginan Anda. Contoh: Postingan Terbaru
5. Masukkan Kode HTML/JavaScrip6. Klik Simpan
Berikut ini kodenya:
<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#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{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#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/unwanted86/javascript/recentpost.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">
</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/unwanted86/javascript/recentpost.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>Kode bisa diubah sesuai keinginan Anda.
Demikian postingan cara membuat recent post di blog, semoga bermanfaat. Amiiin.