Memasang Slider Ala Zinmag Primus Template
Ternyata banyak juga rekan yang ingin mencoba memasang Image Slider/Text Slider ala template Zinmag Primus, Slider yang sudah aku terapkan sendiri di o-om.com ini ternyata selain menciptakan tampilan blog lebih atraktif dan bergaya, sumbangan kunjungan pribadi melalui slider ternyata tidak sedikit jumlahnya. Ok, pribadi kecara pasangnya saja ya lagi rada malas nih banyak cuap2 hehehe.
Letakan isyarat CSS dibawah ini diatas isyarat ]]></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 isyarat javascript dibawah ini dibawah isyarat ]]></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 cari isyarat dibawah ini:
<div id='header-wrapper'>
..........
.........
</b:section>
Letakan isyarat dibawah ini dibawah isyarat 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=' /search?q=e-book-kiat-sukses-promosi-blog'>eBOOK Kiat Sukses Promosi Blog</a></h2>
<p>Kontes seo "kampanye tenang pemilu indonesia 2009" tinggal menghitung hari..10 hari ini aku mencoba sekuat apa efek backlink pada keyword..kalo ada yang mau bantu dukung om dapat memasang link ini di blog masing2. Silahkan copy-paste isyarat dibawah, thanks banget atas dukunganya :).</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4edEQa24Z42sLswW7wGL7kj1ByuKQnpj4wm9fr9nq9bCtqp_mZwNnApe_hsvPiQ9FcCiWmOKhOUth7xTvD0niBN7CQzcl4AW9VqdS7STJfHRNf-7XMdaBsKh_7kPuChJu-UZlggfpmQTK/s400/Kampanye+Damai+Pemilu+Indonesia+2009.gif'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Agus ramadhani </span>
<h2><a href=' /search?q=e-book-kiat-sukses-promosi-blog'>Kampanye Damai Pemilu Indonesia 2009</a></h2>
<p>Dalam buku elektornik ini anda juga akan menemukan kiat sukses dan point penting dalam acara promosi blog serta bagaimana sopan santun promosi yang terkandung didalamnya. Untuk kedepan eBook ini tidak aku gratiskan lagi dan tentu saja materinya lebih berbobot dari Free Edition. Makara segera download dan pastikan anda pertama yang membacanya.</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAtJFRu-tg1APvUafog6Km5Y3S1sjt1ppeAmAyNV4_sTAtGdH0JcAh9d3Ip2HvpPKmNwOnwehQGBY7zzZ1Zk-aVQX14IVtNCZ3S7cqrFWHZvd3z9lsTLrqkAQnlcxieXrlWKzgdF-Db1Iw/s400/OOMEBOOK.gif'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>
Sampai disini semua proses penyimpanan isyarat berakhir. Sekarang lihat saja hasilnya.
Apa saja yang perlu diedit?
1. Karena file javascript diatas meminjam pribadi dari alamat lain, jadi aku 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 ketika ini, jadi mau tidak mau harus memperkecil ukurannya atau sebaiknya buat saja gambar gres 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 isyarat di atas, pola slider yang tampil hanya sebagai sample saja, jadi silahkan dihapus link, text dan gambar milik aku dan ubahlah gambar, link dan kalimatnya sesuai kebutuhan.
<div class='slide'>
<span class='slmet'> Posted by Agus ramadhani </span>
<h2><a href=' /search?q=e-book-kiat-sukses-promosi-blog'>Kampanye Damai Pemilu Indonesia 2009</a></h2>
<p>Dalam buku elektornik ini anda juga akan menemukan kiat sukses dan point penting dalam acara promosi blog serta bagaimana sopan santun promosi yang terkandung didalamnya. Untuk kedepan eBook ini tidak aku gratiskan lagi dan tentu saja materinya lebih berbobot dari Free Edition. Makara segera download dan pastikan anda pertama yang membacanya.</p>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAtJFRu-tg1APvUafog6Km5Y3S1sjt1ppeAmAyNV4_sTAtGdH0JcAh9d3Ip2HvpPKmNwOnwehQGBY7zzZ1Zk-aVQX14IVtNCZ3S7cqrFWHZvd3z9lsTLrqkAQnlcxieXrlWKzgdF-Db1Iw/s400/OOMEBOOK.gif'/>
</div>
4. Untuk mengatur letak text, gambar dan link dapat rekan coba otak-atik sendiri pada isyarat CSS, terus terang setiap template tentu berbeda ukurannya, jadi aku 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
Belum ada Komentar untuk "Memasang Slider Ala Zinmag Primus Template"
Posting Komentar