Cara membuat slider Artikel versi 2.

Farhan Share - Cara membuat silder Artikel terbaru. apa sih slider artikel terbaru sobat farhan? yap pastinya sobat farhan sudah tahu semua kan, oke deh farhan jelasin lagi slider artikel terbaru adalah widget yang menampilkan Artikel terbaru secara slider atau berjalan ke bawah secara bergantian. pastinya menarik bukan? pastinya, karena slider artikel ini menurut saya membuat hemat tempat di blog kita, misalnya artikel terbaru yang akan tampil 10 tapi bisa hanya tampil dalam 4 baris, dan slide 1 per 1 kebawah, oh ya desain widget ini juga cukup dinamis dan SEO Friendly. langsung aja deh farhan, ini dia langkah-langkahnya :

1. Login Ke Blogger.

2. Masuk DashBoard

3. Pilih Template.

4. Lalu sobat "download full template terlebih dahulu" (mencegah saat ada kesalahan dalam meng-edit html).

5. Pilih Edit HTML.

6. Centang Expand Template Widget.

7. Lalu selanjutanya soba cari kode </head>, lalu sobat paste-kan kode di bawah ini ke baris sebelum </head>, lebih tepatnya lagi diatas </head>.

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

8. setelah itu "Save Template".

9. selanjunya kita berlaih ke Tata Letak.

10. Pilih "Add Widget".

11. Pilih "HTML/JavaScript".

12. lalu sobat masukan kode di bawah ini ke dalam box "konten".

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

<style type="text/css" media="screen">

<!--

#spylist {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:350px;

}

#spylist ul{

width:285px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:273px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

background:#6d6666 url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;

border:1px solid #ddd;

}

#spylist li a {

text-decoration:none;

color:#4c4848;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#6d6666;

border:0;

}

.spydate{

overflow:hidden;

font-size:10px;

color:#0284C2;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:15px;

font-family:Tahoma,Arial,verdana, sans-serif;

}

.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}

-->

</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://img339.imageshack.us/img339/8822/71411271.jpg";

imgr[1] = "http://img339.imageshack.us/img339/8822/71411271.jpg";

imgr[2] = "http://img339.imageshack.us/img339/8822/71411271.jpg";

imgr[3] = "http://img339.imageshack.us/img339/8822/71411271.jpg";

imgr[4] = "http://img339.imageshack.us/img339/8822/71411271.jpg";

showRandomImg = true;

boxwidth = 290;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 15;

home_page = "http://farhanshare.blogspot.com/";

limitspy=4

intervalspy=4000

</script>

<div id="spylist">

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>

</div>

Catatan : ganti kode yang berwarna hijau dengan URL Blog anda.

Catatan : kode yang berwarna ungu adalah perintah untuk menjalankan widget ini.

13. Beri judul "Artikel Terbaru" atau "New Entry".

14. Terakhir Klik "save" dan selesai.

Selamat Mencoba, bila ada pertanyaan comment di bawah.