Cara Cantikkan Kotak Search

Sebuah blog  bersama sebuah kotak search boleh menyebabkan si penulis dan si pembaca senang hati. Walau kotak search ni kecik je tapi besar jasanya pada sesebuah blog kerana ia akan membantu si pembaca dan si penulis mencari entry lama dengan lebih cepat dan senang.

Tapi nampaknya masih ramai yang tak nak letak kotak search di blog, mungkin kerana designnya yang tak menarik kot...

Mulai hari ni jangan lagi guna alasan tak menarik sebabnya sis akan berikan 5 jenis design kotak search yang boleh di letakkan di blog masing-masing dengan cepat dan mudah.

Nak ke tak nak? Nak atau tidak sis tetap share semua design kat sini dan kalau ada guna bolehlah tinggalkan komen di bawah tu ya, at least dapatlah sis jalan-jalan ke blog awak semua.

DESIGN #1

<center><style type="text/css">
#searchbox{width:240px}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnCjtLVY7mTruqwI31yXNgeTLNL-Tu2MgfZ8yStcWEFvZoqjq1d_jeej71kufyMEV92tAMzsMrJFIqsjOXfvRiUmT9fFvlKo62D8Jmf3061-fxi1XyWXJNrA9s3IB4luOUTILWdiLh-KAa/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s;}#searchbox input[type="text"]:focus{background:#f7f7f7;border:2px solid #f7f7f7;width:250px;padding-left:10px}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1EQuhgrU8nxfMuANvynk-R46SLuFKHw5EJP8Afj5kvjsBq3LxApiHWdMBzLKUd6_rldoKjeDc3vD2Rx22_XhDRAA1tuSzpBL0c-y4Uh_f49uYrtRHjaoypqp903VPe0sP4ogMiXIlBl4C/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/></form></center>

DESIGN #2

<center><style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLsMbCu_9qfBAddP7PD4YbqR_GF_1izfstTjg-YhWvmik_8Suiy4iua6z4rAx2c8aM6gYxixcjWdzBFdTUEKVw_2LuVLOPIVlpyQrlEpwLJ3wD6N119D5wIOYdpawAOz7p19m665KTtbjX/s1600/searchbar.png) no-repeat;width:208px;height:29px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;margin:3px 0 0 20px;padding:5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRghgudvCJdoxNugNqfLO4KIfIhhFsIRz-dH0UoT6Y4rmxj7IXlYMpiNFTGbQg8df-pQnGhGIwmyuPAf0e0VayZyGomHuMuocteZONwJZmlrxTPNg85L7aChGt4li4tWL3pHG-0WKCtSlT/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU9hxIGp0xYTijrVwntiFuZ7VQtvH-6mXEadQze3jPU1moLUHOtFQI-_HjqHlNAI3kGHycmY-Wwq4BUrx5H1v13neLZbZvJBaWF0Fyk3Pdj98amiZmjhcdDGmthEPPtzIaG7E4PlxCu2-F/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU9hxIGp0xYTijrVwntiFuZ7VQtvH-6mXEadQze3jPU1moLUHOtFQI-_HjqHlNAI3kGHycmY-Wwq4BUrx5H1v13neLZbZvJBaWF0Fyk3Pdj98amiZmjhcdDGmthEPPtzIaG7E4PlxCu2-F/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form></center>

DESIGN #3

<search><style type="text/css">
#searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:250px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnCjtLVY7mTruqwI31yXNgeTLNL-Tu2MgfZ8yStcWEFvZoqjq1d_jeej71kufyMEV92tAMzsMrJFIqsjOXfvRiUmT9fFvlKo62D8Jmf3061-fxi1XyWXJNrA9s3IB4luOUTILWdiLh-KAa/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}#button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}#button-submit:hover{background:#4f5356}#button-submit:active{background:#5b5d60;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" /></form></center>

DESIGN #4 

<center><style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNKEIZsLz4EYUJ62cinctRbrOBALsFi7bOkqtuOWWvvyt8EUb2gsehSwf11ePpPAocRT06lWpCpFYi-X4tMJ4Zsi-asrhOyzT3CIQTcmZjTNekJ2de4wDG5toole1FkD67jlkjAncXBZNy/s1600/search-box1.png) no-repeat;width:250px;height:65px}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input{outline:none}#searchbox input[type="text"]{background:transparent;padding:2px 0 2px 20px;margin:10px 15px 0 0;border-width:0;font:bold 16px "Brush Script MT",cursive;color:#595959;width:65%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguZFh1ZW-47cDzx6z8tktpGsu4UXj6cTTsLtNOFNi71VuSLHOQLvsP1CtvS5Va2HK8FtnunTr3mqAg5oLQViSl90gYLoACKvdhcLU3tgnIyNO5Fk7YF5N2zsNEPFd7h5SsTe6TsdMfRnAy/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-top:10px;width:19px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1j22bKhAjE3K46jlJNbvgDXZurwFsRtxtz5PxKEfRNFilkEumW1Ljpknay1wfoW1oc5rRDXEn2urksKP3BU5mweSaibgpzqGlqOcSUJIEPtcY_8in5As5p2SPTVCvKJR-ivn_RJ7lUzJj/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1j22bKhAjE3K46jlJNbvgDXZurwFsRtxtz5PxKEfRNFilkEumW1Ljpknay1wfoW1oc5rRDXEn2urksKP3BU5mweSaibgpzqGlqOcSUJIEPtcY_8in5As5p2SPTVCvKJR-ivn_RJ7lUzJj/s1600/magnifier-hover.png) no-repeat;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input class="textarea" name="q" type="text" size="15" placeholder="Search here..." /><input id="button-submit" type="submit" value="" /></form></center>

Cara Masukkan Ke Blog
1. Login ke Dashboard > klik Layout > Add a gadget  > Html/Javascript
2. Copy kod design yang awak suka dan pastekan ke dalam kotak Html/javascript tadi.
Save dan siap!!

Okay, selamat mencuba....