Trik membuat Slider ala Zinmag Primus Template

Ternyata penasaran juga saya. Saya ingin mencoba memasang Image Slider/Text Slider ala template Zinmag Primus, Slider yang mudah diterapkan 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 ya:


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;
}

Kemudian letakan kode javascript dibawah ini dibawah kode ]]>

<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 cari kode dibawah ini:

<div id='header-wrapper'>

..........


.........


</b:section>

Letakan kode dibawah ini dibawah kode diatas.

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

<div class='slide'>
<span class='slmet'> Posted by Agus ramadhani </span>

<h2><a href='http://www.o-om.com/2008/05/e-book-kiat-sukses-promosi-blog.html'>eBOOK Kiat Sukses Promosi Blog</a></h2>

<p>Kontes seo "kampanye damai pemilu indonesia 2009" tinggal menghitung hari..10 hari ini saya mencoba sekuat apa pengaruh backlink pada keyword..kalo ada yang mau bantu dukung om bisa memasang link ini di blog masing2. Silahkan copy-paste kode dibawah, thanks banget atas dukunganya :).</p>

<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmerLFOMsgeLc6gE7kCf_aqO6LFB84c-qoLoBP0g5NRaE6p4BiMC_gjUUwByQ7EzRVs6TFcQQuDlVDuhkjTCswoOjX4w1xxE5rLi_RuIJafgNSAM9L6hbHnCs9gzy0eAO6rNIu0qxFbzfh/s400/Kampanye+Damai+Pemilu+Indonesia+2009.gif'/>

</div>
<div class='slide'>
<span class='slmet'> Posted by Agus ramadhani </span>
<h2><a href='http://www.o-om.com/2009/02/kampanye-damai-pemilu-indonesia-2009.html'>Kampanye Damai Pemilu Indonesia 2009</a></h2>

<p>Dalam buku elektornik ini anda juga akan menemukan kiat sukses dan point penting dalam kegiatan promosi blog serta bagaimana etika promosi yang terkandung didalamnya. Untuk kedepan eBook ini tidak saya gratiskan lagi dan tentu saja materinya lebih berbobot dari Free Edition. Jadi segera download dan pastikan anda pertama yang membacanya.</p>

<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6tMZ5xlNZ0QDuF01HaNSYi0McgF1DCQasRmV9OpOz9vVB8i7WQVjS9_DcSUCDVfGhOJVXgqL00c2Cc-0SoXCq-_4GgEC1v5YU4sM6u_qy4n8MZEtBITTBhB-7OyxXxw7Sg7fjqLOe8t2j/s400/OOMEBOOK.gif'/>

</div>

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


Sampai disini semua proses penyimpanan kode berakhir. Sekarang lihat saja hasilnya.

Apa saja yang perlu diedit?

1. Karena file javascript diatas meminjam langsung dari alamat lain, jadi saya sarankan rekan menyimpannya pada hosting masing2. Silahkan download semua file javascript disini.

2. Secara default, Background image pada slider diatas kemungkinan tidak sesuai dengan ukuran template rekan saat ini, jadi mau tidak mau harus memperkecil ukurannya atau sebaiknya buat saja gambar baru sesuai dengan ukuran dan lebar template rekan yang sekarang.

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

3. Setelah rekan selesai dan berhasil memasang semua kode di atas, contoh slider yang tampil hanya sebagai sample saja, jadi silahkan dihapus link, text dan gambar milik saya dan ubahlah gambar, link dan kalimatnya sesuai kebutuhan.

<div class='slide'>
<span class='slmet'> Posted by Agus ramadhani </span>
<h2><a href='http://www.o-om.com/2009/02/kampanye-damai-pemilu-indonesia-2009.html'>Kampanye Damai Pemilu Indonesia 2009</a></h2>
<p>Dalam buku elektornik ini anda juga akan menemukan kiat sukses dan point penting dalam kegiatan promosi blog serta bagaimana etika promosi yang terkandung didalamnya. Untuk kedepan eBook ini tidak saya gratiskan lagi dan tentu saja materinya lebih berbobot dari Free Edition. Jadi segera download dan pastikan anda pertama yang membacanya.</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6tMZ5xlNZ0QDuF01HaNSYi0McgF1DCQasRmV9OpOz9vVB8i7WQVjS9_DcSUCDVfGhOJVXgqL00c2Cc-0SoXCq-_4GgEC1v5YU4sM6u_qy4n8MZEtBITTBhB-7OyxXxw7Sg7fjqLOe8t2j/s400/OOMEBOOK.gif'/>
</div>

4. Untuk mengatur letak text, gambar dan link bisa rekan coba otak-atik sendiri pada kode CSS, terus terang setiap template tentu berbeda ukurannya, jadi saya sendiripun gak tau harus gimana menjelaskan cara mengaturnya.

5. Untuk mengatur delay pada slider, silahkan buka file slider.js kemudian tinggal ganti saja jumlah var delayLength = 4000; dengan angka berapa saja, mis 5000 atau 9000 (catatan: 1 detik = 1000)

Selamat mencoba dan berpusing ria :D

Thanks to : o-om.com