Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

Post ini diterbitkan pada : Friday, September 17, 2010

Cara Membuat Slideshow Jquery / Javascript Versi Ringan.

Satu hal yang selalu gw usahakan dalam membuat template ataupun widget adalah kecepatan loading halamannya.Karena itu,gw selalu mencari akal agar sebuah template dan widget bisa terlihat bagus,namun tidak berat. Dan sesuai dengan hal tersebut,kali ini kita akan belajar bagaimana caranya membuat Slideshow dalam versi yang lebih ringan.Jadi kita bisa mempercantik tampilan blog kita, tanpa banyak menambah berat loading page.

Slideshow yang akan kita buat kali ini,ditambahkan efek yang gx kalah sama Slideshow lainnya di luar sana. Namun,bedanya adalah pengunaan kode yang lebih di fokuskan ke teknik pewarnaan dan efek mengunakan CSS3. Oleh karena itu, Slideshow ini mampu 50% lebih cepat dari Slideshow lain yang se-tipe.

Klik pada gambar di bawah ini untuk melihat preview tampilan Slideshownya.

Slideshow Jquery 

Udah liat..? Kalo pengen buat slideshow seperti itu juga di template sobat,ikutin aja tutorialnya berikut ini.. Cekidot..!

* Seperti biasa, masuk dulu ke account blogger sobat. Kemudian pilih Design/Rancangan terus masuk ke TAB Edit HTML.

* Cari kode ]]></b:skin> , kemudian ganti kode tersebut dengan kode di bawah ini.

/* Slider content------- */ 
#slider{width:500px;height:280px;background:-moz-linear-gradient(top, #000, #999, #000);position:relative;overflow:hidden;}
#slider #sizzles{float:left;width: 500px;position:absolute}
#slider #sizzles img{width:490px;height:250px;position:absolute;margin:5px;}
#slider .sizzle_caption{position:absolute;margin-top:15px;margin-left:5px;font-weight:bold;color:white;font-size:15px;}
#slider .sizzle_title{ background:url('http://lh4.ggpht.com/_f7ChQS4URE4/TJIhQ5YacCI/AAAAAAAABEA/DVbK4tBj5Uo/bgslider.png') repeat transparent;position:absolute;margin:0px;left:5;top:55px;height:100px;font-size:17px;color:white;line-height:12px;padding:0px 10px;}
#slider .sizzle_title a{color:#54a9fe;font:20px calibri;font-weight:bold;text-shadow:0px 1px 0px #00a;}
#slider .sizzle_title a:hover{color:#8ec6fe;}
#slider #sizzle_items{background:-moz-linear-gradient(top, #000, #999, #000);position:absolute;bottom:0;left:0;line-height:10px;width:100%;padding:10px;}
#slider #sizzle_items,#subHeader #sizzle_items a{color:#fff;font-size:14px;font-family:Calibri, Helvetica Neue, Liberation Sans, sans-serif;font-weight:700;cursor:pointer;}
#slider #sizzle_items a:hover{color:#000 !important;}
#slider .title a{font-size: 18px;color:#888;line-height:25px;}
#slider .title h1{font-size:37px;margin:0px;padding:0px;color:#333;}
.pagehal{padding: 2px 8px;margin-right:5px;border:1px solid #444;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;background:-moz-linear-gradient(top, #eee, #666);}
.pageaktif {color:#fff;text-shadow:0 1px 2px #333;padding: 2px 8px;margin-right: 5px;-webkit-border-radius:12px;-moz-border-radius:12px;border-radius:12px;border:1px solid #444;background:-moz-linear-gradient(top, #8bc3fb, #0080ff);}

]]></b:skin>

* Save template.

* Sekarang masuklah ke TAB Page Elements. Klik Add a Gadgets lalu pilihlah HTML/Javascript.

* Masukkan kode dibawah ini.

<script type="text/javascript" src="http://h1.ripway.com/keichiro/JavaScript/jquery.js"></script>
<script type="text/javascript" src="http://h1.ripway.com/keichiro/JavaScript/slideshowleo.js"></script>

<div id="slider">
<div id="sizzles">

<a href="URL Tujuan Gambar0"><img id="sizzleImg0" src="Lokasi URL Gambar0" style="display: none;"/></a>
<div id="sizzle_title0" class="sizzle_title">
<a href="URL Tujuan Gambar0">Judul Gambar0</a>
</div>

<a href="URL Tujuan Gambar1"><img id="sizzleImg1" src="Lokasi URL Gambar1" style="display: none;"/></a>
<div id="sizzle_title1" class="sizzle_title">
<a href="URL Tujuan Gambar1">Judul Gambar1</a>
</div>

<a href="URL Tujuan Gambar2"><img id="sizzleImg2" src="Lokasi URL Gambar2" style="display: none;"/></a>
<div id="sizzle_title2" class="sizzle_title">
<a href="URL Tujuan Gambar2">Judul Gambar2</a>
</div>

<a href="URL Tujuan Gambar3"><img id="sizzleImg3" src="Lokasi URL Gambar3" style="display: none;"/></a>
<div id="sizzle_title3" class="sizzle_title">
<a href="URL Tujuan Gambar3">Judul Gambar3</a>
</div>

<a href="URL Tujuan Gambar4"><img id="sizzleImg4" src="Lokasi URL Gambar4" style="display: none;"/></a>
<div id="sizzle_title4" class="sizzle_title">
<a href="URL Tujuan Gambar4">Judul Gambar4</a>
</div>

<div class="clear"></div>
</div>
<div id="sizzle_items">
<a id="sizzle_item_0" class="pagehal" onclick="slider.home.header.expand(0);">1</a>
<a id="sizzle_item_1" class="pageaktif" onclick="slider.home.header.expand(1);">2</a>
<a id="sizzle_item_2" class="pagehal" onclick="slider.home.header.expand(2);">3</a>
<a id="sizzle_item_3" class="pagehal" onclick="slider.home.header.expand(3);">4</a>
<a id="sizzle_item_4" class="pagehal" onclick="slider.home.header.expand(4);">5</a>
</div>
<script type="text/javascript">
slider.home.header.items[0] = [0];
slider.home.header.items[1] = [1];
slider.home.header.items[2] = [2];
slider.home.header.items[3] = [3];
slider.home.header.items[4] = [4];   
slider.home.header.set_timer();
</script>

* Ganti kode berwarna merah dengan URL tujuan gambar, alias Link yang terbuka saat gambar/judul di klik.
* Ganti kode berwarna biru dengan URL Gambar, alias Alamat URL tempat gambar sobat di simpan.
* Ganti kode berwarna hijau dengan Judul Gambar, alias judul dari link gambar yang tampil.

* Jika sudah selesai, tinggal di save aja deh.

* Liat hasilnya.

( Note: Lebar dan tinggi Gambar pada Slideshow di atas defaultnya berukuran 500x250. Sobat bisa mengubahnya sesuai dengan kriteria template sobat masing-masing. )

Do you like this post? You can share it with your community..
Dapatkan update artikel lewat email

Artikel Terkait

31 comments:

salam sahabat
ehm bagus simple juga caranya thanxs ya

Sama-sama.. ngomong", blog nya keren tuh! rame banget .. nice ^^

Sudah pake tutorialnya, tp maw lewat aja rasanya kayak maling..
Trmksh byk sob. n gw dah pasang di blog, jd makin mantap, tp dikit gw gnt2 warna biar sesuai dgn blog yg ada, maaf yah.

LAIN WAKTU GW PASTI MAMPIR LAGI

Keren bro... Ijin untuk mencoba ya.

mantap gan.... ane coba gan...

Thank's sob atas info menariknya......mantab ane coba dulu

gw coba dlu yah,.. thx 4 share,..

Sob, slide nya keren .
Thanks ya ...
sukses buat blognya .
vsit blog ane ya . www.blaxzone.co.tv

beeeeeeeeeehhhhhhhhhhhhhhhhhhhhh...
bagus juga ini gan..
like it lah pokok.e..

Informasi Terhangat tentang 7 kejadian langka dan spektakuler di seluruh dunia, ikuti update-an nya setiap hari.. Keep stay tune!!

Mas file hosting r1.ripway.com sering ngadat tuh...jadi tampilan slide saya ga berfungsi, saya dah nyoba belajar nyimpen di google code gagal terus ( hhhh ...) maklum masih belajar mas. bisa ditolong ga mas, gimana cara nyimpen kode yang kayak di ripway milik mas ini, di google code. makasih sebelumnya

gan kenapa saya coba tdk pernah berhasil malah mengarah pada website yang kayak adsense gitu??? mohon infonya

itu belum otomatis slidernya gan..

Masih bingung gan, terima kasih aja deh!

Cari kemana-mana ketemunya disini, terima kasih banyak atas informasinya

Rumit juga ya gan, perlu pusing-pusingan agar bisa selesai

nyari-nyari tutorialnya,..ternyata ada disini..thanks ya gan

wah sangat bermanfaat sekali gan infonya.
saya yakin bermanfaat juga buat orang-orang atau pengunjung yang sudah membacanya.
thanks ya gan.
update selalu dan semoga tambah sukses.
mantap..!

Akhirnya nemu yang keren kaya gini, thanks gan!

itu slideshow ada pengaruh nya buat seo gak gan ?

slindeshow bagus nya untuk tampilan blog gan ?

thx ya gan buat infonya langsung ane pasang

ini yg saya cari,.ternya susah juga ya masangnya

sudah aku coba dan berhasil gan thaks ya

terimakasih atas informasi dan tutorialnya gan sangat berguna dan sangat bermanfaat

terima kasih atas penduannya,

kunjungi juga blog kami
satu gol pusatnya berita bola terlengkap dan terupdate,anda akan mendapatkan prediksi bola terakurat disini

Hi, gan blognya bagus!! alexanya woooow!!! Visit pnyaku ya!

Saya jadi tertarik untuk mencobanya, makasih ya infonya.

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra