9 stylish beautiful blogger search box - SetFlix - The Latest Online Tools

Friday, 14 February 2020

Home Blogger javascript Search-Bar 9 stylish beautiful blogger search box

9 stylish beautiful blogger search box

SetFlix.in February 14, 2020 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.

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/AVvXsEiS4Hgyo1J3zDsbkFI5xy6008ffHMVgEuoE-KOn64JsXLh0NHx-lA8IWhLdwWCyOJUznAV_KMc5Wlnnx21c-7Ya-CIneYm_1kXFEScc-UUapKFUgceycOsEPGQmIp31JGfjDjJ4sMKWJDw/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/AVvXsEgII-SFh1AMCGAun1yPvNwfCppuBfTCuunt-Knt1VTMnTGaPYCXzdsRu5l6JZ5jVu5FYO8b6p4NK_cwwJhpJ8ilNCh4C4QtJC1Jf1e5a7EBBKjECjLi2IDp2CLsoCwihe7ojGAEXdnSvA0/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:

Post a Comment

Subscribe to: Post Comments (Atom)

Created By