Cara Membuat Recent Post Unique di Blogspot

Recent post Unique yang dibahas di tutorial blog kali ini bukan recent post seperti biasanya namun recent post yang memiliki tampilan beserta gambar thumbnail yang bergerak-gerak. fungsinya dapat mempermudah pengunjung Blog untuk dapat melihat Tampilan  artikel terbaru. lalu Bagaimana cara membuat recent post gambar thumbnail bergerak di blog. Silahkan mengikuti cara membuatnya.

1. Login ke akun blogger.com Anda

2. Pilih rancangan atau design.

3. Pilih add gadget pada bagian page elements dan lalu pilih html /javascript.

4. lalu silahkan isi judul menurut keinginan Anda dan copy paste kode recent post di bawah ini ke kotak tersebut dan ganti tulisan berwarna BIRU dengan alamat blog anda.

<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://tutorialplan.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script> </ul>
</center>

Kemudian jangan lupa untuk di Save/Simpan selesai......

Share this post