New CSS3 Search Box for Blogger

By -
0 Flares Filament.io 0 Flares ×

New CSS3 Search Box for Blogger is an Awesome and Cool Search Box.As We have Already Seen Many Blogger Search Boxes but All is Dull and Even That Search Boxes Can,t Navigate The Keywords Perfectly.Now If You Want Rid Of That Search Boxes ,Then I suggest You To Add a Beautiful and Stylish CSS Search Box.So Here I am Providing You CSS3 Search Box Hope You Will Love it.

CCS3 Search Box Preview

                                                             How to Add New CSS3 Search Box to Blogger

CCS3 Search Box Features

1) Easy To Search .

2) Navigate Keyword Very Quickly.

3) Stylish and Beautiful.

4) Quick Search ( in Seconds).

How To Add New CCS3 Search Box To Blogger

1) Go To Blogger.com

2) Sign-in There and Go To Blogger Dashboard.

3) Click On Layout ( In New Blogger Interface) or Click on Design (In Old Blogger Interface)

4) Now Click On Add A Widget.

5) A Box Will Pop-Up , Add The Below Script/Code in The Box and Hit Save .

<style type=”text/css”>.form-wrapper {width: 270px;padding: 8px;margin: 10px auto;overflow: hidden;border-width: 1px;border-style: solid;border-color: #dedede #bababa #aaa #bababa;-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;-moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;background-color: #f6f6f6;background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);background-image: linear-gradient(top, #f6f6f6, #eae8e8);}.form-wrapper #search {width: 180px;height: 20px;padding: 10px 5px;float: left;font: bold 16px ‘lucida sans’, ‘trebuchet MS’, ‘Tahoma’;border: 1px solid #ccc;-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;}.form-wrapper #search:focus {outline: 0;border-color: #aaa;-moz-box-shadow: 0 1px 1px #bbb inset;-webkit-box-shadow: 0 1px 1px #bbb inset;box-shadow: 0 1px 1px #bbb inset;}.form-wrapper #search::-webkit-input-placeholder {color: #999;font-weight: normal;}.form-wrapper #search:-moz-placeholder {color: #999;font-weight: normal;}.form-wrapper #search:-ms-input-placeholder {color: #999;font-weight: normal;}.thumb{position:relative;left:4px;top:1px; border:8px solid transparent;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}.form-wrapper #submit {float: right;border: 1px solid #00748f;height: 42px;width: 70px;padding: 0;cursor: pointer;font: bold 15px Arial, Helvetica;color: #fafafa;text-transform: uppercase;background-color: #0483a0;background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);background-image: -o-linear-gradient(top, #31b2c3, #0483a0);background-image: linear-gradient(top, #31b2c3, #0483a0);-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;}.form-wrapper #submit:hover,.form-wrapper #submit:focus {background-color: #31b2c3;background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);background-image: -o-linear-gradient(top, #0483a0, #31b2c3);background-image: linear-gradient(top, #0483a0, #31b2c3);}.form-wrapper #submit:active {outline: 0;-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;}.form-wrapper #submit::-moz-focus-inner {border: 0;}</style><form action=”/search” method=”get”>    <input id=”search” name=”q” type=”text” placeholder=”Type here” />    <input id=”submit” type=”submit” value=”Search” /></form><p style=”display:none;”>Search Box by <a href=”http://www.blogcheer.com/”>Blog Cheer</a></p>

6) Now Time To Drop Comments . If You Have Any Question/Problem Regarding This Tutorial You Can Drop Comments We Are Always Here To Answer You  !

You May Also Love This Widget ” Add Spiny Rolling Egg Menu To Your Blogger

0 Flares Twitter 0 Facebook 0 Google+ 0 Reddit 0 Filament.io 0 Flares ×

My Name is Umer i am a self made blogger, i learn blogging my own self, i love to learn more and share some best blogging tips on my this blog. I hope you may like my some articles special thank you to reading about my self. Please Check my Latest Project @ Templotic - Best Blogger Templates