Slide Show 6

 

Memasang Slide Show yang canggih tapi mudah? Ya bisa saja! Yang skripnya sedikit?. Yang 'gak pake ribet?. Cobalah slider yang ini. Kalau hanya dilihat dari display di posting ini, kayaknya sih biasa-biasa saja. Tapi cobalah. Anda bakal melihat garakan transisi yang atraktif. Area teks, dapat muncul dari atas, dari bawah dari kiri dan dari kanan, Sangat variatif dan punya kemampuan menjerat mata yang tinggi. Mungkin yang paling menarik bagi Anda malah pemasangannya yang sangat mudah, dan skrip kecil, yang dapat diartikan loadingnya ringan! Ini juga kelajutan dari aktivitas utak-atik dari www.s3slider-original.googlecode.com, dengan menggunakan jQueri dari ajax.googleapis.com.

Cara memasang Slide Show di template

1. Masuk ke Akun/dashboard Anda
2. Lantas ke: Tata Letak
3. Klik: tulisan Add New Widget
4. Pilih HTML/Javascript, kemudian letakkan kode berikut:

<!--Start Sebizaku slider--> <div style="background: #000; float: left; font: 11pt arial; line-height: 1.2em; margin-top: 0px; padding: 10px; text-align: left; width: 520px;"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#sebizaku-slider').s3Slider({ timeOut: 3000 }); }); </script> <style> #sebizaku-slider { left: 0; width: 560px; height: 285px; border: 0px solid #000; position: relative; overflow: hidden; margin-left: -40px; } #sebizaku-sliderContent { width: 560px; position: absolute; top: 0; margin: 0px; } .sebizaku-sliderImage { float: left; position: relative; display: none; top: 0; border: 0px solid #ddd; } .sebizaku-sliderImage span { position: absolute; font: 10pt Arial,Helvetica; padding: 10px; background-color: #000; color: #fff; filter:'alpha(opacity=50)'; -moz-opacity: .5; -khtml-opacity: .5; opacity: .5; text-align:left; } .sebizaku-sliderImage span a {text-decoration:underline; color:#FE6602; } .clear {clear: both;} .top {top: 0; left: 0;width: 560px; height: 70px; } .bottom {bottom: 0; left: 0; width: 560px; height: 100px; } .left {left: 0; top: 0; width: 110px; height: 280px; } .right { right: 62; bottom: 0; width: 110px; height: 290px; } a:link, a:visited, a:hover {color: white;text-decoration:none;} </style> <div id="sebizaku-slider"> <ul id="sebizaku-sliderContent"> <li class="sebizaku-sliderImage"> <a href="URL POSTING"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG0U8V-Z4I5We8FZuTfqdDNWzwFQXtgYWRC27El-b3ix1lF6XMAyB1nAOzSfXWkZWvND98bvUir4ONWBrbr5t2YJbNjDcJNz6WCqOdbiMmY0exv96RR92u0XDwPBVkXzOmWii5Qv0FG00/s1600/nature03.jpg" /> <span class="top"><h3> JUDUL ARTIKEL 1</h3> Apapun yang Anda yakini, gagal atau sukses, akan menjadi kenyataan. Selanjutnya...</span> </a></li> <li class="sebizaku-sliderImage"> <a href="URL POSTING"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj94jsaGSBYPiHen8mNxJXNrhdDz3wnXfevK9ezr1q2TpeBa8YzBQGCmWM-aR9enTloNFyuZZF_46TFfVUhaOczk2vxiihVjO7W0uiryAnuXhxzOzkb0UO1qv7gyYnu1ndZH8U46jXIDJA/s1600/motor03.jpg"" /> <span class="right"><h3> JUDUL ARTIKEL 2</h3> Apapun yang Anda pikirkan, gagal atau sukses adalah benar.More</span> </a></li> <li class="sebizaku-sliderImage"> <a href="URL POSTING"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObTyv6MP4JVffhbPdE8ULs_6VYYA5uWCQH1GmjZ7Ty_zG3ntTs8c6B978CqbxWnmNr4Zqo3foDtPrQKxHzhX7NTrhbIJ4d0sYpB_sX74lgQ6wE0Tm6Dyl9QPAlkJUx4cEhHlJVW-J0vw/s1600/mobil03.jpg" /> <span class="bottom"><h3> JUDUL ARTIKEL 3</h3> Bayangan selalu lebih besar dari aslinya, apapun itu! Gagal maupun sukses. Lantas ...</span> </a></li> <li class="sebizaku-sliderImage"> <a href="URL POSTING"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9QZvlq3Qug-lrX0AgeuQRd4hFu9uaYSUKJ4cDcIGQPoiymnQPBVIHapC81Haz0rQWRm5V1GzlxBWGFjnxbL4iwcUh3U7xRaBUfy2_9ndaUn1ZDEN1YXh64IYvPKyZGKgQEQtQt88MFH0/s1600/girl03.jpg" /> <span class="left"><h3> JUDUL ARTIKEL 4</h3> Dunia selalu melesat maju ke depan. Jika Anda tidak lebih maju dari kemarin berarti Anda mundur. Lanjut ...</span> </a></li> <div class="clear sebizaku-sliderImage"> </div> </ul> </div> </div> <!--end sebizaku slider-->

5. Save/Simpan.

Jika prosedur memasang Slider Show sudah oke,

dapat lakukan Ubah Suai yang sederhana.
1. Alamat URL Posting Anda, a herf:"..." dsb
2. Alamat URL gambar/image, img src" http..." dsb
3. Jika perlu mengubah ukuran/dimensi slide, cukup dengan: width dan height.

Kayaknya cukup itu saja, sama dengan yang slide show nomor 5, semoga tidak ada kesulitan.