Membuat Slide Show Image

Membuat slide show image adalah sebuah widget yang menampilkan image secara rondom, dimana akan berganti-ganti tergantung jumlah foto dan informasi yang kita masukan ke dalamnya.

Langkah 1

1. Login ke Blogger
2. Pilih Tata Letak / Rancangan
3. Pilih Tab Edit HTML
4. Centang " Expand Template Widget"
5. Silakan Cari Kode ]]> dan Taruh Kode Berikut Di atas kode ]]>

#credit-wrapper{ background: #D7CE9C; border-top: 1px solid #F1F0E9; height: 20px;padding: 10px 0; } #credit { width: 960px; margin: 0 auto; color: #886223; text-align: center; } #credit a { color: #462F06; } /* Styles for the lavalamp menu */ .lavaLamp { position: relative; height: 30px; width: 421px; padding: 0; margin: 0px 0; overflow: hidden; } .lavaLamp li { float: left; list-style: none; } .lavaLamp li.back { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHxTAiwqhwa5XzB6fsHF_I_XkQh6-lsuhwTmeczVsSaxwekGE8YKf7kmFsrdm9seks0PB7WznvmC0pauttsWkdhvsh_EFP7dnZyoneyWpMymFzepuqNYPXK71HKz7MeG1PdNsih4Bjvdpp/s1600/lava.png) no-repeat top right; width: 9px; height: 30px; z-index: 8; position: absolute; color: #FFF; } .lavaLamp li a:hover, .lavaLamp li a:active, .lavaLamp li:hover{ color: #FFF; } .lavaLamp li.back .left { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHxTAiwqhwa5XzB6fsHF_I_XkQh6-lsuhwTmeczVsSaxwekGE8YKf7kmFsrdm9seks0PB7WznvmC0pauttsWkdhvsh_EFP7dnZyoneyWpMymFzepuqNYPXK71HKz7MeG1PdNsih4Bjvdpp/s1600/lava.png) no-repeat top left; height: 30px; margin-right: 9px; } .lavaLamp li a { position: relative; overflow: hidden; text-decoration: none; font: 14px arial; color: #FFF; outline: none; text-align: center; height: 30px; top: 7px; z-index: 10; letter-spacing: 0; float: left; display: block; margin: auto 10px; } .lavaLamp li a.first { color: #FFF; } /* Styles for the slideshow */ ul.slideshow { list-style:none; width:468px; height:240px; overflow:hidden; position:relative; margin:0; padding:0; } ul.slideshow li { position:absolute; left:0; right:0; } ul.slideshow li.show { z-index:500; } ul img { border:none; } #slideshow-caption { width:468px; height:80px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500; } #slideshow-caption .slideshow-caption-container { padding:5px 10px; z-index:1000; } #slideshow-caption h3 { margin:0; padding:0; font-size:16px; } #slideshow-caption p { margin:5px 0 0 0; padding:0; }

6. Kemudian Setelah itu coba cari kode dan Taruh Kode berikut di bawah kode

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script src='http://lightjavascript.googlecode.com/files/jquery-easing.js' type='text/javascript'/> <script src='http://lightjavascript.googlecode.com/files/lavalamp.js' type='text/javascript'/> <script src='http://lightjavascript.googlecode.com/files/slideshow.js' type='text/javascript'/> <script type='text/javascript'> $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 600 })}); </script>

7. Save Template

Langkah 2

Untuk Bisa Menikmati widget ini silakan perhatikan instruksi di bawah ini :

1. Login ke Blogger
2. Pilih Tata Letak Atau Rancangan
3. Tambah Widget/Gedget Baru
4. Pilih HTML/Javascript
5. Copy kode di bawah ini dan Paste di Widget/Gedget yang akan anda buat tadi (no.4)

<div class='post'> <ul class="slideshow"> <li><a href="http://gratistutoriallengkap.blogspot.com"><img src="http://www.aceh-online.com/gamba/WorldWideWeb.jpg" width="400" height="240" title="tutorial website arozaq" alt="Mau tau trick-trick dalam membuat wibsite, terlengkap dan mudah dimergerti" /></a></li> <li><a href="http://bagiilmu.com"><img src="http://st284475.sitekno.com/images/pic.png" width="200" height="200" title="be sahre education and entrepreneurship" alt="belajar bisnis online, meraup dolar dari internet, motivasi dan solusi" /></a></li> <li><a href="http://onoway.blogspot.com/p/produk.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpkMNfGzbPDXAxy1zp_bwBLNbE8Jk5Z_SJ8P63RAhPmTWqgerNUK2JSoZU-HIHDM_GZ-0-od_9sZPMOIq2f0e7IP1pecw7zR9x11B81e1iMU47u2IOTOWP8ELnwit1Y3kcIokIQVVZqXhk/s1600/24715_1 159833376466_1846748700_302836_2319791_n.jpg" width="470" height="240" title="MT-shirt clothing co." alt="Desain kaos keren up to date murah lagi" /></a></li>" </ul> </div>

Coba liat hasilnya dulu seperti apa ???

Keterangan :

1. Ganti dengan alamat link artikel kamu
2. Ganti warna hijau dengan link gambar / foto
3. Ganti Judul Foto dengan Judul Artikel Keterangan Lain Tentang Foto
4. Arti kode width="468" height="240" adalah ukuran dari widget slideshow view, lebar="468" tinggi="240"
5. alt= Isi dengan kalimat yang ingin di tampilkan di bawah foto.
6. Jumlah Slide Show bisa anda perbanyak dengan menambahkan kode

di atas kode

PENTING !!
Untuk Mengubah Ukuran dan Lebar Slide Show Agar Fix Sesuai ukuran yang anda inginkan :

1.Login Ke blogger
2.Pilih Tata Letek/Rancangan
3.Pilih Tab Edit HTML
4.Centang "Expand Template Widget"
5.Cari kode Yang Sama dengan kode-kode di bawah ini :

ul.slideshow { list-style:none; width:468px; height:240px; overflow:hidden; position:relative; margin:0; padding:0; }

NB : Ubah Tulisan width:468px dan height:240px dan sesuaikan dengan ukuran template. Kemudian cari kembali kode yang mirip seperti di bawah ini :

#slideshow-caption { width:468px; height:80px; position:absolute; bottom:0; left:0; color:#fff; background:#000; z-index:500; }

NB : Ubah Tulisan width:468px dan height:80px dan Sesuaikan dengan ukuran lebar dan ketinggian Widget (Berhubungan dengan huruf dan judul yang nanti akan di tampilkan, disarankan sesuikan dengan ukuran widget slideshow view yang di pilih.

selamat mencoba.....!

Posted in: blog