screenshot.10 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


18 comments:

  1. Memang menarik sekali.. Nanti aku minta satu

    ReplyDelete
  2. berat tak blog klu letak mende ni..? ko cuba la letak kat blog ni.. hehe..

    ReplyDelete
  3. x berat pun tp tgk jgk kalau blog terlalu byk script mgkn berta sikit kot..blog aku ni x sesuai ltk benda tu.

    ReplyDelete
  4. bagus tutorial nie..
    nanti nak torai lah..

    ReplyDelete
  5. takleh nak tgok cth sbb bkn invited reader...huhu

    ReplyDelete
  6. la ye ke naddy..nanti aku open ye

    ReplyDelete
  7. x jadi kexpe cuba lg gagal skali bkn utk slamanya haha

    ReplyDelete
  8. Ariey, Sory ya , aku g terlalu ngerti bahasa nya, comment aja terus gak pa2x kan?

    Mampir lg ya
    Salam
    Indonesia Jaya

    ReplyDelete
  9. gak apa2 lama2 kamu bisa ngerti hehe..ya salam jg dari malaysia

    ReplyDelete
  10. silakan gaunayu tidak perlu minta izin:)

    ReplyDelete
  11. saya mau tahu codenya diletakkan dimana ya? maklum newbie

    ReplyDelete
  12. bagus juga kayaknya tuh slidenya, di cobak dulu ya gann.. semoga berhasil ni blog ane..

    ReplyDelete
  13. kayak mana mengatur ukuran slidenya ya mas.?

    ReplyDelete

Sila tinggalkan komen ada dibawah ini dan yang berkenaan dengan post sahaja dan semua komen akan ditapis dahulu sebelum ditampilkan.