Black CSS3 Search bar for Blogger

Blogger's default search bar (Google custom search) is kind of sucks looking. If blog readers really like to search something on your blog they will just walk away from searching with Google custom search bar! Let's impress them with this cool unique Black CSS3 search bar what will really fit your site and make your Blogger blog cool enough to let everybody search something on your site. This search bar made of CSS3, HTML5. Plus no external image uses here. Also only latest version of web browser can give this search bar's high appearance quality. Let's see how it looks like and how to add it in your Blogger blog.

Black CSS3 Search bar for Blogger

Preview-

 

Live Demo- (Here you go)

Codes for copy-

<!--crawlist.net search starts-->
     <form id="ks-blackbar" action="/search" method="get">
    <input id="search" name="q" type="text" placeholder="  What are you looking for?" />
    <input id="submit" type="submit" value="Search" />
    </form>
<!--crawlist.net search ends-->
<style>/*crawlist.net CSS starts*/
#ks-blackbar{
    width:300px;
}
form{
    width:300px;
    height:30px;
    background-image : repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
    background-image : -webkit-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
    background-image : -moz-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
    background-image : -ms-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
    background-image : -o-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
    background-color: #151515;
    background-size: 6px 6px;
    padding:10px;
    position: relative;
    border-radius: 5px;
    box-shadow: inset 0 25px 0 0 rgba(255,255,255,0.15);
}
input[type="text"]{
    width:296px;
    height:26px;
    background: #1b1b1b;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFiMWIxYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjI2MjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #1b1b1b 0%, #262626 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b1b1b), color-stop(100%,#262626)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1b1b1b 0%,#262626 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1b1b1b 0%,#262626 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1b1b1b 0%,#262626 100%); /* IE10+ */
    background: linear-gradient(top,  #1b1b1b 0%,#262626 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b1b1b', endColorstr='#262626',GradientType=0 ); /* IE6-8 */
    border:1px solid #000;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    box-shadow:0 1px 0 rgba(255,255,255,0.2), inset 0 2px 0 rgba(0,0,0,0.5);
    -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.2), inset 0 2px 0 rgba(0,0,0,0.5);
    -moz-box-shadow:0 1px 0 rgba(255,255,255,0.2), inset 0 2px 0 rgba(0,0,0,0.5);
    -o-box-shadow:0 1px 0 rgba(255,255,255,0.2), inset 0 2px 0 rgba(0,0,0,0.5);
    font-size:11px;
    color:#909090;
}
input[type="text"]:focus{
    outline:none;
}
input[type="submit"]{
    width:65px;
    height:28px;
    cursor: pointer;
    background: #353535;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiMzNTM1MzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MSUiIHN0b3AtY29sb3I9IiMxYjFiMWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #353535 50%, #1b1b1b 51%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#353535), color-stop(51%,#1b1b1b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #353535 50%,#1b1b1b 51%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #353535 50%,#1b1b1b 51%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #353535 50%,#1b1b1b 51%); /* IE10+ */
    background: linear-gradient(top,  #353535 50%,#1b1b1b 51%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-8 */
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.16);
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.16);
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.16);
    -o-box-shadow:inset 0 1px 0 rgba(255,255,255,0.16);
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -o-border-radius:4px;
    border:1px solid #000;
    color:#fff;
    position:absolute;
    right:11px;
    top:11px;
}
input[type="submit"]:active{
    background: #1b1b1b;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFiMWIxYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNTM1MzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #1b1b1b 0%, #353535 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b1b1b), color-stop(100%,#353535)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1b1b1b 0%,#353535 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1b1b1b 0%,#353535 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1b1b1b 0%,#353535 100%); /* IE10+ */
background: linear-gradient(top,  #1b1b1b 0%,#353535 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b1b1b', endColorstr='#353535',GradientType=0 ); /* IE6-8 */}/*crawlist.net CSS ends*/
</style>

How to add this widget in Blogger

• First log in to your Blogger, select your Blog, 

• Go to 'Layout' tab then click 'add a gadget'  

• Select 'html/javascript' from pop up menu. 

• Copy following codes and save template.

Search bar Compatibility

• This Search bar is compatible with almost all stranded templates but if it not working that's unfortunate. 

• All major web browser will support it, Old version of Chrome and IE may be will not show search bar's color effects.

So, don't forget to mention what you think about this search bar. And stay subscribed for new search bars. Happy searching ;)