Slider Ngagunakeun Fade Effect Transition

Image-1Image-2Image-3

Slider Ngagunakeun fade effect transition ieu ngagunakeun hiji javascript anu basajan pisan. Slider memuat 3 buah image kalawan hiji background image anu bade katembong ngan di wanci gallery dibuka. Background image dipidangkeun dina wangun transparan ngaliwatan opacity effect. Dibalik background image diajak oge hiji background animasi gif anu boga fungsi midamel efek caang-poek dugi kawas anu ngabogaan effek caang poek nyaeta image dina slider.

Javascript :

<script type="text/javascript">
//<![CDATA[
function MBS_MB_kicp(id, opacStart, opacEnd, millisec) {
    var speed = Math.round(millisec / 25);
    var timer = 0;
    if (opacStart > opacEnd) {
        for (i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    } else if (opacStart < opacEnd) {
        for (i = opacStart; i <= opacEnd; i++) {
            setTimeout("changeOpac(" + i + ",'" + id + "')", (timer * speed));
            timer++;
        }
    }
}
function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}
function MBS_MB_kicp(divid, imageid, imagefile, millisec) {
    var speed = Math.round(millisec / 25);
    var timer = 0;
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
    changeOpac(0, imageid);
    document.getElementById(imageid).src = imagefile;
    for (i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "')", (timer * speed));
        timer++;
    }
}
//]]>
</script>

Kode CSS :

span.sakadaekwe{width:60px;display:inline-block;padding:4px 6px;background:#333 url(https://sites.google.com/site/mitrabarayaonline/bg/textbg.png);color:#f00;margin:0 0 6px 1px;border:2px solid #777;border-right:2px solid #888;text-align:center;}
span.sakadaekwe:hover{background:#900;color:#fff;}

xHTML :

<div style="float:left;background:#333;padding:4px;margin:5px 15px 5px 0;border-radius:4px;">
<a href="javascript:MBS_MB_kicp('pics','MBS_MB_kicp', 'https://lh3.googleusercontent.com/-1pzYmCc0ls4/UorGoj9p70I/AAAAAAAADOk/AOXdBz2IEPw/h340/2.jpg',500)"><span class="sakadaekwe">Image-1</span></a><a href="javascript:MBS_MB_kicp('pics','MBS_MB_kicp', 'https://lh5.googleusercontent.com/-Df3wSPwd60I/UnqaJ0OmTaI/AAAAAAAADNU/vOGsZ9hLz4I/h340/bo.jpg',500)"><span class="sakadaekwe">Image-2</span></a><a href="javascript:MBS_MB_kicp('pics','MBS_MB_kicp', 'https://lh6.googleusercontent.com/-jMswE0E2s9Q/U1hUWzLDLrI/AAAAAAAADcE/CZ9k-st_cjY/h420/kaos+distro+Bandung.jpg',500)"><span class="sakadaekwe">Image-3</span></a>
<div id="pics" style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguszoq5e63ZAgMF88cP0V-SMQZTmyLWsg8qNlDSTSDNp7gxswD84dI5UHBkWnsAlnVKQJpx3WxY-Mwfw9F1MrroO3dhuMCVtyGD6loH7UkUWoNnL-vUuMtud6qZT2PatLgkYuf7FlF5guO/h340/poek_caang-80x10.gif);border:4px ridge orange;width:224px;">
<img style="filter:alpha(opacity=70);opacity:0.7;" id="MBS_MB_kicp" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl4qWNrMWKWG0KPs5CG3gi_rr62WeAOr5vVrW1QvfxHBEDcGqLM6txVx1RevfIf758OC7P0bdWWicc7frlk56LKv51JI3heQhAxvFeG3EYH1c2bgNnHHczkQbKWekS6NXhyphenhyphenqkGx_5FGRjK/h340/nonxx.jpg"/>
</div>
</div>

Carana ngajieun :

1. Login ke Blogger.
   
   • Tuliskeun "User Name" (gmail) atawa tuliskeun " Email Address " (non gmail).
   • Tuliskeun Password.
   • Klik "Sign in"
2. Sanggeus klik sign in Alo-alo pasti manggihan halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Balikdeui ka halaman anyar pasti kabuka, klik "Edit HTML".
4. Aya hiji halaman anu anyar anu dibuka tadi. Halaman ieu eusina 3 (tilu) bagian:
   
   • Backup/Restore Template » eusina fitur keur ngalakukeun backup template.
     Sok wae backup template tiap bade ngalakukeun tambahan atawa kurangan kode (xhtml,kode CSS sarta javascript) ngagunakeun "Box Edit Template".
   • Edit Template » eusina hiji box gede anu di dijero eusina kode html susunan blog.
   • Old Templates » eusina template lila blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy javascript jeun tempelkeun di handap ]]></b:skin>
7. Copy kode CSS jeung tempelkeun di luhur ]]></b:skin>
8. Klik "Simpen Template (Save Template)".
9. Gunakeun xHTML di box posting atawa "Add a Gadget | HTML/Javascript".

Katerangan/Catetan :

1. Gunakeun image ukuran anu sarua. Lebar image 224px.
2. Lamun arek ngarobah image, robah oge lebar image dina xHTML:
   width:224px;
3. Posisina gambar atawa image slider bisa diatur ngan saukur ngarobah nilaina margin dina xHTML :
   margin:5px 15px 5px 0;