Konsep CSS Floating Dalam Bentuk Hide dan Show Sebuah Widget

Cara memunculkan atau sembunyikan sebuah widget di blog bukanlah hal yang sulit, kita hanya perlu sedikit memahami css dan buatlah sebuah konsep yang kita mau. Selain itu widget ini tentu bisa menghemat ruang blog Anda. Meski cara kerja mengandalkan transition, yang tentu tidak sebagus jquery, namun yang jelas sama sekali tidak terpengaruh terhadap loading.

Live Demo

Untuk CSS simpan diatas ]]></b:skin>

.leowidget {
   background:#48d;
   border-radius:2px;
   top:-5px;
   box-shadow:0 0 5px #fff;
   color:#fff;
   float:left;
   height:17px;
   margin-left:125px;
   opacity:.8;
   overflow:hidden;
   padding:6px 10px;
   position:fixed;
   width:120px;
   z-index:9;
   transition:all 1s ease-in-out
}

.leowidget:hover {
   background:#00ffff;
   box-shadow:0 3px 3px 1px #777;
   color:#000;
   height:220px; /* -- Sesuaikan tinggi yang Anda mau disini -- */
   margin-left:20px;
   opacity:1;
   width:340px; /* -- Sebuaikan lebar yang Anda mau disini -- */
}

.leowidget-body{
   margin-top:10px;
   transition:all 1s ease-in-out
}

.leowidget h3{
   cursor:pointer;
   font-size:14px;
   text-align:center
}

Untuk kode pemanggil silakan tambahkan widget yang Anda mau dan simpan di bagi add/gadget

<div class='leowidget'>
<h3>Me Video</h3>
<div class='leowidget-body'>
<center>
Widget simpan disini...
</center>
</div>
</div>

Selanjutkan lihat hasilnya.

Bagi anda yang kesulitan untuk instalasi template, saya ada buka jasa desain dengan harga terjangkau, klik disini

Share thisPlus this