Wednesday, 17 November 2010

Tips Blogger | Memasang Widget Recent Posts Dengan Fungsi Sliding Di Blog

S

ebenarnya Blogger dalam Widget Default-nya sudah menyertakan beberapa pilihan widget Recent Post, bahkan disitu telah disediakan 3 pilihan untuk menampilkan Recent Post di Blog kita, yakni Widget Recent Posts dengan memanggil data RSS Feed, Widget Recents Post with Thumbnails buatan Bloggerplugins dan yang terakhir adalah Widget Recent Posts tanpa Thumbnails buatan Blogger Buster.



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://softwarebali.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!



Artikel Terkait:



Languages : English French German Spain Italian Dutch Russian Japanese Korean Arabic Chinese Simplified


17 komentar:

Singapore web designer said...

Really super blog to readers,everyone can motivate from this blog. Good going, give some more pictures in future.

Nama Bayi said...

salam kenal .
artikelnya baggus .
thanks .

Wayan Armana said...

@Nama Bayi

Salam kenal juga Gan!

hybrid cars said...

Weish..manteb sob share-nya. Langsung dipraktekin... :)

Singapore web designer said...

Good understanding blog to everyone. Really interesting story give more details about that. Thanks for this sporty blog articles with pictures.

Singapore web designer said...

Great thinking about globalization issue . I appreciate with your blog fully,so give inform me when you have update your blog. Thanks

Web design Singapore said...

Really super blog to readers,everyone can motivate from this blog. Good going, give some more pictures in future.

Blogku said...

fans nya udeh nyampe singapore lho..
mantap..

Blogku said...

cakep-cakep.. berhasil.. berhasil..
senengnya klo smua yg diajarkan kita bisa, mantap!! thanks, ilmunya.. luar biasa..

souvenir pernikahan murah said...

salam kenal

bloekoetoek said...

wah ini tampilannya bagus, kemaren ane bikin tampilannya kurang menarik bang...ikut belajar di sini dan mohon bimbingannya. makasih bang

Serba Ter said...

Makasih kawan.. sudah saya praktekkan dan berhasil

Nikmaya John said...

Mantapp brow,,,, thanks

RifkyMedia™ said...

keren nih gan widgetnya,ane comod ya buat blog teman ane

Burhan Martambun said...

Kalau tanpa thumbnail atau gambar... gimana caranya ??

toko bunga gombong said...

Dapat untuk memperindah blog nih

dewapoker.net said...

boleh dicoba nih widget

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment