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.

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post