Membuat Widget Artikel Terbaru Bergerak


Recent Post atau dalam bahasa Indonesianya bisa disebut "Artikel Terbaru" adalah salah satu widget yang bisa anda pasang pada Blog anda. Widget ini berfungsi untuk memberikan informasi tentang daftar artikel berdasarkan urutan terbarunya, semakin baru sebuah artikel diposting maka letaknya semakin diatas daftar widget ini. Pada kesempatan sebelumnya saya pernah membahas bagaimana cara menambahkan widget artikel terbaru, cara ini hanya sekedar menambahkan widget yang telah disediakan oleh Blogspot. Namun pada postingan kali ini saya akan membuat tampilan dari widget artikel terbaru menjadi lebih keren, yaitu dengan memberikan animasi bergerak pada widget ini. Penasaran bagaimana cara membuatnya? Kita langsung saja ke tahap pembahasannya.

artikel terbaru bergerak dengan gambar

Langkah-langkah membuat Artikel Terbaru bergerak,
  • Login ke Blog anda.
  • Pilih menu "Tata letak".
  • Pilih "Tambahkan Gadget", sesuai dengan letak yang ada inginkan.
  • Pilih widget "HTML/Javascript".
  • Isikan konten dengan kode dibawah 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://pesan-bocah-alus.googlecode.com/files/artikelterbaru.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>
Keterangan:
Hapus kode berwarna biru, jika sebelumnya anda telah menambahkan Jquery pada blog anda (untuk mengeceknya Template >> Edit HTML >> Centang Expand Template Widget >> CTRL+F untuk menemukan kode Jquery) letaknya diantara <head>....</head>

  • Jika sudah klik "Simpan".
  • Sekarang lihat perubahan yang terjadi pada Blog anda.

Semoga bermanfaat.

No comments:

Post a Comment