Memasang Slider di Blog

Indonesia Furniture Handicraft Wholesale Marketplace

Ternyata banyak juga rekan yang ingin mencoba memasang Image Slider/Text Slider seperti yang gua punya,(lihat pada bawah menubar diatas) Slider yang sudah saya terapkan sendiri terinspirasi oleh milik Zinmag primus template.Gadget ini ternyata selain membuat tampilan blog lebih atraktif dan bergaya, sumbangan kunjungan langsung melalui slider ternyata tidak sedikit jumlahnya. Ok, langsung ke cara pasangnya saja ke cara pemasangan.

Letakan kode CSS dibawah ini diatas kode:]></b:skin>


#slider {
background:url(http://img99.imageshack.us/img99/9594/slide.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}

#mover {
width: auto;
position:absolute;
overflow:hidden;
}

.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}

.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}

.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}

.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}

span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}

.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
Masih di edit HTML,kemudian letakan kode javascript dibawah ini dibawah kode:]></b:skin>




<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/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>
Kemudian simpan templates,lalu pindah ke halaman tataletak.Add Gadget,lalu HTML or Java scripts kemudian copy kode dibawah ini:

<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>

<div class='slide'>
<span class='slmet'> Posted by Nama Anda </span>
<h2><a href='http://Alamat url posting anda'>Judul Posting</a></h2>
<p>Uraian yang ingin ditampilkan :).</p>
<img alt='' src='http://alamat url gambar yang ingin ditampilkan'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Nama Anda </span>
<h2><a href='http:Alamat url posting anda'>Judul Posting</a></h2>
<p>Uraian yang ingin ditampilkan.</p>
<img alt='' src='http://alamat url gambar yang ingin ditampilkan'/>
</div>

</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>

Langkah terakhir yaitu ganti tulisan warna merah sesuai dengan nama dan link yang telah ditentuka.Mudah bukan??Sekian dulu dan terimakasih

Indonesia Furniture Handicraft Wholesale Marketplace