Membuat Kotak Gelap Terang Dengan CSS

Selamat sore sobat, Waduh berhubung ada request terpaksa deh ane share lagi sebuah tutorial hehehhe, Request ini berasal dari mas RB dalam Blognya http://xramabanten.blogspot.com  beliau request dalam sebuah artikel tentang Animation Sociall Share With CSS3 ini dia freviewnya :

Wah disebut bapak lagi, ehhehheh....
Untuk Demonya Agan Bisa lihat Kotak Widget yang ada di blog ini.

Baiklah guna menjawab requesnya ini dia tutornya:

1. Seperti biasa Login ke Akun Blogger sobat

2. Klik Template Klik Edit HTML

3. Jangan Lupa Centang Expand Widget Template

4. Cari kode ]]></b:skin> dan letakan kode CSS dibawah tepat diatas kode ]]></b:skin>

.joensbox {
  position:relative;
  display:block;
  width:220px;
  max-height:500px;
  background:#000000;
  color:#93F655;
  overflow:auto;
  padding:0 0;
  margin:3px 3px;
  border:2px solid #777;
  border-radius:6px;
  opacity:0.2;
  filter:alpha(opacity=20);
  transition:1s;
  -o-transition:1s;
  -moz-transition:1s;
  -webkit-transition:1s;
}

.joensbox:hover {
  opacity:1.0;
  filter:alpha(opacity=100);
}

5. Kemudain Klik Save
6. Untuk Pemasangan pada sidebar silakan gunakan kode :

<div class="joensbox">

Isi Dengan Konten Agan Disini/Kode Widgetnya

</div>

7. Klik Save Lagi gan.

Note :

width:220px;                     Untuk merubah Lebar Box
max-height:500px;           Untuk merubah Tinggi Box
background:#000000;      Untuk merubah Warna Background
color:#93F655;                 Untuk merubah Warna Efeknya

Untuk Kode warna Silakan Klik : DISINI

Ok Sekian Artikel sore ini semoga jawaban Reques ini dapat memuaskan Mas RB.