Posted by AlmansuQie™

Emoticon Di Post Entry

Emoticon Yahoo! Messenger..Sebenarnya dah ramai yang buat tutorial ni.. Ana tulis balik untuk simpanan peribadi..Ok untuk yang ini, caranya begini..

Posted by AlmansuQie™

Blogspot Dengan Gaya Wordpress

Pernah tengokkan wordpress?? Kali ini kita buat template kita macam wordpress skit. Kita main sorok-sorok widget.

Posted by AlmansuQie™

Cara Membuat Favicon

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

Posted by AlmansuQie™

Membuat Label Flash (Blogumus)

Ha tutorial ni Ana ambil dari Blogger Buster. Cantik kalau dapat buat label macam ni..Ini untuk simpanan Ana, kalau Antum minat boleh ikut tutorial ni..

Posted by AlmansuQie™

The Cutest Blog On The Block

Teringin untuk menggunakan transparent background macam ini??Menarik kan?? Ada bayak lagi..Boleh dapatkannya di LamanIni. Untuk menampalnya di blog senang saja.

Posted by AlmansuQie™

Cara Membuat Menu Tab View

Apakah makhluk yang bernama Menu Tab View ni?. Boleh tengok sebelah kanan blog ni. Ana isikan dengan tips2/artikel2 di dalamnya. Kotak menu ni sangat berguna.

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!

Tips² Terkait



18 Komentar:

kembara April 29, 2009 at 5:48 PM  

salam..
yes..yes..dan yes..tenkiu sifuu..
cayalah...hehehe..yang dinanti sudah muncul..ahaks

kembara April 29, 2009 at 6:23 PM  

huhu..tapi maybe template ana xjadik..xtest lagi buat ni..lps exam la gane2 pun..hehe..jgn marah aa...;)

AlmansuQie™ April 29, 2009 at 7:19 PM  

xpe...ana rasa seme template jadi..cuma beza nak letakkan kod dibahagian mn..

pape pun imtihan dulu ek.. ;)

Mohd Al-Amin Daud May 6, 2009 at 12:25 AM  

Salam,,

Syeikh kalau blog ana dah ada cuma ana nak wat banyak dan gerak2 mcmn ek..enta leh tengok blog ana..Syukran..

Mohd Al-Amin Daud May 6, 2009 at 12:27 AM  

satu lagi..mcmn nak bg keluar avatar kat komen ni..hehehe..

AlmansuQie™ May 6, 2009 at 2:05 AM  

Wassalam..
Blog enta punya slide tu lain skit..kod pun lain, xdapat nak dikenalpasti. tp rubbama caranya sama, cuma lain nama dan kod.

pasal avatar ni nati ana watkan tutorialnya.

Cikgu Dee May 13, 2009 at 4:40 AM  

Salam...ana punyer kuar errorlah..
cam nih..(Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "). Nape ek?Tq

AlmansuQie™ May 13, 2009 at 10:41 PM  

oooooo..ade silap sikit cikgu,,ana dah betulkan kod div tu lupa nak ditutup..

bintu hassan,  May 15, 2009 at 8:00 AM  

hurm..dah cuba dah..dah jadi dah..tapi nak ubah size tak reti plak..kalau ada cara kaler2 yang mane boleh tukar tu ok gak...

anakraja July 18, 2009 at 1:06 AM  

Salam..

Macamana ana nakbuat kat wordpress ha? Tips2 yang anta bagi semua best2 tapi ana tak dapat guna.. Bagi lah tips2 untuk wordpres pulak..terutama bab slider ni.. T.Kasih

X-Maahad Muar

fabrie August 27, 2009 at 8:50 AM  

bgmn cara mengatasi tajuk dan gambar bergerak tidak beraturan saat sudah ada diisi tajuk dan gambar?

ALAM October 7, 2009 at 7:54 AM  

SALAM tok guru tumpang bertanya saya dah buat dan jadi tapi masalahnya dia keluar dekat footer bukan kat atas. Kod no-3 ada dua dalam templete saya nak paste kat mana satu?
TQ

Musafir October 31, 2009 at 8:14 PM  

salamun alaik..
ana nk tanya ni,ana punya template dh ada add widgest kt atasnya,sesuai utk ltk slide..tp ana lbh suka slide sprti anta, ana ingin tambah slide mcm anta buat,tp ana risau akan jd double slides pulak.. :((

Masyukmaun November 25, 2009 at 7:00 PM  

salam... sila layari http://masyukmaun.blogspot.com sebagai contoh slider utk blog anda. tq... :D

shine February 16, 2010 at 6:20 AM  

wah...sungguh elok, saye lah lame nyari2 yg cemni...

DaWia HoNeypUtRi October 2, 2010 at 4:26 AM  
This comment has been removed by the author.
Pink Diva December 23, 2010 at 10:41 AM  

Wow!
This is the "slider" which I been looking for.
there for help with a bloggers,
but stingy ilmu pula ..
Luckily I found in this blog.
Its work, just a little bit to edit .
thank you for sharing these tips..:)

Post a Comment

1. Berilah Teguran/Komen Walau Sepatah Kata..
2. Komenlah Dengan Nama dan Blog Sendiri
3. Boleh Guna Kod² Seperti Ini <b>, <i>, <a>

© Hak Cipta Terpelihara 2008 [:: AlmansuQie ::]
http://almansuqie-tips.blogspot.com
Template Designed By: AlmansuQie™

Paparan Lebih Kemas Dengan Firefox