Glowing/Pulsating HTML5 Search bar for Blogger ~ Crawlist

Making a attitude and impression with your search bar on your Blogger site I did published some cool CSS3 search bars before. Keeping that continue here I publishing Glowing/Pulsating HTML5 Search bar for Blogger blogs. This search bar represent latest quality search bar what made with CSS, CSS3, Keyframe animation, gradient colored body as well as HTML5 mark up. Below preview, live demo, codes and how to add given below. read on-

Glowing/Pulsating HTML5 Search bar for Blogger

Preview-

Live Demo- (Click Here)

Codes for copy-

<section class="ks-glowingbar">
    <form action="/search" method="get">
        <input name="q" type="search" placeholder="Search..." />
        <button>Search</button>
    </form>
</section>

<style>/*crawlist.net search bar CSS*/
@import url(http://fonts.googleapis.com/css?family=Cabin:400);
.ks-glowingbar:before {
    background: #444;
    background: -webkit-linear-gradient(left, #151515, #444, #151515);
    background: -moz-linear-gradient(left, #151515, #444, #151515);
    background: -o-linear-gradient(left, #151515, #444, #151515);
    background: -ms-linear-gradient(left, #151515, #444, #151515);
    background: linear-gradient(left, #151515, #444, #151515);
}
.ks-glowingbar:after {
    background: #000;
    background: -webkit-linear-gradient(left, #151515, #000, #151515);
    background: -moz-linear-gradient(left, #151515, #000, #151515);
    background: -o-linear-gradient(left, #151515, #000, #151515);
    background: -ms-linear-gradient(left, #151515, #000, #151515);
    background: linear-gradient(left, #151515, #000, #151515);
}
.ks-glowingbar form {
    background: #111;
    background: -webkit-linear-gradient(#1b1b1b, #111);
    background: -moz-linear-gradient(#1b1b1b, #111);
    background: -o-linear-gradient(#1b1b1b, #111);
    background: -ms-linear-gradient(#1b1b1b, #111);
    background: linear-gradient(#1b1b1b, #111);
    border: 1px solid #000;
    border-radius:5px;
    box-shadow: inset 0 0 0 1px #272727;
    display: inline-block;
    font-size: 0px;
    padding:6px;
    position: relative;
    z-index: 1;
}
.ks-glowingbar input {
    background: #222;
    background: -webkit-linear-gradient(#333, #222);
    background: -moz-linear-gradient(#333, #222);
    background: -o-linear-gradient(#333, #222);
    background: -ms-linear-gradient(#333, #222);
    background: linear-gradient(#333, #222);
    border: 1px solid #444;
    border-radius: 5px 0 0 5px;
    box-shadow: 0 2px 0 #000;
    color: #888;
    display: block;
    float: left;
    font-family: 'Cabin', helvetica, arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    padding: 0 10px;
    text-shadow: 0 -1px 0 #000;
    width:140px;
}
.ie .ks-glowingbar input {
    line-height: 40px;
}
.ks-glowingbar input::-webkit-input-placeholder {
   color: #888;
}
.ks-glowingbar input:-moz-placeholder {
   color: #888;
}
.ks-glowingbar input:focus {
    -webkit-animation: glow 800ms ease-out infinite alternate;
    -moz-animation: glow 800ms ease-out infinite alternate;
    -o-animation: glow 800ms ease-out infinite alternate;
    -ms-animation: glow 800ms ease-out infinite alternate;
    animation: glow 800ms ease-out infinite alternate;
    background: #222922;
    background: -webkit-linear-gradient(#333933, #222922);
    background: -moz-linear-gradient(#333933, #222922);
    background: -o-linear-gradient(#333933, #222922);
    background: -ms-linear-gradient(#333933, #222922);
    background: linear-gradient(#333933, #222922);
    border-color: #393;
    box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    color: #efe;
    outline: none;
}
.ks-glowingbar input:focus::-webkit-input-placeholder {
    color: #efe;
}
.ks-glowingbar input:focus:-moz-placeholder {
    color: #efe;
}
.ks-glowingbar button {
    background: #222;
    background: -webkit-linear-gradient(#333, #222);
    background: -moz-linear-gradient(#333, #222);
    background: -o-linear-gradient(#333, #222);
    background: -ms-linear-gradient(#333, #222);
    background: linear-gradient(#333, #222);
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    -ms-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #444;
    border-left-color: #000;
    border-radius: 0 5px 5px 0;
    box-shadow: 0 2px 0 #000;
    color: #fff;
    display: block;
    cursor:pointer;
    float: left;
    font-family: 'Cabin', helvetica, arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    position: relative;
    text-shadow: 0 -1px 0 #000;
    width:70px;
}
.ks-glowingbar button:hover,
.ks-glowingbar button:focus {
    background: #292929;
    background: -webkit-linear-gradient(#393939, #292929);
    background: -moz-linear-gradient(#393939, #292929);
    background: -o-linear-gradient(#393939, #292929);
    background: -ms-linear-gradient(#393939, #292929);
    background: linear-gradient(#393939, #292929);
    color: #5f5;
    outline: none;
}
.ks-glowingbar button:active {
    background: #292929;
    background: -webkit-linear-gradient(#393939, #292929);
    background: -moz-linear-gradient(#393939, #292929);
    background: -o-linear-gradient(#393939, #292929);
    background: -ms-linear-gradient(#393939, #292929);
    background: linear-gradient(#393939, #292929);
    box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
    top:1px;
}

@-webkit-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-moz-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-o-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@-ms-keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}

@keyframes glow {
    0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
    }
    100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
    }
}/*crawlist.net search bar CSS*/
</style>

How to add this widget to Blogger blogs

First log in to your Blogger, select your Blog,

Go to 'Layout' tab than click 'add a gadget'

Select 'html/javascript' from pop up menu.

Copy the following codes and save template.

Test
After adding this search bar into your blog, search a post's keyword and see this search bar in live action.

Compatibility and Faq

This widget is compatible with almost all stranded templates.

Any latest version of web browser will show all effect. Internet explorer not compatible.

So don't forget to mention what you thinking about this search bar. Goodluck

Crawlist

Blogger widgets tutorials, Wordpress Themes Plugins, Gadgets tools lists, HTML5 CSS3 tutorials

Menu

Glowing/Pulsating HTML5 Search bar for Blogger

Glowing/Pulsating HTML5 Search bar for Blogger

Popular Posts

Labels