Premium Themes Blogger

/* Slider Code
-------------------- */
#slider {
background:url(http://i33.tinypic.com/2l8hgi.jpg);
height: 229px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 900px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 18px;
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: #DF0101;
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: #fff;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
text-align: justify;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 600px;
background:#fff;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: trebuchet;
top: 100px;
right: 50px;
color: #0B610B;
padding: 3px 12px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}

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

<div id='header-wrapper'>
..........
.........
</b:section>

<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<span class='slmet'> Posted by Download Disini </span>
<h2><a href='http://freedownloadcopasthemes.blogspot.com/2011/01/membuat-menu-navigasi-horisontal-dan.html'>Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog</a></h2>
<p>Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu, kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun</p>
<img alt='Tutorial Blog' src='http://i34.tinypic.com/v83g3d.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Download Disini </span>
<h2><a href='http://freedownloadcopasthemes.blogspot.com/2010/12/blog-spam-hati-hati-dengan-blog-anda.html'>Blog SPAM, Hati-Hati Dengan Blog Anda</a></h2>
<p>Kita akan tetap menulis dan menulis terus setiap ada ide baru. So, seperti kata mas doyok sebaiknya kita berkonsentrasi posting ketimbang sibuk marah-marah dan menggerutu tentang kelakuan blogger lain. Saya lebih setuju kepada mas o-om atau i-raka yang memberikan tips-tips agar blog kita tidak dianggap spam daripada menulis artikel tentang larangan keras mengkopi paste artikelnya (hal itu susah dilakukan mas, ya seperti pemerintah melarang keras pembajakan kaset atau CD di negara kita ini).</p>
<img alt='Blog Spam' src='http://i34.tinypic.com/33kx84w.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Download Disini </span>
<h2><a href='http://freedownloadcopasthemes.blogspot.com/2011/01/widget-yang-harus-dimiliki-suatu-blog.html'>Widget yang Harus Dimiliki Suatu Blog</a></h2>
<p>eman-teman blogger pasti menginginkan blog yang dibuat tampil dengan performa maksimal, dengan desain yang mantab dan bisa menarik pengunjung. Namun, apakah desain atau tampilan blog yang anda pakai sehat untuk blog anda? Karena ada banyak widget yang mengandung banyak kerusakan atau error yang mungkin anda tidak tahu. Nah, kalau begitu, apa saja widget yang seharusnya ada dalam blog anda agar blog anda tetap bagus dan sehat? Mari kita lihat satu persatu:</p>
<img alt='tutorial blog' src='http://i33.tinypic.com/2whm22w.jpg'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>

1. Pemanggilan kode JavaScript di atas, masih berasal dari situs bloggerstyles.com dan anda bisa meng-hosting javascript tersebut di tempat hosting yang biasa anda pakai. Silahkan download semua kode javascript di sini, dan hosting di tempat hosting javascript yang bisa digunakan.
2. Background image pada slider di atas mungkin tidak sesuai dengan template anda. Sebaiknya diperkecil saja atau mungkin anda harus membuat background baru dan sesuaikan dengan ukuran dan lebar template anda. Bagian tersebut adalah ini :

   #slider {
   background:url(http://i33.tinypic.com/2l8hgi.jpg);
   height: 229px;
   overflow: hidden;
   position: relative;
   margin: 5px 0;
   }

3. Nah, pada contoh slider di atas, saya menyertakan link dan teks dari blog ini. Jadi, silahkan mengganti link, teks dan gambar (image) buatan sendiri, sesuaikan dengan kebutuhan. Bagian tersebut adalah seperti ini :

   <div class='slide'>

   <span class='slmet'> Posted by Download Disini </span>

   <h2><a href='http://freedownloadcopasthemes.blogspot.com/2010/12/blog-spam-hati-hati-dengan-blog-anda.html'>Blog SPAM, Hati-Hati Dengan Blog Anda</a></h2>

   <p>Kita akan tetap menulis dan menulis terus setiap ada ide baru. So, seperti kata mas doyok sebaiknya kita berkonsentrasi posting ketimbang sibuk marah-marah dan menggerutu tentang kelakuan blogger lain. Saya lebih setuju kepada mas o-om atau i-raka yang memberikan tips-tips agar blog kita tidak dianggap spam daripada menulis artikel tentang larangan keras mengkopi paste artikelnya (hal itu susah dilakukan mas, ya seperti pemerintah melarang keras pembajakan kaset atau CD di negara kita ini). </p>

   <img alt='Blog Spam' src='http://i34.tinypic.com/33kx84w.jpg'/>
   

   </div>

4. Untuk mengatur letak text, gambar dan link, anda bisa mengutak-atik sendiri pada kode CSS. Yang pasti, setiap template punya ukuran lebar yang mungkin berbeda. Terus terang saya juga bingung untuk menjelaskannya, karena penerapan slider di blog ini pun butuh percobaan yang berulang-ulang agar benar-benar pas. So, trial and error aja dulu.
5. Untuk mengatur delay pada slider, silahkan buka file slider.js kemudian tinggal ganti saja jumlah var delayLength = 4000; dengan angka berapa saja, misalnya 5000 atau 9000 (catatan: 1 detik = 1000).