Cara Membuat Widget Artikel Terbaru dengan Gambar

Selamat pagi sahabat KC, kali ini saya akan berbagi tips blog. yaitu Cara Membuat Widget Artikel Terbaru dengan Gambar. Fungsinya adalah untuk memberikan informasi ke pengunjung blog tentang apa saja artikel yang baru di posting.

Bagi sahabat KC yang suka ngeblog pasti suka otak atik tampilan blognya, sahabat KC harus mencoba tutorial blogger satu ini. Yaitu Cara Membuat Widget Artikel Terbaru dengan Gambar. Tutoral ini akan mengejarkan kepada anda cara membuat daftar artikel terbaru dengan gambar dan bergerak. 

Berikut tampilannya:

Bagaimana sahabat KC? keren kan ? silahkan ikuti cara pemasangannya :)

1). Login ke blog lalu klik Tata Letak > Tambah Widget > pilih HTML/Java Script.

2). Lalu Masukan kode berikut ini : 

 <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 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&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>
<small></small>
<small><a href=" http://mas-andes.blogspot.com" target="_blank">News Article</a></small>

3). Save dan selesai.

Tweet