Membuat Image Slider Keren Dengan Thumbnails -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Membuat Image Slider Keren Dengan Thumbnails, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger Tutorials, Artikel Blogger Widgets, Artikel CSS3, Artikel JavaScript, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Membuat Image Slider Keren Dengan Thumbnails
link : Membuat Image Slider Keren Dengan Thumbnails
Gambar dibawah ini

Membuat Image Slider Keren Dengan Thumbnails

Alhamdulillah akhirnya bisa kembali lagi menyapa anda dengan tutorial baru membuat image slider keren dengan thumbnails. Image slider ini tentu sangat bagus sebagai sarana promosi artikel terbaik anda dengan bantuan gambar yang membuatnya tampil aktraktif, elegant dengan efek yang halus bertenaga CSS3 dan JavaScript, namun tetap dengan fast loading sehingga anda tidak perlu khawatir akan mempengaruhi kecepatan loading blog anda.
untuk membuktikannya anda bisa mengecek live demo pada blog eksperimen saya

Tekan Tombol view Demo

View Demo
Nah jika anda tertarik untuk menambahkan image slider keren dengan thumbnails pada blog anda, setelah melihat live demonya atau sekedar ingin tahu cara membuatnya, silahkan ikuti langkah-langkah berikut:

Cara Menambahkan Widget Ini KeBlog

• Seperti biasa login ke akun blogger anda >> Template >> Edit HTML >> Proceed
• Klick Ctrl+F dan cari kode ]]></b:skin 
• Tambahkan kode CSS berikut diatas kode ]]></b:skin>

.slider{   
width: 640px; /*Same as width of the large image*/ 
position: relative;          
/*Instead of height we will use padding*/
padding-top: 320px; /*That helps bring the labels down*/
margin: 100px auto; 
/*Lets add a shadow*/ 
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); 
}
/*Last thing remaining is to add transitions*/
.slider>img{
position: absolute; 
left: 0; top: 0;
transition: all 0.5s; 
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label { 
/*Lets add some spacing for the thumbnails*/ 
margin: 18px 0 0 18px;
border: 3px solid #999; 
float: left;   
cursor: pointer; 
transition: all 0.5s;
/*Default style = low opacity*/
opacity: 0.6; 
}
.slider label img{ 
&display: block; 
}
/*Time to add the click effects*/ 
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;  
}  
/*Clicking any thumbnail now should change its opacity(style)*/ 
/*Time to work on the main images*/ 
.slider input[name='slide_switch'] ~ img { 
opacity: 0;
transform: scale(1.1); 
} 
/*That hides all main images at a 110% size 
On click the images will be displayed at normal size to complete the effect 
*/ 
.slider input[name='slide_switch']:checked+label+img {
opacity: 1; 
transform: scale(1);
} 
/*Clicking on any thumbnail now should activate the image related to it*/

Perhatikan tulisan berwarna biru adalah lebar dan tinggi gambar

• Cari kode <div id='main-wrapper'>
• Setelah dapat tambahkan kode HTML berikut diatas kode <div id='main-wrapper'>

<div class="slider">  
<input type="radio" name="slide_switch" id="id1"/>           
<label for="id1">         
<img src="IMAGE LINK" width="100"/>
</label>  
<img src="IMAGE LINK"/>

    <!--Lets show the second image by default on page load--> 
<input type="radio" name="slide_switch" id="id2" checked="checked"/> 
<label for="id2">
<img src="IMAGE LINK" width="100"/>             
</label>           
<img src="IMAGE LINK"/>            
<input type="radio" name="slide_switch" id="id3"/>            
<label for="id3">           
<img src="IMAGE LINK" width="100"/>         
</label>          
<img src="IMAGE LINK"/>          
<input type="radio" name="slide_switch" id="id4"/>             
<label for="id4">            
<img src="IMAGE LINK" width="100"/>           
</label>             
<img src="IMAGE LINK"/>           
<input type="radio" name="slide_switch" id="id5"/>            
<label for="id5">          
<img src="IMAGE LINK" width="100"/>           
</label>         
<img src="IMAGE LINK"/>             
</div>

Kustomisasi

Ganti IMAGE LINK dengan link gambar anda.

•  Tambahkan script berikut diatas kode </head>

<script src="http://tipstrikblogging.googlecode.com/files/imagesliderthumbnails.js" type="text/javascript"></script>

• Simpan template.

Sebelum menyimpan anda bisa klik pratinjau dulu jika sudah sesuai dengan yang anda inginkan, silahkan Simpan dan lihat hasilnya diblog anda.

Demikian tutorial membuat image slider keren dengan thumbnails semoga bermanfaat. Jika ada pertanyaan silahkan tinggalkan pada kolom komentar dan terimakasih tuk apresiasi anda.

Demikianlah Artikel Membuat Image Slider Keren Dengan Thumbnails

Sekianlah artikel Membuat Image Slider Keren Dengan Thumbnails kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Membuat Image Slider Keren Dengan Thumbnails dengan alamat link https://trikmitos.blogspot.com/2013/01/membuat-image-slider-keren-dengan.html