BLOG URANG SUNDA: Cara Membuat SLideshow Gambar Lucu Pada Blogger?

Sudah waktunya sobat semua untuk bersorak, setelah sudah banyak perjuangan mengedit ulang kode ini saya berhasil membuat slidshow images pada blogger, kode ini saya melihatnya di Boban Karišik’s kode yang ia ciptakan memang cukup masuk akal dan saya pun tertarik di buatnya, sobat sekarang bisa memasangnya di blog sobat masing. Saya tidak menyertakan demo untuk slideshow jika sobat ingin melihat demo slideshow-nya sobat bisa copy kode di bawah ini dan paste di sini HTML Editor BUS disitu sobat akan melihat demonya.

Cara Membuat Slideshow Pada Blogger?

Saya telah mencoba yang terbaik untuk membuat kode dan pemasangan sebaik mungkin sobat bisa lihat tutorialnya cara membuat slideshow pada blogger di bawah ini.

Masuk ke akun blog sobat.
Dari dasbor klik Rancangan
Tambag Gadget => Html/ JvaScript
Simpan kode di bawah ini.

<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() {
$('#BUS-slider').s3Slider({
timeOut: 3000
});
});
</script>
<style>
#BUS-slider {
width: 550px; /* Keep it 20px-40PX greater than ACTUAL Image size */
height: 335px;
position: relative;
overflow: hidden;
margin-left: 0;
}
#BUS-sliderContent {
width: 550px;
position: absolute;
top: 0;
margin-left: 0;
}
.BUS-sliderImage {
float: left;
position: relative;
display: none; top: 0;
border:1px solid #ddd;
}
.BUS-sliderImage span {
position: absolute;
font: 10px/15px sans-serif,Arial, Helvetica;
padding: 10px 10px;
background-color: #000;
color: #fff;
filter:'alpha(opacity=70)';
-moz-opacity: .5;
-khtml-opacity: .5;
opacity: .5;
text-align:justify;
}
.BUS-sliderImage span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
clear: both;
}
.top {
top: 0;
left: 0;
width: 550px !important;
height: 70px;
}
.bottom {
bottom: 0;
left: 0;
width: 550px !important;
height:90px;
}
.left {
left: 0;
top: 0;
width: 110px !important;
height: 335px;
}
.right {
right: 0;
bottom: 0;
width: 110px !important;
height: 315px;
}
</style>
<div id="BUS-slider">
<ul id="BUS-sliderContent">
<li class="BUS-sliderImage">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinU4QA2Gsw3MNkwD-skwTgnksXWVeLVjOXsSND-xLtpLmtNQoglFIdAsVUWK24HMf09MM-7-FBPacLsrtigacu3kqw0ZIwdUhwq-bgu5KUXUw8cgvM3Dg9PC0ib0gJeJTxE8HefefCBn0/s144-p/froggy-01.jpg"width="550"height="335"/>
<span class="right"><h3>HEADING-1 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="BUS-sliderImage">
<img src="https://lh6.googleusercontent.com/-tMlCuLM8W9U/T1ePb8zPZ8I/AAAAAAAAWYA/Ts4L8-EKRLw/s144-p/liquidmoon.jpg"width="550"height="335"/>
<span class="left"><h3>HEADING-2 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="BUS-sliderImage">
<img src="https://lh5.googleusercontent.com/-Jj2icsmjKU0/TRZIEbg1DrI/AAAAAAAAPII/W3qlBQN8EEY/s144-p/DSC_6188.jpg"width="550"height="335"/>
<span class="top"><h3>HEADING-3 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="BUS-sliderImage">
<img src="https://lh5.googleusercontent.com/-qaIEtFbC4Ww/TRo3lpIItlI/AAAAAAAAAbY/PrrDCpaGpUM/s144-p/DSC_9636.jpg"width="550"height="335"/>
<span class="bottom"><h3>HEADING-4 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="BUS-sliderImage">
<img src="https://lh3.googleusercontent.com/-3N2mUk21gII/TQvDoVM-W9I/AAAAAAABNp8/YJKXUVO6Sw0/s144-p/Lovas%25252010%25252004%252520136-2.jpg"width="550"height="335"/>
<span class="bottom"><h3>HEADING-5 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<div class="clear BUS-sliderImage"></div>
</ul>
</div>
<br/>

Nah sobat lihat kode yang saya cetak tebal seperti ini width="550"height="335" itu yang harus sobat ganti sesuai dengan ukuran Widget dimana sobat letakan kode ini, sobat bisa bermain-main mengganti kode dan melihat preview nya disini HTML Editor BUS.
Untuk mengatur cepat dan lambatnya slide sobat ganti kode berikut timeOut: 3000 Semakin tinggi nilainya semakin lambat slide-nya dan sebaliknya.
Nah untuk kode yang berwarna biru sobat ganti sesuai dengan judul gambar dan deskripsi gambar.
Jika sobat ingi menambahkan gambar slideshownya sobat tinggal tambahkan kode di bawah ini.

<li class="BUS-sliderImage"> <img src="https://lh3.googleusercontent.com/-3N2mUk21gII/TQvDoVM-W9I/AAAAAAABNp8/YJKXUVO6Sw0/s144-p/Lovas%25252010%25252004%252520136-2.jpg"width="550"height="335"/> <span class="bottom"><h3>HEADING-5 GOES HERE</h3>DESCRIPTION GOES HERE</span></li>

Simpan kode di atas sebelum kode paling bawah dari kode di atas yaitu kode.

<div class="clear BUS-sliderImage"></div> </ul> </div><br/>

Selesai sundah tutorial kali ini cara membuat slideshow pada blogger, sobat juga bisa lihat tutorial saya sebeumnya cara membuat floating facebook likebox pada blogger. Semoga sobat menyukai postingan saya ini.

Theant Budiana

About the Guest Author:
Saya bukanlah orang yang ahli dalam dunia blogger tapi saya mencoba untuk berbagi ilmu dari apa yang saya ketahui dari paman saya, saya sangat suka blogging dan berbagi ilmu, tapi bukan berarti saya master blog salah besar jika sobat anggap saya hebat saya hanya seorang anak kampung yang mencoba untuk tidak kampungan dan tertinggal informasi alias GAPTEK, banyak artikel yang saya tulis di Blog Urang Sunda dan lihat juga blog saya satu lagi di Dunia Maya Saya dan klik disini untuk mengetahui lebih lanjut tentang saya

Kindly Bookmark this Post using your favorite Bookmarking service:

warning

Anda bingung?
Jangan ragu untuk bertanya kepada saya lewat komentar di bawah, saya akan mencoba menjawabnya sesegera mungkin, bahkan jika sobat ada saran untuk saya silahkan jangan ragu untuk memberi saran kepada saya asalkan komentar no spam. Komentar anda, adalah bekal untuk kemajuan blog saya, saya akan kunjungi balik blog sobat jika sobat meninggalkan jejak sobat disini.