Cara Membuat Widget Ber-Effect Gelap Terang

Assalamualaikum Wa.Wb ... pada hari ini admin ingin berbagi sesuatu pada teman chayoy semuanya yang pastinya yang saya bagikan ini juga sudah banyak yang bahasnya terlebih dahulu,tapi gak masalah juga kan kalau saya juga ikut berbagi....hehehe.

Maksud dari judul di atas yaitu bagaimana membuat widget yang kita pasang pada blog mempunyai effect dalam artian disini,ketika kita mengarahkan cursor ke suatu widget maka widget tersebut akan menjadi lebih terang dari yang sebelumnya dan ketika cursor kita jauhkan dari widget maka widget kita tadi pelan-pelan akan meredup cahayanya....

Itensitas cahaya yang kita inginkan juga bisa di  atur nantinnya sesuai selera masing-masing.Effect yang kita berikan pada widget kita ini tidak akan memperlambat loading blog kita,karena ini hanya sebatas effect(ketika di sorot bercahaya dan ketika tidak di  sorot meredup)... jadi tidak perlu kwatir kalau blognya akan lemot sebab setahu saya yanng menyebabkan suatu blog menjadi lambat loadingnya adalah terlalu banyaknnya widget yang di pasang pada blog...

Dari pada berlama-lama lagi langsung saja ke TKP ya teman chayoy sekalian...

1. Login Ke akun Blogger.
2. Jika Sudah klik Rancangan/Design setelah itu pilih edit  Html
3. Cari kode ]]></b:skin> ,Gunakan Ctrl+F untuk mempermudah pencarian.
4. Setelah ketemu lalu teman copy kode di bawah ini dan paste kan di  atas kode ]]></b:skin> tadi...
   
   

   .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.
   
   
5. Klik Simpan Template

Selanjutnya kita terbang ke widget alias berpindah ke widget...hohoho.

1. Masih dalam Tab rancangan kita tadi ,silakan teman klik elemen laman/tata letak
2. Kemudian klik tambah gadget/widget.
3. Setelah muncul layar gadget nya copas kode di bawah ini ...
   
   

   <div class="boxwidget">
   Kode Widget Kalian
   </div>

   
   
   ketikan warna hijau adalah kode untuk memanggil kode effectnya
   ketikan warna merah adalah tempat untuk meletakkan script widget teman chayoy
   
   
4. Kalau sudah selesai klik simpan or save ...

Semoga apa yang saya share hari ini bisa bermamfaat bagi teman blogger semuanya,kalau ada yang salah mohon di maklumi dan di sarankan karena saya masih dalam tahap berlajar juga...terima kasih. Assalamualikum Wa.Wb

Share :