Ternyata banyak juga rekan yang ingin mencoba memasang Image Slider/Text
Slider ala template
Zinmag Primus, Slider yang sudah saya terapkan sendiri di
o-om.com ini ternyata selain membuat
tampilan blog lebih atraktif dan bergaya, sumbangan kunjungan langsung melalui
slider ternyata tidak sedikit jumlahnya. Ok, langsung kecara pasangnya saja ya
lagi rada malas nih banyak cuap2 hehehe.
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
]]></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 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/AVvXsEhRmNw8gYcVKNfBYHCjQG6Itx2cXPYRzS1BDtbBpF_I74ngO8kWofw0M97XYMd494tkaHpCeNQyZLcCSiz4qDyR41dzBMkJ3gvXfvbvbNrMwi_9J-EG1PEXryPE4r9bA_4bLkHRJ0ZUWH-2/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/AVvXsEgfuD9Kfh_j7xRKsZon8gZS35aPyReDRqzDrriZk5A_cu9XwWE9vzczv0RCLpVE_f7z11ydG6jqXtPm5VID_C8LsXU24DF0_Uw_4Ci4m_SWxG_jZhXgjJVsWechtSi7UTv6k6fZyjr1BAvk/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/AVvXsEgfuD9Kfh_j7xRKsZon8gZS35aPyReDRqzDrriZk5A_cu9XwWE9vzczv0RCLpVE_f7z11ydG6jqXtPm5VID_C8LsXU24DF0_Uw_4Ci4m_SWxG_jZhXgjJVsWechtSi7UTv6k6fZyjr1BAvk/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
Tidak ada komentar:
Posting Komentar