Scriptaculous Image Slider / Carousel Untuk Blogger

Ini adalah carousel slideshow yang sangat bagus yang dibuat oleh Brian R. Miedlar yang menunjukkan galeri gambar memiliki efek geser yang kembali ke awal setelah sampai ke gambar terakhir. 

Jika Anda perlu untuk melihat korsel ini dalam tindakan, silakan kunjungi demo blog ini . 


Untuk menambahkan foto korsel ini di blog Blogger Anda, ikuti langkah-langkah di bawah ini: 

Langkah 1. Login ke Blogger Dashboard , pergi ke Template dan klik pada tombol Edit HTML: 

Langkah 2. Cari menggunakan CTRL + F untuk </ head> tag. 

Langkah 3. Tepat di atas </ head> tag, tambahkan kode ini: 

 <script src='http://www.google.com/jsapi'> </ script> 
<script> 
google.load ("prototipe", "1.7.0.0"); 
google.load ("scriptaculous", "1.9.0"); 
</ Script>

<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/os.js' type='text/javascript'/>
<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/carousel.js' type='text/javascript'/>
<script language='javascript' src='http://helplogger.googlecode.com/svn/trunk/Image Carousel/application.js' type='text/javascript'/>

Catatan: Jika Anda sudah memiliki Scriptaculous dan Prototype, itu tidak perlu menambahkan kode warna merah.

Langkah 4. Sekarang cari kode berikut: 

 ]]> </ B: skin>

Dan tepat di atasnya, tambahkan gaya ini: 

 . Carousel {
position: relative;
clear: both;
kiri: 20px; / * Jarak dari kiri * /
margin-top: 10px;
margin-bottom: 20px;
border: 2px solid # 000; / * Carousel perbatasan * /
background-color: # 333333; / * Warna latar belakang * /
}
. NavButton {cursor carousel: pointer; display: block;.
text-indent:-9999px;
background-repeat: none;
z-index: 10;
}
. Carousel. Container {
position: absolute;
overflow: hidden;
}
. Carousel. Item {
position: absolute;}
# Carousel2 {
height: 88px; / * ketinggian wadah * /
width: 685px; / * lebar wadah * /
}
# Carousel2. Container {
kiri: 26px;
top: 12px;
width: 630px; / * lebar gambar kontainer * /
height: 100px; / * tinggi gambar kontainer * /
}
Item # Carousel2 {top: 0; kiri:. 2px;
width: 1700px; / * lebar keseluruhan dari semua thumbnail * /
}
. # Carousel2 Item {height: 70px; width: 70px; float: kiri; jelas: right;}
.. # Carousel2 barang icon img {position: relative; kiri: 0px; width: 65px penting; height: 65px; cursor: pointer;}
. # Carousel2 navButton {position: absolute; bottom: 0px; width: 24px; height: 87px;}
. # Carousel2 navButton.previous {left: 0px; }
. # Carousel2 navButton.next {kanan: 2px; }
.. # Carousel2 item kunci {display: none;}
.. # Carousel2 Item gambar {display: none;}

Di sini, saya telah menempatkan beberapa gaya dalam warna hijau yang dapat disesuaikan sesuai keinginan, seperti warna perbatasan dan warna latar belakang. Tanda panah adalah gambar, jadi jika Anda ingin mengubah warna atau menggunakan lain, Anda harus mengubah dua URL dengan warna biru. 

Lebar korsel adalah 685px, sehingga di bawah header mungkin terlihat baik. Jika Anda ingin mengubah panjang maka Anda harus mengubah / * lebar wadah * / (yang merupakan ukuran dari seluruh korsel), yang / * lebar gambar kontainer * / (yang merupakan daerah yang menunjukkan thumbnail) dan / * lebar keseluruhan thumbnail * / yang lebar aktual yang menempati semua thumbnail bersama-sama. 

Langkah 5. Simpan Template. 

Langkah 6. Pergi ke Layout> klik Tambah link Gadget> pilih HTML / Javascript dari kotak pop-up dan paste struktur korsel: 

 <div id="Carousel2" class="carousel">
<div class="button navButton previous" style="display:none;"> Kembali </ div>
<div class="button navButton next" style="display:none;"> Maju </ div>
<div class="container">
<div class="items">

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

<div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

</ Div>
</ Div>
</ Div>

Tambahkan URL dari link dan URL gambar. Link URL adalah opsional jika Anda ingin menghubungkan gambar ke beberapa posting. 

Jika Anda menambahkan lebih banyak gambar atau menghapus beberapa, Anda juga perlu mengubah lebar thumbnail, jika tidak, beberapa gambar akan muncul di belakang yang lain. 

Untuk menambah lebih banyak gambar, tambahkan saja sebelum </ div> merah sepotong kode seperti ini: 

 <div class="item">
<div class="key caption"> Thumb </ div>
<div class="icon">
link URL <a href=" "> <img width="65" height="65" src=" image URL "/> </ a> </ div>
<div class="picture"> </ div>
</ Div>

Untuk menyelaraskan gadget hanya mengubah jarak dari kiri (hijau) ke nilai lain.