sebizaku: Cara mudah memasang Slide Show 05

20 Oktober, 2012

» Home » Slide Show » Title :Cara mudah memasang Slide Show 05

Cara mudah memasang Slide Show 05

Edisi Revisi

Memasang slide show super mudah?Ini dia! Skripnya sedikit. Gak pake ribet. Langsung kopas di widget. Hasilnya? Dari aspek fungsi, tidak kalah dengan yang lain. Demikian juga dari segi estetika, nyaris sama dengan yang saya posting sebelumnya, yaitu koleksi 01 dan 02. Slide show ini saya utak-atik dari www.s3slider-original.googlecode.com, dengan menggunakan jQueri dari ajax.googleapis.com.

Demo Slider Show

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:

<div style="background: #ccc; 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; } </style> <div id="sebizaku-slider"> <ul id="sebizaku-sliderContent"> <li class="sebizaku-sliderImage"> <a href="URL POSTING 1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRgH2Jw9I1s9wwv-pGT5LuGVDwUZnhuXk00-xQwv1TUAOchE09NfPMCJolWZyyOCPYfS1L0AU2YLiDUepT4Pbt55U6_hJkFttgvjz5R_HIGGoR7a12XmY9qI80YCpjpoVpsX1pSndXKhA/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/AVvXsEj27fkxHoLxcEQEBq5cwnlvXFe4DZfKdocYnBiY4eyDKOTLW9-WJcJlsnp62VcVYqqjgZ5b-7Jp5TXII3cZFZChagbuAom8OLHyZq-q8eLMVRE9korq76FagV6kb16bkhYJ5tzyokcZSLg/s1600/motor03.jpg"" /> <span class="top"><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/AVvXsEi4IIH5Pdfhs9i2EFywQA7vRrfiNDiUZ6ZCryLoQkEsNoYfYIM7aRmPH87aHWh_j8WRNSeQFkyrv288oH9NBhSntFOpURNPdYO-Dg8IEmVndoC9QxMQ77VSvgcuwARnD_PTWtKiaOMEht0/s1600/mobil03.jpg" /> <span class="top"><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/AVvXsEiy8Jdp2Cue-br57ZepMPoPGBCqn3CH7GsWSOBTjmhy02iPdBmEhC2JMOKTqeKFlCZyapmGTLpA3k-CC-0l8RrLXcywgW0RMJgKHV2xjTCiO9l1eCQR6GIFEV8_p4yXFyxoFHPcWBanVIs/s1600/girl03.jpg" /> <span class="top"><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>

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 hanya itu saja, kecuali jika Anda pengin utak-utik juga seperti saya. Anda juga pasti berhasil!

Success4U. Whienda.