- 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 di bawah ini.
<!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>
<!-- start images slideshow -->
<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>
<!-- // end images slideshow -->
</body>
</html>
Emoticon Emoticon