Tutorial : JavaScript Image Slider untuk Blogger

Hari ini Balqis nak kongsi Tutorial blog yang sangat menarik. Apa yang Balqis nak ajar ialah cara untuk membuat Image Slider. Ia mengandungi reben di bahagian atas sebelah kiri dan diberi nama "Whats Hot". Ia juga mempunyai slice effect yang sangat cool yang membelah image kepada 12 bahagian ketika sliding. Apa yang lebih menarik ialah, korang boleh mengubahnya mengikut kesukaan dan citarasa korang. Ini bermaksud, korang boleh edit mengikut kesesuaian blog korang. Image slider ini dibuat melalui menucool.com dan diubahsuai oleh BloggerHelper untuk berfungsi dengan sempurna dalam blogger blog.

Tutorial - JavaScript Image Slider untuk Blogger

Korang ikut Langkah2 ni:
1) Pergi ke Blogger Dashboard > Layout
2) Add New Gadget
3) Pilih HTML/JavaScript (Pastikan korang letak di bawah header)
4) Kemudian Paste Kod di bawah kedalamnya

Tutorial - JavaScript Image Slider untuk Blogger

Korang ikut Langkah2 ni:
1) Pergi ke Blogger Dashboard > Layout
2) Add New Gadget
3) Pilih HTML/JavaScript (Pastikan korang letak di bawah header)
4) Kemudian Paste Kod di bawah kedalamnya

 <style type="text/css">
/* JavaScript Image Slider By http://www.helperblogger.com/ */

#mcis {
 display: none;
}

#sliderFrame {
position: relative;
width: 500px;
margin: 0 auto;
border:5px solid #000;
}

#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: Url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF45dU0kV4FFJY_aYJkmyaeq0CpAvMCxC1TtWNMG94FDYs_DMz-n70SRoStp9DkxCCJ_qQtVMgDqbV5XEhYWtAQgWNd1MwnHoHksAVe99VZdRuHR48fuyNX0GU9PHZ9lZQzkMkLNjNchs/s1600/helperblogger.com-ribbon.png) no-repeat; z-index: 7;
}

#slider {
width: 500px;
height: 218px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYbCP3XREhA9wDXUARQ3ar19E0llMsoGRTnKm5z9KwOVtLakepm21rcFAMDCfXvJVNgyrqJLTGYpB0kY4UPotRv_1RS3hqwIipMGoAtqRRDSXvNWM4jGH69OULgQ0mB0C1oQX0s52Kgek/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}

#slider img {
position: absolute;
border: none;
display: none;
}

#slider a.imgLink {
z-index: 2;
display: none;
 position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}

div.mc-caption-bg {
background-color: black;
}

div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE; z-index: 4;
padding: 10px 0;
text-align: center;
}

div.mc-caption a {
color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
top: 250px;
left: 190px;
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}

div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs2vLKDXNVk0EueJBbV26tJ6mOSmCUZ2c6wgSvfkr_w9NM5vAKBEnrtZCESa8AUat_FHmDsw9kvW6TbdyJv3sQYgZytU50_BLkVRoYML_lZY1LEu-m5nb1hf1CuoE8ylgsYMijhUqSCx0/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px; _position: relative;
}

div.navBulletsWrapper div.active {
background-position: 0 -11px;
}

#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}

</style>

<script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">

<a href="http://burairabalqisfaiha.blogspot.com/">
<img alt="Image Slider By helperblogger.com" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSc_3gBWraPoUjlCfWgPP3oo2upfzavqpN0pSxs9nWeX8NVLUbm_iQ35DKJe3bZOjfH8t40tOo9gBLorNK8nhiS7uX2DlGBCRW5xoBUe020-A_S9Fvmcm68LnNhKvrpHphBoxomwsulbY/s1600/slider3.png" /></a>

<a href="http://burairabalqisfaiha.blogspot.com/">
<img alt="Image slider yang paling mudah digunakan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ4mw0t34uFbK1pXgDwfwEXfSWLDgkzeTiCXmbFk7l6l1p1gaAU9NJQFu0mj61siiXUkhBtR3cdb9iUN4lEtSbP02U7W687huPHa4Ckr-x1sN1ppMTzLWmdRpjWWCXa8ITba2lfr66w1Y/s1600/slider.png" /></a>

<a href="http://burairabalqisfaiha.blogspot.com/">
<img alt="Image akan berganti secara automatik" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip03sHNyhIvrIaKnm-PCQCjLCRZx78NnKSfbCg3eoQzzuGiovGaazGDZuM7DFagCOycOUOexITvb4jc84wa422UtRgZjwWbz005rU6qEihjMPoHlsdOphxnagrbsZqs_ApD5l7YZ5b9kQ/s1600/slider4.png" /></a>

<a href="http://burairabalqisfaiha.blogspot.com/">
<img alt="ia menggunakan Pure Javascript. No jQuery. No flash." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizreL6z5yCQKGmo4CO0BaeT-UEk8wEuMiRi9BGQ3NVmQ16qr_2sSjIC6Wz17w_jJZZXWAIrHhhOzmOXt2eUv7jUQKfvLBGdkksjD0OCEMVRa2I_3ad3nzeAnEkh5UJ-L3ytSZxOk4N4Tc/s1600/slider2.png" /></a>

<a href="http://burairabalqisfaiha.blogspot.com/"><img alt="Setiap image boleh diLink ke URL lain" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNQ_GMlyAmuI-F3A6Xc5PT2nx4pptD5euk0VlLG8UZqIyindTjuApnn_fi-FFyG-N92JeoLRGsWa4Ee8odZ2a5TRKzq3A8bC6iBza2zIRF5li7w5o5Yx37G8QpQYv_LUsxJXLm0t7M9U/s1600/slider5.png" /></a>

Perhatian : Sebelum korang menambahkan image ke dalam slider, pastikan image tu mempunyai saiz yang sama

Customization :

Width (Lebar) Of Slider
Set kelebaran image pada Width yang bewarna __

Height (Tinggi) Of Slider
Set ketinggian image pada Height yang bewarna __

Note: Pasikan Height & Width adalah sama dengan semua image yang digunakan.

URL Image
Tukarkan URL yang bewarna Hijau kepada URL Image korang

Caption (Penerangan) pada image
Letak Penerangan untuk gambar korang di bahagian yg bewarna Oren

Link pada Image
Tukarkan Link yang bewarna Merah kepada link yg korang nak tujukan apabila gambar diklik


Setelah siap customize, korang boleh lihat Preview blog korang. Kalau menjadi tekan Save.
*Sekiranya korang mempunyai kemahiran HTML, banyak lagi benda yang korang boleh edit*

Selamat Mencuba and Good Luck ^__^

Kepada yang berjaya tu, jangan lupa tinggal komen, yg gagal pun tinggalkan komen juga supaya Balqis boleh bantu :D

---

Sharing is caring ^_^

---