Cara Membuat Recent Post Bergambar Bergerak

Pada kesempatan ini Emu-Id akan share kepada sobat mengenai cara membuat artikel post terbaru atau lebih dikenal dengan widget recent post. Tutorial kali ini tentang cara membuat widget recent post yang biasanya tampil di sidebar blog atau web sobat memiliki gambar dan bisa bergerak. Untuk caranya sangat mudah seperti tutorial cara membuat recent post sebelumnya. Sobat tidak perlu masuk ke bagian template.

Widget ini menggunakan script yang sudah emu-id siapkan dibawah. Sobat cukup edit sedit dan taruh pada tempat yang sobat inginkan tentunya sesuai dengan teturial yang saya berikan. Langsung saja silakan simak tutorial cara membuat recent post di blog bergambar dan bisa bergerak berikut ini :

Tutorial Cara Membuat Recent Post Bergambar Bergerak di Blog

1. Untuk pertama silakan masuk ke akun blogger sobat.

2. Pilih blog yang ingin dipasang recent post.

3. Masuk ke bagian Tata Letak pada blogger.

4. Kemudian pilih tempat yang akan dipasang widget recent post dan pilih tambah gadget.

5. Pada menu gadget pilih HTML/JavaScript

6. Beri judul sesuai yang sobat inginkan dan masukkan script dibawah ini :

<style type="text/css">
/*widget*/
#rp_plus_img{overflow:hidden;border:solid 1px #ddd;padding:10px; background-color:none;line-height:1.7em;}
#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:normal !important;margin-bottom:5px;font-size:14px;}
#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:60px;border-radius:4px;}
</style>
<!-- start -->
<script type="text/javascript" src="https://googledrive.com/host/0B8tm1_SeHWhdZTN0Q3ZOWXNEVFE/Recent_Post_Bergerak_Emuid.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 = 5;
var numchars = 0;
</script>
<script src="http://emu-id.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
<!-- /end -->

7. Jika sudah tinggal simpan dan lihat hasilnya. Hasilnya akan tampak seperti gambar diatas.

Keterangan :

Tulisan warna merah adalah jumlah pos yang akan tampil. 

Tulisan warna biru silakan sobat ganti dengan alamat url blog sobat.

Sekian postingan emu-id kali ini. Semoga postingan ini berguna bagi anda dan nantikan tutorial-tutorial blog lainnya hanya di emu-id.blogspot.com.