Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Image Selector dengan Effect Transisi Opacity

Bentuk penggabungan dari backckground image yang berupa animasi gif dipadukan dengan effect transisi gambar menggunakan javascript yang memanfaatkan opacity akhirnya menghasilkan sebuah effect yang fantantis dari sebuah image selector. Effect transisi setiap pergantian image juga bisa di atur sehingga bisa dilakukan perubahan oleh pengguna hanya melalui perubahan kecil yang dilakukan di ruang posting. Dengan kata lain ; tidak perlu repot-repot selalu mengobrak-abrik javascriptnya! Keuntungan penggunaan javascript "bgsGRmultifungsi.js" ini adalah bisa digunakan untuk menciptakan effect image dalam bentuk yang lain dengan tetap mengacu pada fungsi opacity.

D E M O

Javascript :
<script type="text/javascript">
//<![CDATA[
function BGS_GR_blor(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 BGS_GR_blor(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.controllmu{width:60px;display:inline-block;padding:4px 6px;background:#333 url(http://www.abchoes.com/images/textbg.png);color:#f00;margin:0 0 6px 1px;border:2px solid #777;border-right:2px solid #888;text-align:center;}
span.controllmu:hover{background:#900;color:#fff;}

Javascript :
<div style="float:left;background:#333;padding:4px;margin:5px 15px 5px 0;border-radius:4px;">
<a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'image-01.jpg',500)"><span class="controllmu">Image-1</span></a><a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'image-02.jpg',500)"><span class="controllmu">Image-2</span></a><a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'image-03.jpg',500)"><span class="controllmu">Image-3</span></a>
<div id="pics" style="background:url(https://lh4.googleusercontent.com/-Stz6oRyVlgA/T2z8v9rMwdI/AAAAAAAAAfg/LWZluvASP-8/h340/anima-80x10.gif);border:4px ridge orange;width:223px;">
<img style="filter:alpha(opacity=70);opacity:0.7;" id="BGS_GR_blor" src="image-04.jpg"/>
</div>
</div>

Cara membuat Image Selector :
  1. Login ke Blogger.
  2. Dasbor : Klik "Rancangan (Design)".
  3. Klik "Edit HTML".
  4. Lakukan "Backup Template"
  5. Cari kode ]]></b:skin>, kemudian copy dan pastekan kode CSS di atasnya.
  6. Copy dan pastekan javascript di bawah ]]></b:skin>
  7. Klik "Simpan Template/Save Template".
  8. Gunakan xHTML di box posting atau "Add a Gadget » HTML/Javascript".
  9. Selesai!
Catatan/Keterangan :
  1. image-01.jpg s/d image-04.jpg » height=224px
  2. Panduan lengkap tentang cara menyimpan javascript, kode css dan xHTML serta cara backup template dan cara cepat mencari kode dapat dibuka di Special Tutorials (menu sebelah kiri halaman).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:



Update »Setu PAHING, Maret, 24, 2012

» Happy Blogging - gubhugreyot «

Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

 
GR | Edited by | gubhug reyot