Slide Daftar Isi plus thumbnails

CONTOH SIDEBAR KIRI ATAS 

Setelah sebelumnya saya berbagi dengan kawan Cara membuat Daftar Isi berisi thumbnails, sekarang mari kita kembangkan lagi Daftar Isi tersebut biar ada variasinya, yaitu menjadi spy / slide, apaladi thumbnails kawan bagus edit dikit ukurannya diperbesar biar lebih jelas persis seperti menonton layar tancap ah ah



Seperti Daftar isi sebelumnya agar kita tidak meng-update setiap saat makanya jumlah numpostnya dibuat lebih banyak dari jumlah judul artikel yang sudah kita posting, dan kawan jangan khawatir ini bisa edit ulang setiap saat.

Okey langsung saja kita ke TKP cara pembuatannya :

1. Masuk ke account dengan ID kawan. 



2. Pada Dasbor pilih tambah gadget / elemen


3. Copas (copy-paste) script berikut kedalamnya 

<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:220px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:208px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

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

border:1px solid #ddd;

}





#spylist li a {

text-decoration:none;

color:#4B545B;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#EFEFEF;

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://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";





showRandomImg = true;

boxwidth = 255;

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 = 10;

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

limitspy=4

intervalspy=4000

</script>

<div id="spylist">

<script src="https://sites.google.com/site/tipsblogbegoku/arsip/recentpostthumbspy-min.js" type="text/javascript"></script>

Keterangan : 

Kawan bisa mengadakan edit untuk menyesuaikan dengan keadaan Blog kawan

1. Height dan Width yang berwarna Biru adalah tinggi dan lebar, 350px  adalah ukuran untuk 4 judul slide yang akan ditampilkan (umpama kalau kawan ingin menampilkan 8 judul maka 350px diganti menjadi 700px, begitu juga sebaliknya kalau ingin menampilkan 2 judul slide maka 350px diganti dengan 175px).



2. thumbwidth = 70; dan thumbheight = 70; adalah besarnya thumbnails. 


3. numposts = 10;  artinya  jumlah yang akan ditampilkan 10 - disesuaikan


4. Beri judul : menyesuaikan, maksudnya kalau kawan akan menampilkan max 10 judul sebaiknya pakai judul Artikel Terbaru atau sejenisnya begitu sebaliknya angka 10 itu kawan ganti menjadi melebihi jumlah postingan beri judul Daftar Isi atau sejenisnya (contoh 10 kawan ganti menjadi 100 sedangkan postingan kawan baru 75  judul ) dan ini akan secara otomatis judul artikel di update.


5. NamaBlogKawan ganti dengan url Blog kawan.


6. limitspy=4 adalah jumlah yang akan tampil sebanyak 4 judul, kalau kawan mau merubah caranya seperti point 1 diatas. 


7. Simpan gadget / elemen Blog dan lihat hasilnya


8. Kalau tampilannya kurang pas adakan pengeditan ulang