Step by Step Instructions to Style and Customize Your Blogger Default Google Search Box Widget with 5 Different Beautiful and Simple CSS based Themes.

5 Themes For Blogger Official Search Box Widget

Updated on: November 20, 2016

Search box is the must have widget in each and every blog. Search box allows your readers to get access to your articles more easily by helping them to find the content what they are looking for. I have already published Stylish search box widgets for blogger, but blogger also provide their official search box widget, which is basically known as Google Custom Search box.

How to customize blogger official search widget

Google Custom Search (CSE) is the best search box on the web because it gives you numbers of benefits that are hard to resist. For instance - Others 3rd party search boxes only analyses your post title with searched query to show search results, but CSE also analyses your post content, meta codes and many other things to show results so that your readers can get most relevant content. Actually, this work as same as Google Search works, but the only difference is that, you get only that data which is linked with your blog. Blogger users get this widget free of cost where as for non-blogger users its cost near about $100/year. You can add this widget by navigating to Layout > Add widget > Select Search box > Save.

CSS Themes for Blogger Default search box widget

The main reason why most of the bloggers don't want to add this official search widget is, that the look and feel of the widget is very very simple but allows you to change the look of the widget. To style and customize your Search widget you must have knowledge of CSS, but many of you don't, that's why, I created 5 beautiful, professional and stylish themes for your widget. What all you need to do is the simple copy paste work. Go ahead, choose your design and follow the instructions.

Stylish CSS for blogger's Search widget

Simple style to customize blogger official search widget
input.gsc-input{background-color:#fff;border-color:#CDCDCD!important;padding:6px!important;border-radius:5px 0 0 5px!important}input.gsc-search-button{margin-left:-1px!important;border:1px solid #ddd;padding:5px;border-radius:0 5px 5px 0;cursor:pointer}
Css for default search box
input.gsc-input{background-color:#fff;border-color:#62B3EC!important;padding:6px!important;height:17px;font-size:13px}input.gsc-search-button{margin-left:-1px!important;border:1px solid #62B3EC;padding:5px;border-radius:0 5px 5px 0;cursor:pointer;font-size:0;height:31px;width:31px;background:url( no-repeat center;background-color:#62B3EC;background-size:15px}.gsc-search-button:hover{background-color:#3B78E7;border-color:#3B78E7;border-radius:0 5px 5px 0}
Customize google blogspot search box
table.gsc-search-box td.gsc-input{padding-right:5px!important}input.gsc-input{background-color:#fff;border-color:#CCC!important;padding:6px!important;height:17px;font-size:15px;color:#9F999D;border-radius:3px 0 0 3px;border-width:1px 0 1px 1px !important}input.gsc-search-button{margin-left:-1px!important;border:1px solid #CCC;padding:5px;border-radius:0 3px 3px 0;cursor:pointer;font-size:0;height:31px;width:31px;background:#fff url( no-repeat center;border-width:1px 1px 1px 0}
Dark theme for blogger official search box widget
table.gsc-search-box td.gsc-input{padding-right:40px!important}.gsc-search-button{display:none!important}input.gsc-input{padding:5px 0 8px 40px !important;height:22px;font-size:13px;color:#fff;border-radius:19px;border-width:0!important;width:100%!important;box-shadow:2px 3px 3px #292929 inset;background:#fff url( no-repeat scroll 16px 12px;background-color:#444;background-size:12px;text-shadow:1px 3px 3px #0B0A0A}
Beautiful CSS for default search widget

Recommended: For perfect experience of this style use colorful background image.

table.gsc-search-box td.gsc-input{padding-right:0!important}input.gsc-input{background-color:RGBA(0,0,0,0.5);padding:8px 15px!important;height:22px;font-size:15px;color:#fff;border-radius:19px;border-width:0!important;width:100%!important}input.gsc-search-button{margin-left:-5px!important;margin-right:5px!important;padding:5px;border-radius:50%;cursor:pointer;font-size:0;height:30px;width:30px;background:#fff url( no-repeat center;border-width:0}

Steps: To customize blogger official search box

Step 1. Login to your blogger account > Dashboard > Template > Edit HTML

Edit HTML Template

Step 2. Click anywhere inside the code and find the following code (use Ctrl + F):


Step 3. Just above ]]></b:skin> place you CSS code.

Step 4. Click Save template.


Refresh your blog to see your beautiful, professional looking google search box. For any issues related to above Tutorial Please Comment Below. Stay Updated, Browse Howbloggerz ! :)

Love it? Don't forget to Subscribe
  1. is there a way to change the font of the letters, you search?

    1. To Change the font of 3rd Search box (which you are using).
      Replace font-size: 15px; with font: 20px Gruppo; Now adjust the values 15 for your font size and Gruppo for your font family name.
      Keep blogging :)

  2. hi,
    thank you for shering great article about blogger.
    keep up the great work.

  3. Hi Jarial, new to blogging here and thanks for the innovative tutorial. But, can you please teach me how to put preloaded text inside search box I want to put "Type Keywords Here..." here's my blog so you can check Looking forward to hearing from you :)

    1. In your search box code, find class="gsc-input" and replace it with class="gsc-input" placeholder="Type Keywords Here..."

      I hope this will be easy for you :)

  4. Hi Jarial, amazing it worked. :) million thanks for your great help! 🙏


Post a comment