• Home
  • About
  • Advertise
  • Guest Post
  • Contact
  • Work With Me
  • New Here?
  • Start a Blog
  • Grow Your Blog
  • Make Money Blogging
  • Tools I Use
  • Categories
    • Blogging
    • SEO
    • Affiliate Marketing
    • Make Money Online
    • WordPress
    • Free Traffic
    • How To
    • Reviews

Sleek and Cool Search Boxes for Blogger

Last Updated on April 24, 2016 by Ammar Ali 13 Comments

I recently shared simple yet cool search boxes for blogger. Now its time for something new, cool, beautiful and sleek.

So here comes sleek and cool search boxes for blogger/blogspot. It’s using simple image and css, HTML. Actually these are PSD source designed by Design3edge. I work hard in converting this to Blogger for YOU. Hope you enjoyed with this!

 Update: For WordPress Version Click Here!

sleek search boxes by allbloggingtips

Adding Add Cool Search Boxes For Blogger

  1. Login to Blogger Dashboard   => Design tab  => Page Elements .
  2. Click on Add a Gadget where you wish to place this Search Boxes.
  3. Choose HTML/JavaScript from the List.
  4. Place any one Search Box code in to it and Save the Gadget.

Style 1

search boxes

<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(http://2.bp.blogspot.com/-vGjST2sX6Ts/T88uy-eRYUI/AAAAAAAAAog/xhJ2A0nGnpw/s1600/black.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#abt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="abt-searchbox">

<form id="abt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 2

search boxes

<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(http://4.bp.blogspot.com/-hxd1468RbE4/T88u0xTfk1I/AAAAAAAAApQ/BZ1WB9VG_3g/s400/whitez%2Bby%2Babt.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#abt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="abt-searchbox">

<form id="abt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 3

search boxes

<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(http://4.bp.blogspot.com/-Z_Bf8C64sWs/T88uy_rLu3I/AAAAAAAAAow/EcYyd6sKjxA/s400/bluez%2Bby%2Ballbloggingtips.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#abt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="abt-searchbox">

<form id="abt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 4

search boxes

<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(http://4.bp.blogspot.com/-T2F6d51MVw8/T88u0v_kIqI/AAAAAAAAApE/pB5bbugoVoM/s400/transparent%2Bby%2Ballbloggingtips.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#abt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="abt-searchbox">

<form id="abt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 5

search boxes

<style type="text/css">
#abt-searchbox{
border-radius:5px;
background:URL(http://1.bp.blogspot.com/-D98wjamWcwk/T88u0dnSPuI/AAAAAAAAAo4/U4Oy3x-zhRg/s400/pinkz.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#abt-searchform{display: block;padding: 10px 12px;margin:0;}
form#abt-searchform #s{padding-left:16px !important; padding:7.5px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#abt-searchform
#sbutton{margin:0;padding:0;height:40px; width:44px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="abt-searchbox">

<form id="abt-searchform" action="/search" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Credits

This is again a first time shared tutorial guide by AllBloggingTips. These scripts, widget and style sheets are provided only by ABT  therefore if you wish to share this tutorial with your readers and friends then kindly link back to this post as the only favour in return. :D

That’s all!. We hope you enjoyed this Cool Search Boxes. You can also subscribe  us to get our next tutorial in your inbox ;)

Subscribe Here!

Enjoyed reading? Share with your friends!

  • Facebook
  • Twitter
  • Pinterest

Related Posts

  • 10 Top Reasons You Will Keep Failing as A Blogger
  • ContestHow To Quickly Sell Ad Spaces?
  • Oho5 Things to Confirm You Are Still A New Blogger

Article by Ammar Ali

A blogger, web designer, front-end developer and WordPress expert since 2011. I started this blog during high school. Here I share what I've learned so far and what I continue to learn through blogging so that I can be of assistance in some way to improve your blog. Read more

Ammar has written 158 awesome articles for us.

13 Comments Leave Your Comment

  1. Pratik Bhuite says

    March 3, 2013 at 5:40 pm

    GCS is not working on my blog properly, so i was searching for something like this.
    thanks Ammar.

    Reply
  2. C. C. O. says

    June 17, 2012 at 3:30 am

    They are great, but I noticed one problem: The search box is not clickable. I had to hit “enter” on the keyboard to get results! I tried Style 5.

    Reply
    • Ammar Ali says

      June 17, 2012 at 10:49 am

      Can I have your blog link where you placed this widget? So I can find out the problem :)

      Thanks!

      Reply
      • C. C. O. says

        June 19, 2012 at 3:55 am

        I placed the box after the post.

        Reply
  3. Trung Nguyen says

    June 7, 2012 at 1:17 pm

    Wow, very cool search box, you’ve just done a great tutorial for those who used blogger.com Keep sharing :)

    Reply
  4. Ankit Khurrana says

    June 7, 2012 at 1:01 am

    Really cool search box. Can you please give some tips on making a custom subscription box for blogspot blogs..??

    Reply
    • Ammar Ali says

      June 7, 2012 at 10:24 am

      HI Ankit,

      You can check out our recent mashable style subscription widget here!
      Another Stylish Mashable Style Subscription Widget v2
      New Mashable Style Social Subscription Widget

      ~Ammar!

      Reply
  5. Ehsan says

    June 6, 2012 at 11:18 pm

    Cool search boxes, but unfortunately I’m WP user and I’m using Google search box on my blog. Good effort anyway.

    Reply
    • Ammar Ali says

      June 6, 2012 at 11:21 pm

      Move to Blogger :P #kidding.
      I will soon post wordpress version! :)

      Reply
  6. Bharat Chowdary says

    June 6, 2012 at 11:13 pm

    Great search boxes, expecting more creative stuff like this from you :)

    Reply
    • Ammar Ali says

      June 6, 2012 at 11:20 pm

      WordPress version coming soon :D

      Reply
  7. Raj says

    June 6, 2012 at 10:32 pm

    Love all the boxes and their styles.. would appreciate if you can release the same for WP platform too..

    Reply
    • Ammar Ali says

      June 6, 2012 at 10:57 pm

      Hi Raj,

      I am planing to release these search boxes for WordPress too. Make sure to subscribe here . So you will get next search boxes article for WordPress to your inbox! :D

      ~Ammar

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Let me take care of your website and make it run like a champ. I can help you with blog setup, migration, quick fixes or maintenance services.

Work With Me
New to my blog? Start here. blogging tools I use Free WordPress Blog Setup
  • 12 Things to Do Before Applying for Google AdSense + FREE Bonus Checklist 482
  • 8 Reasons Why I Hate Google Adsense 260
  • Top 15 Killer Tips To Increase Page Rank! 225
  • How To Get Traffic To A New Blog – 5 Great Ways 191
  • How to Earn $50-$100 Daily with Affiliate Marketing? 170
  • How to Get Index Your New Blog Post Super Fast 143
  • How To Upgrade AdSense Hosted to Non-hosted Account 112
  • 10 Top Reasons You Will Keep Failing as A Blogger 112
  • Why and How To Protect Adsense Account From Invalid Clicks? 110
  • 5 Best Author Box Plugin for WordPress 101
  • Top 5 Best Cheap WordPress Hosting – Fast, Secure & Trusted 97
  • Increase Blog Traffic! 8 Great Ways That Really Work 38
  • Snow Falling Effect With Bells Widget For Your Blog 6
  • 5 Surprising Blog Hosting Myths Bloggers Still Believe 7
  • Quick Actions to Make Your Blog Ready to Rock in 2015 11
  • How To Add Floating Contact Me Button To Blogger 7
  • Add Smooth Multi Level Drop-Down Menu In Blogger No Comments;
  • How to Use Fiverr To Increase Your Blogs Social Media Presence 6
  • Stylish & Cute Subscription Form Widget For Blogs 23
  • Create Mobile Version Of Website With GinWiz 23
  • Tactics Needed To Increase the Traffic to a Blog 7
  • 6 Surprising Signs Why You Will Quit Blogging 45

What others are reading..

  • The Advance Guide To Make Money With Stock Photography Sites – 2200+ Words
  • Add Stylish Floating Facebook Like Box Widget In Blogger
  • Can Your Domain Name Decide the Destiny of Your Business?
  • Happy New Year 2012 Balloons Widget
  • jQuery Popup For Facebook Like Box With Timer
  • Explore the blog

    • New Here? Start Here
    • A Ridiculously Helpful Guide to Start Your Own Blog In 10 Minutes
    • How To Grow Your Blog And Build An Audience
    • How To Make Money From Your Blog
    • Cheap WordPress Hosting
    • Free WordPress Hosting

    Quick links

    • Free WordPress Setup
    • Tools I Use
    • Advertise Here
    • Contact
    • Disclosure Policy
    • Privacy Policy
    • Table Of Contents
    Funny, entertainment, quotes

    © 2019 · All Blogging Tips · This site runs on InMotion Hosting