Kemudian cari kode ]]></b:skin>
untuk mempermudah pencarian tekan Ctrl + F di keboard sobat
Jika sudah ketemu silahkan Copy kode CSS di bawah ini dan letakkan diatasnya
#slider {
background:#ffffff;
height: 153px;
text-align:center;
overflow: hidden;
position: relative;
margin: -5px 0px;
}
#mover {
width: 600;
position:absolute;
overflow:hidden;
}
.slide {
padding: 15px 0px;
width: 1000px;
float: left;
position: relative;
height:130px;
}
.slide h2 {
font-family:Georgia, Helvetica, Sans-Serif;
font-size: 18px;
font-weight:bold;
text-align:left;
color: #FFFF00;
padding:0px 0px 0px 0px;
margin:0px 0px;
width:440px;
overflow:hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color:#E1771E;
background-color: transparent;
}
.slide h2 a:hover {
color: #ff0000;
background-color: transparent;
}
span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 200px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #FFFFFF;
font-size: 12px;
text-align:left;
font-family: Georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 440px;
padding:0px 0px 0px 0px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 225px;
background:;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 1000px;
right: -125px;
color: #FF0000;
padding: 3px 8px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}
Kemudian cari kode </head> dan letakkan script berikut diatasnya
<script src='http://wittoblog.googlecode.com/files/jquery-1.2.6.js ' type='text/javascript'/>
<script src='http://wittoblog.googlecode.com/files/slider.js ' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
Masih dalam Dasbor klik Elemen Laman klik Tambah Gadget pilih HTML/JavaScript
Copy Paste HTML berikut kedalamnya.
<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href=" link judul slide "> judul slide </a></h2>
<p> isi artikel </p>
<img src=" link gambar "/>
</div>
<div class="slide">
<h2><a href="link judul slide "> judul slide </a></h2>
<p> isi artikel </p>
<img src=" link gambar "/>
</div>
<div class="slide">
<h2><a href=" link judul slide "> judul slide </a></h2>
<p> isi artikel </p>
<img src=" link gambar "/>
</div>
<div class="slide">
<h2><a href=" link judul slide "> judul slide </a></h2>
<p> isi artikel </p>
<img src=" link gambar "/>
</div>
<div class="slide">
<h2><a href=" link judul slide "> judul slide </a></h2>
<p> isi artikel </p>
<img src=" link gambar "/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>
Tulisan yang berwarna biru bisa sobat ganti sesuai selera.
Simpan dan lihat hasilnya.
Selamat Mencoba, Semoga Sukses,...
3 komentar:
demo na kayak apa ea??
@i-soft contohnya terletak pada header blog ini, tp di blog ini link gambarnya di hilangkan, jd seperti itu.thx
contohe kaya pa Boz..
:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))
Posting Komentar
Comment Yuk Biar Lebih Seru....