Cara Membuat Effect Gelap Terang pada Widget

Membuat Effect Gelap Terang pada Widget ~ Setelah share sebuah tips untuk Mengetahui Type Cewek dari Tangisan, hari ini ARMAN BLOG akan share sebuah Blogger Tutorial nemu dari hasil blogwalking mengenai Membuat Effect Gelap Terang pada Widget yang mungkin akan cukup menarik buat kalian terapkan di blog kesayangan kalian. Katanya effect ini dibuat menggunakan Opacity Effect dan CSS3 Transition, disusun sehingga menghasilkan sebuah effect gelap pada sebuah widget di sidebar dan akan menjadi terang/jelas setelah kalian menyentuh widget tersebut dengan cursor kalian. Untuk lebih jelasnya silahkan kalian arahkan cursor kalian ke widget di bawah ini.

He...Bagaimana? Cukup menarik bukan?. Kalau kalian tertarik, silahkan ikuti langkah-langkah berikut.

1. Login ke akun blogger kalian, bisa klik Disini

2. Jika sudah, kalian klik Rancangan/Designe >> pilih Edit HTML

3. Cari kode ]]> , gunakan Ctrl+F untuk mempercepat pencarian kode

4. Setelah ketemu Copy kode di bawah ini dan paste di atas kode  ]]>

.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);

}

Keterangan :

- Nilai opacity menggunakan nilai dari 0 s/d 100.

- Nilai opacity menggunakan nilai dari 0 s/d 1.0

- Semakin kecil nilai opacity maka akan semakin gelap, demikian pula sebaliknya, semakin besar maka akan semakin terang/jelas. Silahkan kalian sesuaikan dengan keinginan.

5. Klik Simpan Template


Selanjutnya ke Widget/Gadget

1. Masih dalam tab Rancangan, silahkan kalian klik Elemen Laman

2. Kemudian klik Tambah Gadget/Widget dan copas kode di bawah ini ke kolom konten

<div class="boxwidget">

Kode Widget Kalian

</div>

Ketikan warna Hijau adalah kode untuk memanggil kode effect.
Ketikan warna Kuning  kalian ganti dengan kode widget kalian. 

3. Kalau sudah selesai, klik Simpan/Save dan lihat hasilnya.

Semoga apa yang saya dapat dari hasil blogwalking ini bermanfaat
Baca juga Blogger Tutorial lainnya Happy blogging....

Source http://fajar7siblings.blogspot.com/