Membuat widget bisa ereksi untuk blog

Ada-ada saja ya,  orang menamakam widget bisa  ereksi segala, mungkin sudah habis fikir untuk membuat kata kunci untuk judul blog. Ko, bisa ya? suatu nama sebutan dari salah satu bagian organ di tubuh kita bisa, dan nama itu dapat  dikolaborasikan dengan organ di tubuh blog. Sebut saja  sebuah gadget dinamai widget bisa ereksi, mengapa saya menamakan widget bisa ereksi karena, widget ini sebelum disentuh oleh mouse atau (sentuh  saja pakai tangan secara tidak langsung) keadaan diam tanpa ada gerakkan tapi, setelah disentuh dengan mouse, widget ini tersembul perlahan-lahan membesar hingga pada ukuran yang telah ditentukan selama mouse itu menyentuh pada tubuh widget tersebut, dan jika dilepaskan! Dia langsung mengkerut dan mengecil menuju sarangnya kembali. Seperti apa sih benntuknya dari gadget tersebut?

  Kira-kira seperti pada gambar di bawah, sebelum di sentuh, diam pada tempatnya

Dan setalah disentuh, dia muncul perlahan-lahan menjadi besar karena sentuhan terjadilah ereksi pada gadget ini

 Gadget ini bisa diterapkan untuk blog Anda, jenis apapun bentuknya baik untuk Buku  Tamu, dan gadget lainnya yang ingi Anda simpan pada gadget tersebut.
 Baik kita lihat codenya seperti di bawah ini:

<style type='text/css'>

.fwidget{background:RED;border-radius:5px;bottom:-5px;box-shadow:0 0 5px #fff;color:#fff;float:left;height:25px;margin-left:95px;opacity:.8;overflow:hidden;padding:auto;position:fixed;text-shadow:0 0 5px yellow;width:90px;z-index:9;-o-transition:all 2s ease-in-out;-moz-transition:all 2s ease-in-out;-webkit-transition:all 2s ease-in-out}

.fwidget:hover{background:transparent;border:2px solid Yellow;box-shadow:0 0 15px Yellow;color:Red;height:450px;margin-left:20px;opacity:1;width:240px}

.fwidget-body{-o-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out}

.fwidget h3{cursor:point;font-size:13px;text-align:center}

</style>

<div class='fwidget'>

<h3>BUKU TAMU</h3>
<div class='fwidget-body'>

<center>

"LETAKKAN CODE ANDA DI SINI"

</center></div>

</div>

 Catatan:
Teks yang berwarna merah bisa Anda ganti dengan keinginan seperti "RED" ini adalah warna latar belakang pada judul gadget, lihat contoh gambar pertama di atas.

Dan yang berwna kuning ada dua macam seperti (border:2px solid Yellow ) dan (box-shadow:0 0 15px Yellow) bisa Anda ganti jika diinginkan tergantung warna latar belakang blog.

1. (border:2px solid Yellow ) untuk warna garis pinggir dari kolom gadget.
2. (box-shadow:0 0 15px Yellow) adalah warna untuk bayangan garis pinggir, jika menginginkan dengan warna lain, silakan diganti saja.

Sedangkan code color:Red  ini ada warna font setelah transisi dan untuk warna latar belakang setelah terbuka, disini  menggunakan transparent. Apabila Anda kurang puas dengan keterangan ini silakan bongkar pasang code-code nya

Untuk teks atau judul tampilan seperti BUKU TAMU, silakan diganti sesuai keinginan.

 Berikutnya seperti teks "LETAKKAN CODE ANDA DI SINI"ganti dengan teks kepunyaan Anda.

 Sedangkan untuk posisi Anda cukup merubah (float:left;height:25px;margin-) menjadi (float:right;height:25px;margin-)

Copy code di atas dan lanjutkan

Caranya: 

1. Login ke Blogger

2. Teruskan ke Dashboard

3. Lalu pilih Add a Gadget seperti gambar bawah:

dan pilih seperti gambar berikut di babawah

 lalu masukkan atau paste code tadi seperti pada gambar berikut di bawah

Klik Save.
 Lihat hasilnya....Selamat mencoba semoga berhasil,,,,,,, Terima kasih