Website zawng zawng hian Search Box hi chu kan nei deuh vek ti ila a sual lemlo ang. Kan hmang dan, design, style te pawh hi a in anglo bawk ang, a chhanchu mahni duhdan in custom Search box hi kan vuah vek a. Amah Google blogger ah hian wedget a chhawmsa bawka, mahse simple tak leh nalh lemlo tak ani.
Search Box hian website design bakah blog tlawhtu tan en ati nuama, a tulna tam tak a awm ang. Tichuan, custom Search box hian blog tlawhtu te hnen ah tangkaina tam tak a pe a, keimah ni ngei hnen ah pawh min pe bawk. Label, Pages te kan nei deuh vek anga, kan posts a zir khan kanlo thliar hrang ta a. Mahse, chumi a posts a tam em vang chuan kan duh ber posts kanla zawng hmu chuanglo anih chuan, Search Box ah hian kan zawng mai a, kan website a awm zawng chu awlsam takin kan Words leh phrase zawng kha a rawn lang vek ani.
Step 2. "HTML/JavaScript" tih kha click la, tichuan a hnuai a Code ah hian i duh ang ber khan Copy/Paste ang che.
Step 3. Tichuan, i Save anga, i zo ani mai.
Search Box hian website design bakah blog tlawhtu tan en ati nuama, a tulna tam tak a awm ang. Tichuan, custom Search box hian blog tlawhtu te hnen ah tangkaina tam tak a pe a, keimah ni ngei hnen ah pawh min pe bawk. Label, Pages te kan nei deuh vek anga, kan posts a zir khan kanlo thliar hrang ta a. Mahse, chumi a posts a tam em vang chuan kan duh ber posts kanla zawng hmu chuanglo anih chuan, Search Box ah hian kan zawng mai a, kan website a awm zawng chu awlsam takin kan Words leh phrase zawng kha a rawn lang vek ani.
Add Custom Search Box to Blogger
Step 1. I Blogger dashboard tang khan Layout ah click la, "Add a Gadget" ah click la.Step 2. "HTML/JavaScript" tih kha click la, tichuan a hnuai a Code ah hian i duh ang ber khan Copy/Paste ang che.
Step 3. Tichuan, i Save anga, i zo ani mai.
Custom Search Box Codes
Heng a hnuaia Code te hi han en la, pictures atang hian ama code i duh ber i thlang anga, a chuanga Gadgets a dah dan ang sawn i dah lut dawn nia.<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/AVvXsEifvtVcYZOCplG4TzkQ4A-sgEiJZahDFJ96KG2ptPZ2qvOxf7Qs0iNiIs6fvr-oryK0zri8A6KqjvvFLokJX7pEYxW0RNqMZR5rlcZWdDQK_mO7231XO3ERQp-ZTCiJkT54RJF_YhTRPBwT/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>
************************
<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/AVvXsEifvtVcYZOCplG4TzkQ4A-sgEiJZahDFJ96KG2ptPZ2qvOxf7Qs0iNiIs6fvr-oryK0zri8A6KqjvvFLokJX7pEYxW0RNqMZR5rlcZWdDQK_mO7231XO3ERQp-ZTCiJkT54RJF_YhTRPBwT/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:200px;padding-left:10px}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJMM7zMY0WHlc5RYNuNvifNGb0Yce3EycUAFDXRETg6Z6b9sk0I9oqS6CAPOyH-AYKPtWybA80DswZdOmcmshaJ0WcDU1UmENOffJlhzaUyG8AdvQZGt7tdL2p_g_971NHXLnkrqw5pJ1A/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>
************************
<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrVaHdfoaoaRbKzACAsjaRDYq3gksLGySUAVUM-yc1xGLH0aFU1wjGtC7cutXH0v2CS8jSsDQjEfAFBml1pFLVKFMzpAIyty8A7xIA86NtgfLbIxbz54gzHE1dQ6KU78mv92ebekry8B3v/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/AVvXsEhcSU3Q0VbYeF-ZYPiZ-jH-xwMUt3VwkFFL9shzPXEZDRp0nHc9Sp7Sqq8sVmXG3QVZef5nNEGWp8KQ-b8TILzjb18QRqhPwxoTM3Q5yfGOpeLTt7EiOOZagsrrQ6HkTSdPV5gqCJ-8UH77/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/AVvXsEi2lntXw9idW9SbCOH1EjtOALCIyd-alvGMcATlNKw9-MBU6mkoOlPMFv6v_4k_8aW0cz7OYomjeC4pdqsl5Yy68vukarkoYtfaf2tYSOPMSaYObf6i_yiHvZOjCtrhr53iOJncfc9pdGP9/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2lntXw9idW9SbCOH1EjtOALCIyd-alvGMcATlNKw9-MBU6mkoOlPMFv6v_4k_8aW0cz7OYomjeC4pdqsl5Yy68vukarkoYtfaf2tYSOPMSaYObf6i_yiHvZOjCtrhr53iOJncfc9pdGP9/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>
************************
<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidCXjqCTfesah6nieIFhKh_463lyolLM1HKX29BrCenNCFvqCmQRSU3ISMmtf45LOBJfECJClE9kQzL-cH-MqWZTXNRzQ4WlLQYJGk8eqvZKDVcKfSqlsbirkrtKzk-xP1yPCvk5-yZ4RJ/s1600/search-box.png) no-repeat;height:27px;width:202px}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:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px "Arial Narrow",Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig682YjOa9sGrRBXQ7HCaNa_FsAIRoDEC1jayhTxopNSazmW7CVgjL72A5HiWj_e16DFcio6m9qkSWTnGgFPBZRSQkdWT145Cp8QVkGXYJfkKf-A6BOkTVhh80M9bolSRmyjHokL_6hUsz/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbW2XG1iVsdQrWuCH0U8xwsXxFaJ8X0wV5v_VZXbUh-0FExPX_VatyljXkl8JyBzayyQRkvp9Z5vGc-V-uCD6VZEuJqA4Su8ipXcgSOEOGjdew5xhV4RevVxF63X6gE-FshLLa1vezCSc/s1600/search-button-hover.png) no-repeat}#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>
************************
<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ur0ARkjfg_F6GKxNzYeQW9c8djyNqlojdoJGqgr5BXkaurw8KLMcCyXeQyzMYPItlCHkfW9dFz2GYdhzeznUhgvfl9jU2zJrBfL1SW-9NHr3OPzOFi6vXmitkUMGDsf_9GO2yJ2E-YAy/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/AVvXsEjZlfMQyq3JlSfYkDyPhC7kso8HhAGYq2MEi5vii7s_JN5YX-l6Tqb_t8gv5xc6kYUAiwaSRDWdploH-LgA-ii-uQeJe07krU7WDE8gqoWsx_PIereCJIZNO7EqhaU7yY8zswH3djGrzD-R/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/AVvXsEimTlptFzvrzmpqqR1UsBXEixv3C4QfZtoCd_l0hLugCqEqsyN6dLTx1R_9Q1qtbaWCMwEtEhQ48B-6PPQTzlmCZ9GsDAYrL0rQjFxIpYtcAZNiliOGSNRGzzXPkRwVi3bBgTRYhu148ova/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimTlptFzvrzmpqqR1UsBXEixv3C4QfZtoCd_l0hLugCqEqsyN6dLTx1R_9Q1qtbaWCMwEtEhQ48B-6PPQTzlmCZ9GsDAYrL0rQjFxIpYtcAZNiliOGSNRGzzXPkRwVi3bBgTRYhu148ova/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>
************************
<style type="text/css">
#searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVEOvNUhliwcYRIPLXjm3zaD-xSzFTkgsnJPSPYyTgTATC-gLi-aFjv9hGhRRMNTlEamyC5o59KloBPtnPf9FDOpK_X4iMMHmEEw3pDb9znWiVYU3VENuq94CY3korLDTGi1mlsE1CzRgY/s1600/search-box.png) no-repeat}#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:transparent;border:0;font:14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}#searchbox input[type="text"]:focus{color:#fff}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHCYzhOfu65kq2a1AKafU0QN9XEO1r_xTLxl7Md2XZEnSA2-qamtOHnA5DVuJ4Gu93MYSHA3aYF9M_yekMo_JAAcRvy715m399ABgVrX4rpgVyuakrtUEB_cg8LXZ7gmnNh92CRtQ9v_ZF/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px;cursor:pointer}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO_mgRiSa6KDTiko7Tr2U3uUndhAzeVZEymwrwu3-XtMi4ejKqaY7dsduiD7-Q0IWIcvsDYEsjKaM1Q_BnC_wLfAfXaLYUWjg7QBqEq7IIMb79jtMJsgzamv2i9aoJp15fzlFyAZUOLtlK/s1600/search-icon-hover.png)}
</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>
************************
0 comments: