sebizaku: Slide Show Mudah tapi Canggih 06

21 Oktober, 2012

» Home » Slide Show » Title :Slide Show Mudah tapi Canggih 06

Slide Show Mudah tapi Canggih 06

Edisi Revisi

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.

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: #000; float: left; font: 11pt arial;  line-height: 1.2em; margin-top: 0px; padding: 10px; text-align: left; width: 520px;">

#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/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="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/AVvXsEi4IIH5Pdfhs9i2EFywQA7vRrfiNDiUZ6ZCryLoQkEsNoYfYIM7aRmPH87aHWh_j8WRNSeQFkyrv288oH9NBhSntFOpURNPdYO-Dg8IEmVndoC9QxMQ77VSvgcuwARnD_PTWtKiaOMEht0/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/AVvXsEiy8Jdp2Cue-br57ZepMPoPGBCqn3CH7GsWSOBTjmhy02iPdBmEhC2JMOKTqeKFlCZyapmGTLpA3k-CC-0l8RrLXcywgW0RMJgKHV2xjTCiO9l1eCQR6GIFEV8_p4yXFyxoFHPcWBanVIs/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>

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.

Success4U. Whienda.