Cara Membuat Artikel Terbaru atau Recent Post di Blog

Cara Membuat Recent Post di Blog. Salam ...
Sebelumnya, Widget Artikel terbaru atau sering kita sebut Recent Post, adalah sebuah widget yang sudah tidak asing di penglihatan kita, hampir semua blog maupun website yang kita kunjungi memiliki widget tersebut. Widget ini menurut saya mempunyai peranan penting dalam mempromosikan sebuah artikel baru, dan juga membuat pengunjung akan lebih betah di dalam blog/ web kita, karena melihat sesuatu yang baru, apalagi menarik untuk di baca .......!!
 
Langsung saja ya,  
Cara I 
1.  Masuk dasbor Bloger Anda.
2. Kemudian ke tata letak, piih Tambah Gadget, masuk ke Gadget lainnya, dan isikan recent post  dalam pencarian. 

3. Tamabah dan Selesai

Cara II
1. Masih masuk di dasbor blog Anda, 
2. Masuk tata letak, pilih tambah gadget, di dasar-dasar, cari HTML/JavaScript, seperti ini

3. Tambah dan isikan script diabawah ini 

<div style="overflow:auto; width:100%px; max-height:450px; padding:5px;"> <div style="overflow:auto; width:100%px; max-height:250px; padding:5px;"> <style> img.recent_thumb {padding-right:10px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 55px;margin: 0px 0px 5px 0px;padding: 0;font-size:12px;font-color:black;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:0px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs normal {font-size:13px;} </style> <script type="text/javascript" src="http://blogedek-javascript.googlecode.com/files/recentpoststhumb.js"></script> <script type="text/javascript"> var numposts = 20; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = true; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script> <script src="http://www.rifaianan.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs" type="text/javascript"></script></div>

3. Simpan, tapi ganti dulu alamat rifaianan.blogspot.com ke alamat blog Agan2 dan hasilnya akan seperti ini

Cara III
Disini kita akan membuat resent post yang bisa berjalan. caranya sama dengan  yang ke 2, hanya beda kode/scriptnya ganti ini
   

<style type="text/css"> #rp_plus_img{height:250px;} #rp_plus_img li {height:60px;padding:5px;list-style:none; background-color:#ffffff; border:solid 1px #D2D2D2;} #rp_plus_img a{color:#00000;} #rp_plus_img .news-title{display:block;font-family: Open Sans;margin-bottom:4px;font-size:12px; text-align:left; -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 = 250; var pause = 10000; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); </script> <ul id="rp_plus_img"><script> var numposts = 7; var numchars = 0; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"> </script> </ul>

dan hasilnya seperti berikut

 Mungkin itu saja, semoga ada manfaatnya, anda dapat memlilih ke tiga cara diatas, ada membuat recent post dari default widget, membuat recent post keren dan minimalis, dan membuat recent post yang dapat berjalan...
terima kasih

Tweet

Subscribe to receive free email updates: