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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAOGv3ju4ayqva7vp6b9L0PKA7_VmFAIKgNcQG3XKBY51Cr89D39HVk6ulfCipXKHLebJwBBg_CC266uzyKIWc1v88tiM3pVcMABk-5KitBoaRNaDFLWZHzESLxqdraHZfMcxpMk8rKiCJ/s1600/Search-icon.png) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Ex5dxwMjM9RAnToLybAaom3FZFtuQ01G3YcnsHYgERj5Pzu0PI3wQTeBWCAUcVUn4Ytm6J0DwrIwsYLF4zNUZPD8EPMGV1c7xjMMZk0zjnwhagQqBqx1YjP-n-sPjYdUfbiWyQ9w3sM/s1600/search-icon.png) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAOGv3ju4ayqva7vp6b9L0PKA7_VmFAIKgNcQG3XKBY51Cr89D39HVk6ulfCipXKHLebJwBBg_CC266uzyKIWc1v88tiM3pVcMABk-5KitBoaRNaDFLWZHzESLxqdraHZfMcxpMk8rKiCJ/s1600/Search-icon.png) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Ex5dxwMjM9RAnToLybAaom3FZFtuQ01G3YcnsHYgERj5Pzu0PI3wQTeBWCAUcVUn4Ytm6J0DwrIwsYLF4zNUZPD8EPMGV1c7xjMMZk0zjnwhagQqBqx1YjP-n-sPjYdUfbiWyQ9w3sM/s1600/search-icon.png) 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):

]]></b:skin>

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

Step 4. Click Save template.

Great!

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
  • Hopey Levrey
    Hopey Levrey
    30 September 2016 at 22:03
    thanks a lot!
  • Hopey Levrey
    Hopey Levrey
    30 September 2016 at 22:56
    is there a way to change the font of the letters, you search?
    Saurabh Jarial
    Saurabh Jarial
    24 October 2016 at 19:26
    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 :)
  • EL Maimani
    EL Maimani
    21 October 2017 at 20:15
    hi,
    thank you for shering great article about blogger.
    keep up the great work.
  • VDB Zone
    VDB Zone
    17 December 2017 at 19:30
    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 https://vandeweybalao.blogspot.com/. Looking forward to hearing from you :)
    Saurabh Jarial
    Saurabh Jarial
    23 December 2017 at 20:24
    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 :)
  • VDB Zone
    VDB Zone
    17 March 2018 at 09:46
    Hi Jarial, amazing it worked. :) million thanks for your great help! 🙏
  • Jamiu Akinyemi
    Jamiu Akinyemi
    21 September 2018 at 04:20
    Thanks what I was looking for
    Saurabh Jarial
    Saurabh Jarial
    30 September 2018 at 09:37
    Have a nice day!
  • Ehab Zayn
    Ehab Zayn
    16 October 2018 at 01:24
    amazing! thanks ♥
    Saurabh Jarial
    Saurabh Jarial
    23 October 2018 at 00:41
    Happy to help :)
  • Nam SĂ i Gòn Homes
    Nam Sài Gòn Homes
    25 March 2020 at 20:25
    Thanks for help. From Vietnam