Cara Membuat Widget Artikel Terbaru Model Slider

Bagi yang belum paham dengan judul postingan saya kali ini, silahkan lihat gambar atau lihat bagian bawah halaman blog ini. Widget Artikel Terbaru Model Slider adalah widget yang menampilkan tulisan terbaru blog kita, dan sengaja tampilannya dibuat model slider (bergerak dari atas kebawah) tujuannya agar makin banyak artikel yang bisa ditampilkan secara bergantian.

 

Slider Recent Post

Widget artikel terbaru bermanfaat untuk memberitahu pengunjung bahwa blog kita di update dengan artikel-artikel yang lebih baru, sehingga mereka dapat menyimak isinya.

Untuk memasang widget artikel terbaru, kalian tinggal ikuti step-step berikut ini.

1. Login ke Account Blog/Dashboard kalian ,kemudian pilih Rancangan/Design.

2. Pilih Add a Widget - HTML Lalu masukkan kode dibawah ini:

<style type="text/css">
#spylist {overflow:auto;height:220px;margin-top:5px;padding:0px 0px;}
#spylist ul{list-style-type: none;padding:0px;margin:0px;}
#spylist li {padding: 5px 0px 5px 5px;margin:0px;float:none;height:44px;}
#spylist li a {text-decoration:none;color:#4B545B;font:12px calibri;margin:0px;padding:0px;}
#spylist li img {float:left;margin-right:5px;margin-top:7px;background:#EFEFEF;border:0;}
.spydate{font-size:10px;color:#0284C2;padding:2px 0px;margin:0px0px;height:15px;font-family:Tahoma,Arial,verdana, sans-serif;}
.spycomment{font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;padding:0px;margin:-2px 0px;}
</style>
<script language='javascript'>
imgr = new Array();

showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 20;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.namablogsobat.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://skripnyawbw.googlecode.com/files/artikelterbaru.js' type='text/javascript'></script></div>

3. Ganti text berwarna merah dengan alamat blog kalian.

4. Save widget.

5. Beralih ke menu Edit HTML, cari kode </head> 

6. Tambahkan kode berikut ini tepat diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

6. Save template dan lihat hasilnya.

*****

Oya, tambahan dikit, pada script diatas terdapat tulisan:

<script src="http://skripnyawbw.googlecode.com/files/artikelterbaru.js"> itu merupakan script untuk menjalankan aplikasi ini.

Script itu tersimpan di halaman Google Code punya saya, kamu bisa langsung menggunakannya. Namun jika penggunanya sudah terlalu banyak dapat menyebabkan loading menjadi lambat, solusinya silahkan kamu Copy saja script-nya lalu simpan di Halaman Google Code kamu sendiri.

Untuk cara menyimpan/menghostingkan script silahkan baca tutorial saya yang lain dengan judul " Cara Menghostingkan File Java Script atau CSS di Google Code ".

 

 

 

sumber : http://alam-hadi.blogspot.com/2011/10/cara-membuat-widget-artikel-terbaru.html