Home / Blogger / javascript / Search Bar / 9 Stylish Beautiful Blogger Search Box

9 Stylish Beautiful Blogger Search Box

W3 HTML CSS Courses Tutorials May 20, 2019 Blogger, javascript, Search Bar

9 Stylish Beautiful Blogger Search Box

Today I have selected 12 stylish beautiful search boxes for your Blogger / Blogspot site. I hope you will love all the search boxes made using CSS3 and HTML. You can easily customize it as your own. Let's get started.
Step by Step Instructions (With Pictures, Demo and Video) for Adding a Beautiful Custom Stylish Search Box Widget in Blogger, Steps: How to Add a Custom Search Box to Blogger, search bar for your blogger blog, just follow the simple steps and you will get the most beautiful and stylish, Stylish Search Box For Blogger BlogSpot Is Here
How to add:

Sing in> Blogger Dashboard> Layout> Add a Gadget> HTML / Javascript.

Then select one in the search box, copy the search box code and paste it into your HTML / Javascript box.

Search box code:

Clean Search Box 1

Dynamic width (Expandable) Search box 2

<style>#nbc-searchexpandbox1 { padding:10px; } #nbc-searchexpandsubmit1 { border:1px solid #111111; background: #111111; padding:5px; color:#ffffff; font:14px verdana; } #nbc-searchexpandinput1 { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #dcdcdc; background:#ffffff; padding:5px; color:#888888; font:14px verdana; transition: width 2s; -webkit-transition: width 2s; /* Safari */ -o-transition: width 2s; /* Opera*/ -moz-transition: width 2s; /* firefox*/ width:65px; } #nbc-searchexpandinput1:hover { width:200px; } </style><div id='nbc-searchexpand1'>         <form action='/search/max-results=8'  method='get' id="nbc-searchexpandbox1">            <input name='q' id='nbc-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>            <input id='nbc-searchexpandsubmit1' type='submit' value='Search'/>         </form></div>

Elegant green Search box 3

<style>#nbc-searchgreen1 { background: rgb(143,196,0); /* Old browsers */ background: -moz-linear-gradient(top,  rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */ background: linear-gradient(to bottom,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */ border-radius:10px; width:290px; } #nbc-searchgreenbox1 { padding:10px; } #nbc-searchgreensubmit1 { border:1px solid green; background: green; padding:5px; color:#ffffff; font:14px verdana; } #nbc-searchgreeninput1 { -moz-border-radius: 10px; -khtml-border-radius: 10px; -webkit-border-radius: 10px; border:1px solid #ffffff; background:#ffffff; padding:5px; color:#888888; font:14px verdana; } </style><div id='nbc-searchgreen1'>         <form action='/search/max-results=8'  method='get' id="nbc-searchgreenbox1">            <input name='q' id='nbc-searchgreeninput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>            <input id='nbc-searchgreensubmit1' type='submit' value='Search'/>         </form></div>

Dark black Search box 4

White color Search box 5

<style>#MBBOldSearch { display: block; clear: both; margin: 10px 0; } #MBBOldSearch #MBBSinput { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxCdrlppSedGcpiGUBrK1GmmjqArwkrjFrrziSkom0PyViSNlCqvhjErhMWh13MFglD61lVBLZg1_H1TKcabJ_qE73S1OZ4z1RIt61VjftCdFNVuYVqJFYdIDEelZJTQhXHEO0Hej99Es/s1600/noxdo_blogspot_com_Search-icon.png) no-repeat scroll 8px center transparent !important; padding: 7px 15px 7px 35px !important; color: #444; font-weight: bold; text-decoration: none; border: 1px solid #D3D3D3 !important; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 2px #CCC inset; -moz-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; width: 52%; } #MBBOldSearch #MBBSsubmit { color: #444; font-weight: bold; text-decoration: none; padding: 6px 15px; border: 1px solid #D3D3D3; cursor: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 ); background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); } </style> <div id="MBBOldSearch">    <form action="/search/max-results=8">        <input name="q" id="MBBSinput" type="text" />        <input value="Search" id="MBBSsubmit" type="submit" />    </form></div>

Stylish floating Search box 6

<style type='text/css'>/*<![CDATA[*/ #sbutton { background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed)); background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%); background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%); background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%); background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe; border: 1px solid #3079ED; border-radius: 2px 2px 2px 2px; color: #FFFFFF; height: 27px; min-width: 76px; padding: 0 21px;padding-bottom: 2px; } #sbutton:hover{    background-color: #357AE8; background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8)); background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%); background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%); background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%); background: linear-gradient(top, #4d90fe 0%,#357ae8 100%); border: 1px solid #2F5BB7; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);} #simg { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGsr2v4b8RRpb6snh-e-GbcSQjYqrfdMO03RMXRSNiaGlMHS0cjjLlMbY1pIjpXwNqxGm8qDHHjhzfogBe_cCRh-gGTpCLm4ZmRvmebH07yx71Z6HuN2d3znLNUdTiCHXsO3XMNFf6gok/s1600/noxdo_blogspot_com_Search-icon2.png) no-repeat scroll 0 0 transparent; display: inline-block; height: 14px; margin: 0; width: 17px;z-index:101; }#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;} #s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;} #s:focus {width: 200px;} .noop-searchbox { display: block; position: fixed; right: 12px; top: 1%; max-width: 300px;min-width: 238px; z-index: 100; } /*]]>*/ </style><div class='noop-searchbox' id='noop-searchbox'><form action='/search/max-results=8' id='noop-searchform' method='get'><input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/><button id='sbutton' type='submit'><span id='simg'></span></button></form></div>

Round corner Search box 7

<style>#search-form { background: #e1e1e1; /* Fallback color for non-css3 browsers */ width: 365px; background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225))); background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%); border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px; box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); -moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); } input[type="text"]{ background: #fafafa; background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230))); background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%); border: 0; border-bottom: 1px solid #fff; border-right: 1px solid rgba(255,255,255,.8); font-size: 16px; margin: 4px; padding: 5px; width: 250px; border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px; box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); -webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); -moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); } input[type="text"]:focus{outline: none; background: #fff; background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235))); background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%); } input[type="submit"]{ background: #44921f; background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21))); background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%); border: 0; color: #eee; cursor: pointer; float: right; font: 16px Arial, Helvetica, sans-serif; font-weight: bold; height: 30px; margin: 4px 4px 0; text-shadow: 0 -1px 0 rgba(0,0,0,.3); width: 84px; outline: none; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); -moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2); -webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); } input[type="submit"]:hover { background: #4ea923;background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); } input[type="submit"]:active { background: #4ea923;background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); } </style><form action="/search/max-results=8" id="searchbox"><input name="cx" type="hidden" value="X:Y" /><input name="cof" type="hidden" value="FORID:11" /><input id="q" name="q" size="70" type="text" /><input name="sa" type="submit" value="Search" /></form>

Black and white color Search box 8

White Search box 9

No comments:

Subscribe to: Post Comments ( Atom )