Template Feature
2 Navigation Bar1 Featured Content section
1 Twitter Update section
1 Featured Video section
4 Ads Space
2 Sidebar Gadget section
4 Footer Gadget section
Bagaimana Cara Menampilkannya ?
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='http://3.bp.blogspot.com/_C6KkooKXCEw/SY3GV8q05zI/AAAAAAAAD1U/VBYwePMjR2M/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='http://bp3.blogger.com/_C6KkooKXCEw/SJGvo0XtZtI/AAAAAAAACGI/21ih9Mj5e6c/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; }
<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='http://3.bp.blogspot.com/_C6KkooKXCEw/SY3GV8q05zI/AAAAAAAAD1U/VBYwePMjR2M/s400/Kampanye+Damai+Pemilu+Indonesia+2009.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)
source: BloggerStyles.com & o-om.com
