1 Tutorial Blogger | Memasang Widget Recent Posts Dengan Fungsi Sliding Di Blog

 

Nah, apabila ada dari sobat Blogger yang belum puas dengan tampilan ketiga Widget di atas, sobat dapat menggunakan Widget Recent Post third party seberti yang sobat lihat di sidebar Blog saya ini. Widget ini selain mampu menampilkan Judul dan summary artikel, juga mempunyai fitur slider yang sangat cantik. Juga user dimungkinkan untuk memodifikasi tampilannya sesuai dengan selera sobat. Widget ini saya temukan dari beberapa sumber di internet dan saya share kembali buat sobat yang membutuhkannya!

Begini cara memasangnya :
1). Login ke akun Blogger sobat

2. Klik Rancangan >> Elemen Laman

2. Klik Tambah Gadget

3. Pilih HTML/Javascript

4. Masukan kode di bawah ini :

<style type="text/css">
#rp_plus_img{height:350px;overflow:hidden;border:solid 1px #585858;padding:6px 10px 14px 5px;background-color:#2f2f2f;}
#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:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#FFF;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#DEDEDE;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #585858;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://softwarebali.googlecode.com/files/RECENTPOSTJQUERI.JS"></script>
<script type="text/javascript" src="http://softwarebali.googlecode.com/files/slidepost.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 15;
var numchars = 70;
</script>
<script src="http://kumpulan-tutorial86.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

5). Keterangan Instalasi Widget

>> Untuk merubah warna font judul artikel ubah nilai #FFF pada kode color : #FFF

>> Untuk merubah warna font artikel ubah nilai #DEDEDE pada kode color : #DEDEDE
>> Untuk merubah ukuran gambar mini ubah nilai 55px pada kode width:55px; dan kodeheight : 55px;
>> Ganti nilai 400 pada kode var speed = 400; untuk mengatur kecepatan
>> Ganti nilai 2500 pada kode var pause = 2500; untuk mengatur lamanya artikel tersebut tertahan (pause) sebelum diganti artikel berikutnya
>> Untuk menghilangkan garis tepi ubah nilai 1px menjadi 0 pada kode border:solid 1px #585858;
>> Untuk merubah background ubah nilai #2f2f2f pada kode background-color:#2f2f2f;atau jika tidak ingin menggunakan background hapus kode tersebut
>> Ganti nilai 10 pada kode var numposts = 10; untuk menentukan jumlah artikel yang akan ditampilkan
>> Ganti nilai 125 pada kode var numchars = 125; untuk menentukan jumlah karakter artikel yang akan ditampilkan
>> Feed harus diset "Penuh" melalui "Pengaturan - Feed Situs - Izinkan Feed Blog : Penuh"
>> Ganti alamat Feed yang berwarna merah dengan alamat Blog sobat
>> Agar Widget dapat berjalan sempurna alangkah baiknya jika sobat menghosting sendiri 2 (dua) file java script (js) yang terdapat pada kode ini :

http://softwarebali.googlecode.com/files/slidepost.js
http://softwarebali.googlecode.com/files/RECENTPOSTJQUERI.JS

Selamat mencoba dan semoga berguna!