Slide Daftar Isi plus thumbnails

Kastaone - Rabu, 05 Januari 2011 - 21.35.00 wita



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











Berbagi Artikel :

Slide Daftar Isi plus thumbnails
Rate this posting:
{[["☆","★"]]}

Kalau pada Artikel Slide Daftar Isi plus thumbnails
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

3 Komentar pada : “Slide Daftar Isi plus thumbnails”

  1. Tips yg bagus, kalo dipasang berarti sudah mensejajarkan dengan blog berita online. Kalo di bugis blog sementara cari lokasi gadgetnya yang bagus. Thanks

    BalasHapus
  2. Asslkum...

    Kang...
    Ada Tips Cara Membuat Slide Ga..??
    Semisal di website okezone gitu, lw ada, kasih tau saya ya..

    Salam kenal..

    BalasHapus
  3. trims kawan, kalau mau buat slide secara umum misalnya foto, panorama dll banyak tempatnya, tapi bagi saya yg banyak gaya di http://www.picturetrail.com/sfx/flicks/sample :05 :11

    BalasHapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation di Email Kawan




BANNER [300x250]
© 2013 - BC INFO | Powered by Blogger
Design Template by : Blogger Edan