Disclaimer Widget #2

Konnichiwa Minnasan! Watashiwa Agna!

~

So di kali ini Agna mau buat Disclaimer Widget Tuto #2 yang kaya Agna nih ini nih contohnya

 First buka http://htmledit.squarefree.com

 Copy Code Ini

<br /> <style type="text/css"> .outer { height:210px; width:210px; border:5px solid #2E2E2E; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #output { background-image: url(Url Background Kalian); background-position: 50% 50%; background-size: 223px; background-color: #FFFFFF; } .input { width:100%; height:95%; font:13px candara; color: #000000; text-align:center; padding-top:10px; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); background-image: url(Url Background Image Kalian 2); background-size:223px; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .outer:hover .input { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } </style> <center><div class="outer" id="output"><div class="input"> <div style="background:#EEEEEE;"> Status : Online <br /> Tulisanmu disni! <br /> <br /> ~Thankyou~ </div></div></div></center> <br /><center><form action="/search" id="searchThis" method="get" style="display: inline;"> <input id="searchBox" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="background:#D8D8D8; border-bottom-left-radius: 10px 10px;border-top-left-radius: 10px 10px;border: #6E6E6E solid 3px;color: #666666; font-size: 11px;font-family:century gothic; width:135px;padding:3px;padding-left:5px; " type="text" value="Enter some keyword" vinput="" /> <input id="searchButton" style="background:#FFF7F7;border-bottom-right-radius: 10px 10px;border-top-right-radius: 10px 10px; border: #848484 solid 3px;color: #444444; font-size: 11px;font-family:century gothic;padding:2px;width:50px;" type="submit" value="Search" /></form> </center><br />

 Background Image yang warna ungu yang akan menjadi thumbnail awal sebelum di hover

 Background image yang warna ungu tua ganti sama url foto yang mau saat setelah di hover

Untuk : Status, Tulisanmu disini, Thankyou~
Bisa diganti sesukamu