Cara Membuat Recent Post Terbaru di Blog





Cara-Membuat-Recent-Post-Keren-di-blogTutorial kali ini saya blog akan membahas bagaimana cara membuat artikel terbaru atau recent post pada blog. Artikel terbaru atau recent post adalah kumpulan link yang berisikan artikel-artikel terbaru atau bisa juga didefinisikan sebagai sebuah widget yang menampilkan posting/artikel terbaru. Banyak tutorial yang membahas bagaimana cara membuat recent post / widget artikel terbaru, salah satu nya adalah artikel terbaru lbs blog yang berjudul  Cara Membuat Widget Artikel Terbaru atau Recent Post Terbaru di Blogspot. Tutorial recent post yang sedang anda baca ini adalah Recent post yang bergerak/slide yang berisikan thumbnail/gambar dan cuplikan-cuplikan artikel sobat blogger.



Cara Membuat Recent Post / Artikel Terbaru Bergerak Pada Blog:

1.   Login ke Dasbor blogspot.

2.  Pilih Rancangan

3.  Klik Tambah Gadget pada bagian blog yang ingin di tambah Recent Post.

4.  Kemudian Pilih HTML/JavaScript

5  Isi Judul Sesuka anda, Copy dan letakkan kode dibawah ini kedalamnya


<center><style type="text/css">
#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 20;
var numchars = 0;
</script> <script src="http://sagisus.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script> </ul>
</center>
6.  Ganti tulisan yang berwarna merah dengan nama blog yang sobat gunakan.

7. Simpan dan Lihat hasilnya.

0 comments:

Post a Comment