Thursday, August 10, 2017

Cara Membuat Widget Recent Post yang Auto Scroll di Blogspot


Recent post adalah widget yang berfungsi untuk menampilkan artikel terbaru yang ada di sebuah blog. Dengan adanya Widget recent post ini, para pengunjung dapat mengetahui apa saja artikel terbaru yang ada pada blog tersebut.

Ada banyak sekali cara membuat widget recent post di blogspot, dan sebenarnya fiture membuat widget recent post di blogspot pun sudah tersedia, tapi kekurangannya artikel yang ditampilkan hanya satu artikel yaitu artikel yang paling baru.

Widget recent post yang akan saya share kali ini adalah widget recent post yang jumlah artikel terbarunya bisa di atur sesuai keinginan pemilik blog, dan bisa di buat Auto Scroll. Kelebihan Widget Recent Post Auto scroll ini adalah kita dapat menampilkan banyak artikel terbaru namun tetap menghemat ruang atau bagian pada sidebar dimana widget recent post ditempatkan, sehingga tidak memakan banyak tempat.

Tanpa berlama-lama lagi, silahkan simak tutorial Cara Membuat Widget Recent Post yang Auto Scroll di Blogspot :
  1. Kunjungi Dashboard Blogspot Anda.
  2. Masuk ke Tata Letak dan klik Tambahkan Gadget lalu pilih HTML/Java Script
  3. Selanjutnya isi judul sesuai keinginan Anda, dan tempel kode di bawah ini pada bagian HTML / Java script.
    <style type="text/css">
    #rp_bsu_img{height:290px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
    #rp_bsu_img ul{list-style-type:none;margin:0;padding:0}
    #rp_bsu_img li{border:0; margin:0; padding:0; list-style:none;}
    #rp_bsu_img li{height:70px;padding:1px;list-style:none;}
    #rp_bsu_img a{color:#55acee;}
    #rp_bsu_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:13px;}
    #rp_bsu_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#282828;text-align:justify;}
    #rp_bsu_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #f5f5f5;width:75px;height:65px;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://yourjavascript.com/77161122610/bsurecentpost.js"></script>
    <script type="text/javascript">
    var speed = 1000;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
    </script>
    <ul id="rp_bsu_img">
    <script style="text/javascript">
    var numposts = 10;
    var numchars = 60;
    </script>
    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
    </ul>
  4. Sehingga tampilannya akan seperti di bawah ini.
    Jika sudah, klik Simpan.
  5. Selesai dan tampilannya akan menjadi seperti ini.
Keterangan:
  • Ganti nilai var numposts = 10; dengan jumlah artikel yang Anda inginkan.
  • Ganti nilai var numchars = 60; untuk mengatur jumlah karakter yang muncul di deskripsi
  • Ganti nilai var speed = 1000; dengan 0 untuk menonaktifkan Auto Scroll.
  • Ganti nilai var pause = 3500; untuk mengganti lamanya jeda Scroll yang Anda inginkan.
Menarik bukan? Sekarang Anda dapat menerapkan widget Recent Post di blog Anda dengan beberapa artikel terbaru, tidak hanya 1. Sehingga para pengunjung blog Anda tau mana saja artikel terbaru yang ada pada Blog Anda. Cukup sampai disini artikel tentang Cara Membuat Widget Recent Post yang Auto Scroll di Blogspot kali ini, semoga bermanfaat!


Bagikan Artikel Ini :

Dapatkan Artikel Terbaru dari Seciko ID

Gratis setiap harinya dengan cara tekan CTRL+D atau Masukan email Kamu di sini:

Cari Artikel Menarik Lainnya di Seciko ID

Artikel Sebelumnya
Artikel Selanjutnya

0 komentar: