Cara Membuat Widget Random Post Bergerak di Blogger dengan Tampilan Menarik

Sesuai namanya, widget Blogger ini berfungsi untuk menampilkan daftar artikel blog secara random tapi dihiasi dengan efek bergerak yang unik. Dengan adanya widget ini, tampilan blog kamu bisa menjadi lebih menarik, juga membuat pengunjung bisa menemukan artikel lain yang mungkin belum pernah mereka baca sebelumnya.

Widget Random Post ini merupakan widget yang menampilkan postingan secara acak, artikel yang muncul tidak harus selalu sama seperti widget postingan terbaru yang sudah admin bagikan sebelumnya. Widget ini bisa membantu memperkenalkan kembali artikel lama yang sudah jarang dikunjungi, tetapi masih memiliki informasi yang bermanfaat.

Widget Random Post Bergerak

Hal menarik lainnya dari widget ini adalah adanya efek gerakan pada daftar postingan saat pengunjung mengarahkan kursor ke widget, tampilannya akan berubah dan menampilkan area yang lebih luas. Setiap artikel juga dapat dilengkapi dengan gambar kecil berbentuk bulat, judul postingan, serta informasi pendukung sesuai dengan pengaturan kode yang digunakan. Desainnya cukup sederhana sehingga bisa kamu sesuaikan dengan tampilan template Blogger milikmu.

Cara Memasangnya di Blogger

1. Di Blog Blogger
2. Pilih Tata Letak ➔ Tambah Gadget ➔ HTML / Javascript

Tata Letak >> Tambah Gadget >> HTML / Javascript

3. Masukan kode di bawah ini:

<style>
#BDRSimage-slide { height:112px; overflow:hidden; padding:0; background-color:#fff; width:auto; border:solid #ddd 1px; box-shadow:0 0 5px #eee; }
#BDRSimage-slide:hover { height:325px; overflow:hidden; padding:0;width:auto; border:solid #ccc 1px; box-shadow:none; }
#BDRSimage-slide ul { list-style-type:none; margin:0; padding:0; }
#BDRSimage-slide li { list-style:none; height:80px; padding:10px; border:dashed #ddd 1px; margin:5px; background-color:#FFFFFF; }
#BDRSimage-slide li:hover { border:solid #ddd 1px; }
#BDRSimage-slide a { color:#222; font-family:Verdana; font-size:12px; font-weight:bold; text-decoration:none; }
#BDRSimage-slide .news-title { margin-bottom:5px; font-size:12px; color:#990000; }
#BDRSimage-slide .news-text { font-size:10px; color:#333; text-align:left; font-family:Verdana; font-style:italic; font-weight:normal; padding-bottom:10px; }
#BDRSimage-slide img { float:left; margin-right:10px; margin-top:10px; width:60px; height:60px; border-radius:50%; border:1px solid #e06666; box-shadow:0 0 2px #e06666; }
</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="https://cdn.rawgit.com/Brando07/share/master/rp2-seocips.js"></script>
<!-- script start -->
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rivaiscript();
interval = setInterval(rivaiscript, pause);
});
</script>
<div >
<ul id="BDRSimage-slide">
<script style="text/javascript">
var numposts = 50;
var numchars = 0;
</script>
<script
src="http://www.blogkamu.com/feeds/posts/default/?orderby=published&alt=json-in-script&callback=randompost"></script>
</ul>
</div> <!-- script end -->

4. Ganti link berwarna biru diatas dengan link blog kamu
5. Save widget.

LIVE DEMO

Catatan: Kode ini menggunakan jQuery dan dua skrip eksternal untuk menampilkan serta menggerakkan postingan. Jika widget tidak muncul, periksa apakah kedua skrip tersebut masih bisa diakses dan kompatibel dengan template Blogger yang kamu gunakan. Jika template sudah memuat jQuery, hindari memuatnya kembali apabila menimbulkan konflik.

Caranya cukup mudah karena kamu hanya perlu menambahkan kode yang sudah disediakan, kemudian mengganti alamat blog pada bagian yang sesuai. Pastikan kamu membaca petunjuk pemasangannya agar widget dapat bekerja dengan baik di blog kamu.