Slider ala Zinmag Primus Template

Hari ade kesempatan nak buat tulis tutorial pasal ni. Sebenarnya slider ni Ana ambil dan edit dari template Zinmag Primus ini. Terjumpa template ini dan dihiasi dengan slider yang menarik. Dah lama mencari akhirnya jumpa jugak. Terima kasih pada Theme Author: Jinsona Design.

Ok ini caranya..Sebelum tu Ana nak kasi tau, maby sesetengah template xsesuai dengan tuturial ni, so kene pandai² sendiri la. Ana akan letakkan kod² asal dari template Zinmag dan sedikit tambahan.

1. Masukkan kode rss ini sebelum 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; /* Panjang Slider */
float: left;
position: relative;
height:200px; /* Lebar Slider */
}

.slide h2 { /* Tajuk Post */
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px; /* Panjang Tajuk Post Slider */
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 { /* Petikan Post */
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 { /* Post By Disini */
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 { /* Gambar Pada Slider */
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}

#slider-stopper { /* Butang Stop */
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 masukkan javascript 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'/>

3. Kemudian cari kode dibawah ini:

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

4. Tambahkan kode berikut dibawahnya.

<!-- Casing -->
<div id='casing'>

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

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>

5. Selesai proses penambahan kode.

Tambahan:

1. Perhatikan text² yang berwarna dan ikut saje arahannya.

2. Slider ini berukuran panjang 1000px. Tukarkan mengikut kesesuaian template Antum. Boleh edit di bahagian kode css atau pada step pertama.

3. Kalau nak tambah bilangan post, tambahkan saja kod dibawah sebelum </div>
<!-- /Mover -->

<div class='slide'>
<h2><a href='Link-Artikel-Disini' title='Tajuk-Post-Disini'>Tajuk-Post-Disini</a></h2>
<span class='slmet'> Posted by Author On Month - Day - Year </span>
<p>Potongan-Artikel-Disini</p>
<img alt='' src='Link-Gambar-Disini'/>
</div>

4. Kalau ade yang kurang jelas sila tinggalkan komen dibawah yer. Jangan malu bertanya..

Ok... Selamat Mencuba!

Cara Menukar Icon Pada Address Bar

Assalamualaikum..ok..Kalau kita buka sesuatu website atau blog maka kekadang kita tengok ada gambar atau icon pada address bar (kat tempat alamat url tu). Contohnya disebelah alamat Ana ada icon greenstar dan jika di Blogspot maka icon default yang akan timbul adalah gambar seperti ini : Ini namanya "Favorite Icon/Favicon"

Kalau rasa nak tukar dengan icon/gambar yang kita inginkan, caranya sangat mudah, cuma dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira-kira 50x50 pixel (sebenarnya tiada ukuran yang tepat, cuma kita nakkan file yang lebih kecil dan cepat dibuka). ok .....next masuk ke "Layout => Edit HTML" pastu copy kode dibawah dan pastekan sebelum kode</head>

<link href='http://almansuqie-tips.com/starstar21.gif' rel='SHORTCUT ICON'/>

Tukar text yang ditebalkan dengan warna biru dengan link gambar/icon yang sudah Antum uploadkan. Ana biasa upload di Photobucket dan juga di Imageshack..Kalau Antum nak upload kat tempat lain pun boleh. Asalkan dapat link gambar tu.

ok setle...Selamat mencuba!!