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




5 comments:

Rendy BlogHeboh "Blog Dofollow" mengatakan...

keren kerenn nih..
mau coba tapi takut salah..

oh iyah buat teman-teman yang ingin mencoba cara ini sebaiknya download template dulu yah, daripada berakibat fatal..
hehehee..

Silahkan berkunjung ke BLOG HEBOH dan jangan lupa berkomentar karena BLOG HEBOH masih tetap DOFOLLOW >>
Posting Terakhir :Tutorial atau Panduan Ciao | $5 dalam waktu 1 Jam

Chandra mengatakan...

Sip nih, saya udah pasang, tapi ada problem nih. Kok Drop down menu saya ketutup sama slidernya ya, gimana caranya ya biar DROP DOWN menu nya bisa tetep tampil didepan slider, seperti punyanya mas ?
Thnks, ditggu jwbnya. :D

kuryt mengatakan...

Reply Comment
@Chandra
Kok ketutup.....

gua juga pernah ngalamintuh mas chandra...Setelah gua selidikin ternyata masalahnya ada pada browser saya...Mungkin masalah mas sama dengan masalah saya.Coba deh lihat dengan browser yg lebih baru..

Salam kenal dari Myokezone

Arsyil mengatakan...

Wah thanks infonya..
Ngomong2 contohnya sperti apa ya?
Kunjungi blogku..

Alternatif 27 mengatakan...

ah sempet pusing harus edit dan nemuin mana bagian yang diedit untuk image slider....
BTW keren artikelnya...

oh ya main ke blogku dong wanda....aku perlu masukan komentar, masih perlu perbaikan dimana gitu.... eh jangan lupa ya join ke tempatku juga...
http://tutorial-27.blogspot.com
http://portal-review.blogspot.com

Poskan Komentar

Ayo comment sebanyak-banyaknya,dan jadilah top comment di myokezone.Dan dapatkan backlink gratis di halaman Home..