Cara
membuat Image slider di postingan seperti merdeka.com dan web lainya
Image
Slider adalah image yang bergerak sendiri dengan otomatis.
Tempat
image slider yang kali ini tempat nya di postingan
bagaimana
cara membuat nya berikut
Caranya
sangat mudah :
TAHAP
1.
klik
HTML di postingan (bukan Compose)
Tahap2.
masukan
kode berikut
Jquery
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
type="text/javascript"></script>
CSS
+ HTML
<script
src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"
type="text/javascript"></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>
<br
/>
<div
id="BUS-slider">
<ul
id="BUS-sliderContent">
<li
class="BUS-sliderImage">
<img
height="335" src="CODE IMAGE GAMBAR ANDA"
width="550" /><a href="URLYANG DITUJU"><span
class="top"><h3> JUDUL GAMBAR</h3>
TEXT
ISI DARI GAMBAR TERSEBUT</span></a><span
class="short_text" id="result_box"
lang="en"><span
class="hps"></span></span>
</li>
<li
class="BUS-sliderImage">
<img
height="335" src="CODE IMAGE GAMBAR ANDA"
width="550" /><a href="URLYANG DITUJU"><span
class="top"><h3>
JUDUL
GAMBAR</h3>
TEXT
ISI DARI GAMBAR TERSEBUT</span></a><span class="short_text"
id="result_box" lang="en"><span
class="hps"></span></span>
</li>
<li
class="BUS-sliderImage">
<a
href="URLYANG DITUJU"><img height="335"
src="CODE IMAGE GAMBAR ANDA" width="550" />
<span
class="top"><h3>
JUDUL
GAMBAR</h3>
TEXT
ISI DARI GAMBAR TERSEBUT</span>
</a></li>
<li
class="BUS-sliderImage">
<a
href="URLYANG DITUJU"><img height="335"
src="CODE IMAGE GAMBAR ANDA" width="550" />
<span
class="bottom"><h3>
JUDUL
GAMBAR</h3>
TEXT
ISI DARI GAMBAR TERSEBUT</span>
</a></li>
<li
class="BUS-sliderImage">
<a
href="URLYANG DITUJU"><img height="335"
src="CODE IMAGE GAMBAR ANDA" width="550" />
<span
class="bottom"><h3>
JUDUL
GAMBAR</h3>
TEXT
ISI DARI GAMBAR TERSEBUT</span>
</a></li>
<div
class="clear BUS-sliderImage">
</div>
</ul>
</div>
<br
/>
