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.
- (border:2px solid Yellow ) untuk warna garis pinggir dari kolom gadget.
- (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
