mitrabaraya online
Mitra Baraya Online Mode Using CSS3

Blogger jaringan pemberdayaan usaha sosial dan Pendidikan!
Geolkeun mouse alo-alo jeung sok..lah wilujeng!

Copyright 2010 mitrabarayaonline.blogspot.com - All rights reserved

Sabtu, 05 Juli 2014

Slider Ngagunakeun Fade Effect Transition

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;

Cara ngajieun gambar geser slideshow

  • Kaos Sunda: Édisi Angklung (Hideung)

    Slide 1

    Bahan: Combed Cotton 20s Sablon: Plastisol Harga: Rp. 80.000,- (teu acan kalebet ongkos kintun) Gerai: Warung Rancabanyol, Pasar Modern Batununggal Blok D18-03, Bandung (buka tabuh 10.00 - 16.00 WIB). Kontak pesenan online: Tlp./SMS/WhatsApp: 0896 7110 2034 PIN BBM: 76B0DB73 (Kaos dikintun nganggo ekspedisi JNE)

    Readmore
  • Kaos Baraya Banyolan Sunda

    Slide 3

    Bahan: Combed Cotton 24s Sablon: Plastisol Harga: Rp. 80.000,- (teu acan kalebet ongkos kintun) Gerai: Warung Rancabanyol, Pasar Modern Batununggal Blok D18-03, Bandung (buka tabuh 10.00 - 16.00 WIB). Kontak pesenan online: Tlp./SMS/WhatsApp: 0896 7110 2034 PIN BBM: 76B0DB73 (Kaos dikintun nganggo ekspedisi JNE)

    Readmore
  • Kaos Baraya Banyolan Sunda

    Slide 3

    Bahan: Combed Cotton 24s Sablon: Plastisol Harga: Rp. 80.000,- (teu acan kalebet ongkos kintun) Gerai: Warung Rancabanyol, Pasar Modern Batununggal Blok D18-03, Bandung (buka tabuh 10.00 - 16.00 WIB). Kontak pesenan online: Tlp./SMS/WhatsApp: 0896 7110 2034 PIN BBM: 76B0DB73 (Kaos dikintun nganggo ekspedisi JNE)

    Readmore
  • Kaos Édisi Bandung (Hideung)

    Slide 3

    Bahan: Combed Cotton 20s Sablon: Plastisol Harga: Rp. 80.000,- (teu acan kalebet ongkos kintun) Gerai: Warung Rancabanyol, Pasar Modern Batununggal Blok D18-03, Bandung (buka tabuh 10.00 - 16.00 WIB). Kontak pesenan online: Tlp./SMS/WhatsApp: 0896 7110 2034 PIN BBM: 76B0DB73 (Kaos dikintun nganggo ekspedisi JNE)

    Readmore
  • Kaos Édisi Baju Lebaran (Biru Kolot).

    Slide 3

    Bahan: Combed Cotton 20s Sablon: Plastisol Harga: Rp. 80.000,- (teu acan kalebet ongkos kintun) Gerai: Warung Rancabanyol, Pasar Modern Batununggal Blok D18-03, Bandung (buka tabuh 10.00 - 16.00 WIB). Kontak pesenan online: Tlp./SMS/WhatsApp: 0896 7110 2034 PIN BBM: 76B0DB73 (Kaos dikintun nganggo ekspedisi JNE)

    Readmore

Lamun alo kaasup salah sahiji blogger anu tos ngagunakeun jQuery kanggo sababaraha blog,nambahan gambar geser slideshow ieu moal nambahan beurat teuing loading margi javascript anu dipake hanteu loba. Sababaraha kode css saleresna diperlukeun nanging iyeu oge moal seueur teuing boga pangaruh ka blog. Makena ti eta tangtos bade ngajieun blog nambahan alus tur merenah di tingalina.

Keur Alo-alo anu tacan ngagunakeun jQuery,lamun mimiti ayeuna Alo mecakan make ngagunakeun,Kuring jamin yen Alo moal hanjakal saetikeutik acan.. margi seueur keneh perkawis anu sanes masihan pangrojong ka tampilan blog tiasa didamel kalawan ngamangpaatkeun jquery. Nya ... sarta ieu anu peryogi! Dina hiji blog/web ngan diperlukeun 1 jquery (jquery v.1.3.2 s/ v.1.7.1),samentara keur ngajieun sagala rupi desain anu matak pikabitaeun script anu hante loba (jquery plugns).

Cara ngajieun gambar geser slideshow ieu Alo ngan saukur perlu noel ka mitrabarayaonline margi sadaya tutorial cara ngajieunna aya diditu. Sok wae atuh klik link di handap ieu keur balik ka tutorial atawa ngajieun gambar geser slideshow.