Cara Membuat Slider Artikel Terbaru




Cara Membuat Slider Artikel Terbaru


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.wahyu-winoto.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://skripnyawbw.googlecode.com/files/newestarticle.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/newestarticle.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 ".



*****






Ada 3 komentar untuk artikel Cara Membuat Slider Artikel Terbaru

Junianto Bara on Rabu, 09 November 2011 13.20.00 WIB mengatakan...

wah keren tuh.. untuk scrip google kode naruhnya dimana .. ada petunjuk rinci,, thanks. ya saya tunggu responnya. kalo sudah, nanti kasih tau saya ya dengan komentar di slah satu artikel sya .. thansk.

Raihan Marie Ramadhan on Kamis, 23 Februari 2012 07.50.00 WIB mengatakan...

Maksih infonya kawan,salam sukses,ijin diterapkan di blogku,happy blogging.

ONLYX-45 on Rabu, 13 Juni 2012 15.50.00 WIB mengatakan...

thx infonya


Posting Komentar

 


garis hitam panjang
garis hitam panjang