Memasang Slider ala Template Zinmag Primus

Slider ala template Zinmag Primus patut jadi pertimbangan jika blog anda pengen terlihat menarik dan atraktif. Tulisan dan gambar yang bergerak bergantian bisa menambah daya tarik tersendiri bagi pengunjung blog. Slider seperti yang terpasang di template Zinmag Primus ini sudah pernah dibahas oleh O-om, tetapi disini saya coba jabarkan yang sudah saya modifikasi sendiri dan menurut saya lebih mudah, hehe..Contohnya seperti di pojok

bagian kanan atas tuh... Kita langsung saja ya??
Sebelumnya download dulu template anda sebagai backup

1. masuk ke halaman Layout, pilih Edit HTML
    letakkan 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;}

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

3. Kemudian SAVE TEMPLATE
4. Setelah itu tambahkan widget HTML/Javascript, lalu didalamnya tambahkan kode dibawah ini:

<!-- Slider -->

<div id='slider'>

<div id='mover'>

<div class='slide'>

<span class='slmet'> Posted by opang </span><p><a href='http://celotehopang.blogspot.com/search/label/tempat%20wisata'>Referensi Tempat Wisata Menarik</a></p>

<p>Jika anda ingin mengetahui tempat wisata yang menarik, mungkin anda bisa dapatkan disini. Ikuti ulasan perjalanan saya di beberapa tempat wisata yang pernah saya kunjungi..^_^V</p>

<img alt="" src="http://i46.tinypic.com/2eefoz6.jpg" />

</div>

<div class='slide'>

<span class='slmet'> Posted by opang </span>

<p><a href='http://celotehopang.blogspot.com/search/label/tips%20dan%20trik'>Tips dan Trik Dunia Blog</a></p>

<p>Dapatkan Tips dan Trik seputar blog disini, semua saya coba rangkum dalam bahasa yang mudah di mengerti. Khususnya untuk anda yang masih baru di dunia per-blog-ingan, semoga artikel-artikel yang ada ini dapat bermanfaat untuk anda.</p>

<img alt="" src="http://i46.tinypic.com/1zf5269.jpg" />

</div>

</div>

<!-- /Mover -->

</div>

<!-- /Slider -->

kemudian lihat hasilnya..
Untuk mengedit tulisannya silahkan buka kode yang ada di widget HTML/Javascript tadi:
Tulisan dengan warna hijau silahkan diganti dengan link judul postingan
Tulisan dengan warna kuning silahkan diganti Judul yang diinginkan
Tulisan dengan warna merah silahkan diganti dengan tulisan anda sendiri
Tulisan dengan warna biru silahkan diganti dengan link gambar diinginkan

OKE, gampang kan??
Selamat mencoba ya...

Semoga bermanfaat...^_^