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 :

css, kotak gelap terang, kotak

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.

Berlangganan update artikel terbaru via email:

11 Responses to "Membuat Kotak Gelap Terang Dengan CSS"

  1. alhamdulillah .. mksh pak atas jwbannya mau langsung dipakai nich salam persaudaraan

    ReplyDelete
    Replies
    1. Sama2 mas, jangan pak dong kan masih muda heheeee,,,,,
      monggo mas silakan...... iya mas salam silaturahmi

      Delete
  2. hehe,,, iya mas.. mksh,, dah langsung dipasang mas..
    kreen abiz.. o ia facebook blm berteman sm saya

    ReplyDelete
  3. Wah...mantap sekali mas. ntar saya coba dulu. oh iya mas, utk tab view kok ndak bisa sama dgn punya mas joens yah?

    ReplyDelete
    Replies
    1. Miss Indah thank atas kunjungannya...!!!
      silakan miss, Untuk Tab Viewnya Silakan edit aja triknya sama ko, untuk judul ane pake Caractermap kode segitiganya tinggal di kopi aja.

      Delete
  4. Follower #38 sudah broo..
    follow balik ya??
    http://d-feri.blogspot.com/ :)

    ReplyDelete
  5. jozz gan,BLOG MENJADI HEMAT ENERGI WKWKWKWKWK ^_^

    SALAM KENAL WWW.WAHANA-KOM.BLOGSPOT.COM

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel