.
Home » » membuat lightbox dengan opacity

membuat lightbox dengan opacity

Written By Admin on Jumat, 02 Desember 2011 | 12:45 AM

Lightbox ini berfungsi menggelapkan widget dan ketika disorot mouse widget itu akan terang kembali seperti semula. 
Di bawah ini adalah contoh kode sebuah box yang telah dilengkapi dengan efek opacity, CSS3 transition dan beberapa kode lain.

.boxwidget {
      height: 250px;
      overflow: auto;
      margin: 20px 4px 10px;   
      padding: 15px 8px;
      background: #111;
      color: #666; 
      border: 2px solid #555;
      border-radius: 6px;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
      opacity: 0.4;
      filter:alpha(opacity=40);
     -o-transition: all ease-in 1.2s;
     -moz-transition: all ease-in 1.2s;
     -webkit-transition: all ease-in 1.2s;
}
.boxwidget:hover {
      background: #660000;
      color: #eee;
      opacity: 1.0;
      filter: alpha(opacity=100);
}



1. Caranya masuk akun blogger 
2. pilih rancangan 
3. lalu masuk menu Edit HTML
4. Cari kode ]]></b:skin> caranya tekan CTRL+F
Simpan kode CSS tadi di atas kode ]]></b:skin>


    Untuk menggunakan box tersebut, Sobat blogger mania  harus menggunakan kode xHTML seperti di bawah ini:
    - Pilih rancangan
    - Pilih menu elemen laman
    - Tambah gadget, pilih html/java script
    - masukkan kode berikut

    <div class="boxwidget"> Di sini widget atau Teks diletakkan </div> -Selesai *Catatan Ganti tulisan Di sini widget atau Teks diletakkan sesuai kode widget yang Anda punya Semoga berhasil kawan
    Share this article :

    0 komentar:

    Posting Komentar

    Terimakasih telah membaca artikel ini, komentar Anda sangat membantu blog ini :)

    Komentar Blogger Sejati

    Saya adalah

    Foto saya
    Bekasi, Jawa Barat, Indonesia
    Rizky Gunawan, Seorang yang lagi belajar menulis dan berbisnis online (Inernet Marketing) lahir di Rawa Panjang, Bekasi.
     
    Support : Rizkygunawan1@gmail.com | Facebook | Twitter
    Copyright © 2011. Rizgun(dot)com - All Rights Reserved
    Template Modify by Rizgun Blog
    Proudly powered by Blogger