Memasang 'Slider Ala Zinmag Primus'.

Memasang 'Slider Ala Zinmag Primus Template'

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.

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

}

7. Cari kod ini sekali lagi.

]]></b:skin>

8. Copy kod di bawah dan letakkan di bawah kod tadi.

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

9. Cari kod ini.

<div id='header-wrapper'>

..........

.........

</b:section>

10. Langkah terakhir copy kod di bawah dan letakkan di bawah kod tadi.

<!-- Casing -->

<div id='casing'>

<!-- Slider -->

<div id='slider'>

<div id='mover'>

<div class='slide'>

<h2><a href='http://syamzone-bloguntukaku.blogspot.com/search/label/tok%20wan%20aku%20memang%20blues'>Tok Wan Aku Memang Blues.</a></h2>

<p>29/4/2009.....Ari ni seperti biasa aku melakukan aktiviti bulanan iaitu melakukan marathon untuk mengupdate kepala otak aku dengan perkembangan atau perubahan yang berlaku di sekitar Kuala Lumpur dan Selangor.... Biasanya aku buat aktiviti bulanan ni naik motor atau kereta ....Tapi semalam saja nak try buat perubahan naik Monorel, LRT, Putra dan Komuter.....Mungkin aktiviti yang aku buat ni macam tak berfaedah....</p>

<img height='140' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC6EVd3QGYAeiPGQtL5DY22b34QDCao9DauSDtPEoohBJNf9xBmutgEu5n-TYVQAVgmVX3OUl8fM5yr8sX3EHKN_rCa9S2vj1CRD_hAtwYAvo66QKEkLwyaT-Rl8d19LQHSQrvF5y4g7XO/s320/leon-mandrake-magician.jpg' width='200'/>

</div> <div class='slide'>

<h2><a href='http://syamzone-bloguntukaku.blogspot.com/search/label/young%20and%20dangerous'>Young And Dangerous.</a></h2>

<p>Selepas lebih kurang 2 jam melepak dekat kedai mamak di sulami dengan sembang-menyembang yg agak merapu dan tidak berfaedah,aku dan beberapa org teman-temanku mula berasa bosan dan sedar bahawa perkara yg kami lakukan itu tidak berfaedah dan sama-sekali tidak bermanafaat langsung...Kami mula bertukar-tukar idea dan pendapat tentang ke mana arah tuju seterusnya,setelah mendapat persetujuan dari semua pihak kami semua bersepakat untuk pergi ke Uptown Damansara Utama (Uptown lama dh x de pun sekarang....</p>

<img height='140' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYC7vpflCX0yLePFHWmiIAH_eH7icebAkvd9nh4-eDWupQzs7TNngU828mvViDEfnWZh5szneszSC4xRbOL15DqTggj5t7XLSG-DLxq2sCtRySFIZG8v3NFT_F5XwNWc6c5BWoHhickqvr/s320/LANUN+KOTA.JPG' width='200'/>

</div> </div>

<!-- /Mover -->

</div>

<!-- /Slider -->

</div>

<div class='clear'/>

Perhatian !!! Gantikan text/kod yang berwarna merah.Untuk mengubah saiz image tukarkan text/kod yang berwarna biru.

Sumber LoveYuliana