Cara memasang Slider seperti Zinmag Primus template

Adakah anda mahukan slider seperti Zinmag Primus Template berada didalam blog anda?Cuba anda lihat disini untuk melihat contoh slider yang aku maksudkan itu.

Anda nampak tak gambar yang bergerak-gerak itu?.Itulah yang dinamakan slider yang diambil dari Zinmag Primus Template.Tetapi untuk sesetengah template mungkin lebar slider ini terlalu besar atau kecil jadi anda perlu mengubah lebarnya itu.Jika anda berminat untuk meletakkannya didalam blog anda bolehlah ikuti caranya untuk membuatnya dibawah.

1.Cari kode ini ]]></b:skin> dan letakkan kode dibawah ini diatas kode ]]></b:skin> tadi.

#slider {
background:url(http://i530.photobucket.com/albums/dd350/dadumerah79/tryslider.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: 22px;
color: #A04075;
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: #A04075;
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: 10px;
color: #A04075;
padding: 3px 8px;
font-size: 13px;
text-transform: uppercase;
z-index: 1000;
}

2.Kemudian letakkan kode javascript ini dibawah ]]></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 cari kode ini <div id='content-wrapper'>

P/S: sesetengah template mungkin berlainan kode <div id='content-wrapper'> ini jadi anda perlu kode yang bersesuaian untuk meletakkan kode slide itu.Contohnya mungkin ada yg begini <div id='header-wrapper'>

kemudian anda copy kode dibawah ini dan letakkan dibawah kode <div id='content-wrapper'> .

<!-- Slider -->
<div id='slider'>
<div id='mover'>

<div class='slide'>
<h2><a href='#' title='Superbowl'>Superbowl</a></h2>
<span class='slmet'> Posted by Ariey On December - 1 - 2008 </span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. ...</p>
<img alt='' height='120' src='http://web2feel.com/monezine/wp content/uploads/2008/12/stad.jpg width='250'/>

</div>
<div class='slide'>
<h2><a href='#' title='Bond with a vengeance'>Bond with a vengeance</a></h2>
<span class='slmet'> Posted by Ariey On December - 1 - 2008 </span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. ...</p>
<img alt='' height='120' src='http://web2feel.com/monezine/wp-content/uploads/2008/12/bond.jpg width='250'/>
</div>

</div>
</div>
</div>
<div class='clear'/>

4.Selesai.Semoga berjaya. Jika sesiapa yang mahukan template yang aku dah edit ini anda boleh contact aku ye isikan contact me form itu.Jika anda masalah untuk memasangnya jangan berasa segan silu untuk bertanya.

P/s:Apa yang perlu diubah

Lebar slider

#slider {
background:url(http://i530.photobucket.com/albums/dd350/dadumerah79/tryslider.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}

Creadit To: O-om.com