Senin, 05 Mei 2014
Baiklah berikut ini cara membuat Images Slideshow pada sebuah dokumen HTML.
Cara Membuat Images Slideshow Pada Dokumen HTML:
- Jalankan aplikasi text editor seperti 'notepad' untuk menulis sebuah dokumen HTML. Mungkin notepad bawaan windows kurang begitu menarik, solusinya Anda dapat menggunakan aplikasi notepad++ yang dapat Anda download di sini.
- Penting! simpan dokumen HTML dengan format 'Nama_File.html' tanpa tanda kutip, kemudian pada 'Save as type' Anda pilih 'All files' agar dokumen yang Anda simpan menjadi dokumen HTML bukan dokumen text biasa.
- Sekarang mari kita mulai untuk membuat Images Slideshow pada dokumen HTML seperti pada kotak di bawah ini.
Source Code :
<!DOCTYPE html>
<html>
<head>
<title> Cara Membuat Images Slideshow Pada Dokumen HTML </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-min.js" type="text/javascript"></script>
<script src="js/s3slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
</head>
<body>
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/1.jpg" alt="1" style="border:0;"/></a>
<span class="top"><strong>Title text 1</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/2.jpg" alt="2" style="border:0;" /></a>
<span class="top"><strong>Title text 2</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/3.jpg" alt="3" style="border:0;" /></a>
<span class="bottom"><strong>Title text 3</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/4.jpg" alt="4" style="border:0;" /></a>
<span class="bottom"><strong>Title text 4</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/5.jpg" alt="5" style="border:0;" /></a>
<span class="top"><strong>Title text 5</strong><br />Content text...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> Cara Membuat Images Slideshow Pada Dokumen HTML </title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery-min.js" type="text/javascript"></script>
<script src="js/s3slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
</head>
<body>
<ul id="sliderContent">
<li class="sliderImage">
<a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/1.jpg" alt="1" style="border:0;"/></a>
<span class="top"><strong>Title text 1</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/2.jpg" alt="2" style="border:0;" /></a>
<span class="top"><strong>Title text 2</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/3.jpg" alt="3" style="border:0;" /></a>
<span class="bottom"><strong>Title text 3</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/4.jpg" alt="4" style="border:0;" /></a>
<span class="bottom"><strong>Title text 4</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="http://www.amirabella-zone.blogspot.com" target="_blank" style="outline:none;"><img src="images/5.jpg" alt="5" style="border:0;" /></a>
<span class="top"><strong>Title text 5</strong><br />Content text...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
</html>
Keterangan
- Ganti css/style.css dengan url tempat Anda menyimpan file css images slideshow (sudah ada di dalam file example).
- Ganti js/jquery-min.js dengan url tempat Anda menyimpan file jquery-min.js (sudah ada di dalam file example).
- Ganti js/s3slider.js dengan url tempat Anda menyimpan file s3slider.js (sudah ada di dalam file example).
- Ganti http://www.amirabella-zone.blogspot.com dengan url link Anda.
- Pada attribute target _blank artinya target link akan ditampilkan pada tab baru apabila Anda menginginkan targetnya pada halaman yang sama maka ganti valuenya dengan _self, atau dapat jg dengan menghapus attribute target="_blank".
- Ganti images/1.jpg, images/2.jpg, images/3.jpg, images/4.jpg,images/5.jpg dengan url file images (gambar) Anda.
- Ganti Title text 1, Title text 2, Title text 3, Title text 4, Title text 5dengan Title yang Anda inginkan.
- Ganti Content text..., dengan content text Anda.
