Tutorial: Cara Membuat Slider

Saya nak sharing cara untuk membuat slider, sebenarnya dah lama nak bagi tutorial ni... tapi sebelum wat tutorial ada a few yang saya kena study... terutama tang kod2 tu...:)

Perasan kan kat blog saya tetiba ada slide show... itu sebenarnya sementara sahaja, saya lakukan eksperimen untuk tutorial ini ... dan bakal di remove la selepas ni... hehehe... mungkin buat masa ni slide show rasanya tak diperlukan lagi kot... hehehe

Ok ... Tutorial ni panjang sikit sila baca betul2 sebelum mencuba tutorial ni...

Tutorial ini adalah saya olah daripada Tutorial Almansuqie...kalau ada yang nak follow tutorial dia pun tak de masalah... sama je... cuma cara berbeza...:) kepada sesiapa yang berminat... sila ikut step dibawah dengan betul...

1. Log In @ Klik ke Dashboard > Layout > Edit HTML > Tick Expand Widget Templates [make sure anda backup dahulu template anda sebelum mulakan tutorial ini... kalau tak jadi sekurang-kurangnya template anda dah ada backup... ]

2. Cari code ]]></b:skin dengan menggunakan kotak find [Ctrl+F]

3. Copy dan paste code dibawah diatas atau sebelum code ]]></b:skin.

/* ----------------Slider---------- */
#slider {

background: #eee;

background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));

background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));

border: 1px solid #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 12px;
-moz-box-shadow: #600 0 2px 7px;

width:550px;

height: 250px;

overflow: hidden;
position: relative;
border:2px solid #eee;
margin: 0px;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width:550px /* Panjang Slider */;
float: left;
position: relative;
height:220px;/* Lebar Slider */
}
.slide h2 {/* Tajuk Post */
background:#eee;
border-bottom:3px solid #eee;
font-size: 20px;
font-family:Century Gothic,Arial, Lucida Grande, sans-serif;
text-transform:none;
color: #eee;
padding:0px 0px 0px 0px;
margin:-5px 0px;
width:550px;/* Panjang Tajuk Post Slider */
text-align:center;
overflow:hidden;
line-height:1.4em;
font-weight:bold;
}
.slide h2 a:link, .slide h2 a:visited {
color:#000;
background-color: transparent;
}
.slide h2 a:hover {
color: #eee;
background-color: transparent;
}
span.slmet {/* Petikan Post */
color:#ed217c;
font-size: 14px;
font-family:Century Gothic,Arial, Lucida Grande, sans-serif;
font-size:10px;
line-height: 20px;
width: 300px;
padding:5px 0px 0px 7px;
margin:0px 0px;
text-transform:uppercase;
font-weight:bold;
}
.slide p {/* Post By Disini */
text-align:justify;
color: #000;
font-family:Century Gothic,Arial, Lucida Grande, sans-serif;
font-size:14px;
line-height: 20px;
width: 330px;
padding:0px 0px 0px 7px;
margin:0px 0px;
}
.slide img {/* Gambar Pada Slider */
position: absolute;

width:130px;

height:170px;

top: 80px;
right: 63px;
background:transparent;
padding:0px;
border:0px solid #000;
}
#slider-stopper {/* Butang Stop */
background:#eee;
padding:5px;
position: absolute;
font-family:Century Gothic,Arial, Lucida Grande, sans-serif;

top: 85px;

right: 5px;

color: #000;
padding: 3px 8px;
font-size: 14px;
font-weight:bold;
text-transform: none;
z-index: 1000;
}

*Perkataan yang saya highlightkan dengan warna purple itu adalah untuk memudahkan lagi pemahaman anda tentang function untuk setiap code... di bawah ini adalah penerangan tentang code2 tersebut... saya hanya highlightkan yang mana penting sahaja... yang lain anda harus olah mengikut kreativiti anda...
*Bahagian yang berwarna merah ini, adalah warna untuk slider anda... anda boleh menukarnya dengan image ataupun menggunakan warna [iaitu coding sedia ada yang saya berikan] untuk penukaran warna... anda boleh rujuk kod warna html dan juga rgb disini
** Bahagian width dan height serta top dan right yang saya highlightkan adalah perlu diubah berdasarkan kesesuaian dengan saiz yang anda kehendaki...:) boleh try and error...
[Pada saya part itu yang paling penting... di kod yang lain2 anda boleh ubah mengikut kreativiti anda... hehehe kalau nak lagi senang... guna aje kod yang saya beri diatas... just tukar warna aje... kalau tak nak pening2 la...:p]

2. Copy dan pastekan javascript ini dibawah atau selepas code ]]></b:skin.

*Jika tiada kod ini, slider anda tidak akan bergerak ya...;)

3. Klik Page Element > Add a Gadget Javascript / HTML
[Saya menggunakan pendekatan yang berbeza dengan saudara Almasuqie ini... saya pastekan pada widget supaya tidak mengganggu appearance pada bahagian Design...]

4. Copy kod di bawah dan Pastekan kedalamnya

<div id='casing'>


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

</div>

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

*Pastikan pada tajuk anda tidak menaip2 apa perkataan dan terus save... kemudian... anda perlu drag widget HTML tersebut keatas bahagian post... seperti gambarajah dibawah...
[cara untuk drag adalah pastikan lambang anak panah 4 penjuru berada pada kotak widget dan hold mouse anda sehinggalah ke bahagian atas blog post, lepas apabila widget yang di drag betul2 lekat pada bahagian atas post]

**Terpulang kepada anda mahu letak dimana slider tersebut[ tetapi berdasarkan tutorial saya... saya prefer letak diatas blog post...
*** Dibawah ini adalah penerangan tentang kod2 ya... supaya anda lebih memahami terma2 yang diberikan...
a)Link-Artikel-Disini -link artikel/entry anda perlu paste disini.
b)Tajuk-Post-Disini - Tajuk yang anda ingin letak untuk entry tersebut
c) Posted by Author On Month - Day - Year - Taipkan nick name/nama anda disini dan juga tarikh entry berkenaan.
d) Potongan-Artikel-Disini - Keratan artikel/entry anda yang ingin anda letak pada slider untuk dijadikan sebagai intro dan menarik minat pembaca untuk membaca entry penuh...
e) Link-Gambar-Disini - Link gambar yang anda ingin letakkan pada post di slider anda...

[Harap penerangan yang saya berikan ini jelas...;)

5. Untuk menambahkan bilangan post, anda boleh menambah code dibawah sebelum atau diatas
</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>

6. Semasa proses untuk membuat tutorial ini, anda boleh sentiasa preview template anda untuk melihat hasilnya... dan jika semuanya anda sudah berpuas hati... boleh save...dan enjoy your slider...:)

Kredit Kepada : Almansuqie

Berdasarkan eksperimen saya... ada a few kelemahan dan cara mengatasinya bagi penggunaan slider ini.
1. Slider ini tak boleh bertahan lama... mungkin selepas beberapa ketika ia akan berhenti untuk beroperasi, cara mengatasinya adalah anda perlu meminimumkan bilangan post pada slider [letak yang mana penting aje...;)]
2. Saya nasihatkan anda tidak menggunakan slider yang lebih besar kerana ini akan membuatkan template anda akan mengalami lambat untuk load.
3. Anda perlu upload gambar [bagi mendapatkan url ] yang anda ingin masukkan pada post di Imageshack [recomended] kerana bila saya cuba upload di blogger slider tidak dapat detect image yang saya link kan...

setakat ini itu sahaja result dari eksperimen saya...;p

Selamat mencuba...dan semoga berjaya...dan jangan lupa tinggalkan komen ya..;)