Tutorial - JavaScript Image Slider untuk Blogger

Tweet

Hari ini Khai nak kongsi Tutorial blog yang sangat menarik. Apa yang Khai 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. Korang boleh Klik Sini ataupun image di atas untuk melihat preview ^_^

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/AVvXsEhLibFLnQcYZd7sb6MqGD7ocaaNh12bVj8Q6ICxfpT2cH8gZxIcvilPNxdKjtcMNOrZRAsIlCi_S9eQxeHLOxuUXZm76uJLxxbwoiwJUjMkstyp7P4chxj6cQHTKk13jZdHzgd7MVeOxwA/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/AVvXsEg53eKK26rqaAR2zDI9TpQCOcq30vghUsfRIJ1ucyOs7SfB-AVol11K8WBHZyCVBzWT8mHkgFh4m1BTs_FrFjb1Lg-1RSa364UCstnsIOBoxlz3gS5JMPMUO96qP4-Ri33at70NSWi7Qb4/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/AVvXsEi23gZegSSvqCfR71fG6CV-vjdaSxDMLzCGfgJJ5eX1SG-fHEWc5hLoIAyHSQavfhFuM6MNOrq6QzoK7cfv8DcH8E9CRaTV7m0hx7E0tyO6lhIUasVaZOgZzCrxgWSY-00CIhLPQMQLvlc/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://www.khaiangel.com/">
<img alt="Image Slider By helperblogger.com" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3YOBHA000cLpNBMqjHXB6cZpYrNeCkUqwtevIDOVQyvsrVKCJ8Z15Yiq6aan1E5goAqQcSlcHf74OLnov6kY2PWXN7VTEc5hpo2PIUy3bxmrT4lt_4m1RfjOKzL0qlp189RwRWAKVoBA/s1600/slider3.png" /></a>

<a href="http://www.khaiangel.com/">
<img alt="Image slider yang paling mudah digunakan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT6j-cn2Cgp73Z6TdJkGcjtW-qLEiomYwN7axtTZTl4Rqdr6jsTSonm6clZFcodDfu4_f5sh1Zg9TcUpWS_A3V3GLOKiTxWyce5kH5CqTbyoToAp4pDoLMcKQi8c7eaiy9qSF_v2dPxc4/s1600/slider.png" /></a>

<a href="http://www.khaiangel.com/">
<img alt="Image akan berganti secara automatik" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilcveXe9fsJhsi8IcnyEsJOZ7a5ZoTmta8fdppwmks3gCqBn797j1hXuprdMQEkZjuUujBttevBdFb7z3OzGLQ4Qbt201_LSRtxOL_8qCqP2kaEqfVBVb3QPsAZUE-Tsj8_1M9cx_OzA/s1600/slider4.png" /></a>

<a href="http://www.khaiangel.com/">
<img alt="ia menggunakan Pure Javascript. No jQuery. No flash." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuu8nDfntHu-N9wfL-WRqQUkBTNBzr1ahOcf_L4-H_ET4AMAaQkmWpDPbz2cYZtnPAzrJlNE5s16E3rBiZvi3-gCVMRFILuAzi8Aoh2bGNzeLrOP3zTBN9U-qnnevXuOedqa81l0Kdmug/s1600/slider2.png" /></a>

<a href="http://www.khaiangel.com/"><img alt="Setiap image boleh diLink ke URL lain" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOMvICFt0kS_WchAC7-ZhRMmth9KCpI7TBFeei6NQWtT2_2Jb3vWmDob6bEyTJKGcswfYCtcBkXRkB2lyXmCbI3I6bELJJX52TNfmfVs8oM2ye5AOR9qzeZLdc8r3RcHli7htEZGZjDiU/s1600/slider5.png" /></a>
</div></div>

Perhatian : Sebelum korang menambahkan image kedalam slider, pastikan image tu mempunyai sais 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 kesemua 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 Kuning kepada link yg korang nak tujukan apabila gambar diklik


Setelah siap customize, korang boleh lihat Preview blog korang. Kalau menjadi tekan Save.
*Sekiranya korang mempenyai 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 Khai boleh bantu :D


Peace~


Tags: Tutorial - JavaScript Image Slider untuk Blogger, Gambar sliding, Gambar bergerak pada Blog, Sliding Effect Pada Gambar
Credits: BloggerHelper.com