Apr 5, 2016

How to Customize Google Custom Search Engine (CSE) Bar

data:blog.title
In one of my previous post, I've shared a post "Top 10 Best Custom Search Boxes for Bogger" in which I've tell you, "Google Custom Search Engine Bar" has not hover effect facility, but after doing some research, I've found a way to customize Google custom search engine bar for Blog/Website using CSS coding language. You can easily customize and change its width, height, submit search button background color, hover effect, and you can also remove the watermark.

Customize Google Custom Search Engine, Custom search engine by google

Bur before customizing Google custom search engine bar, you should know it's CSS classes and ids that are used for decorating this widget. So today I'm here to describe all needed things about Google custom search engine with defining the classes and ids well. Let's start understanding.

Must Read - Create Responsive Drop Down Menu With Search Box in Blogger.

Definitions of Classes & IDs Used in Google Custom Search Engine Bar


As I've promised, here are the necessary CSS IDs and Classes employed in Google custom search engine.

IDs (#) or Classes (.) Definition
#___gcse_0 Google Custom Search Engine Bar process under this CSS id.
.gsc-search-button The CSS class to customize search button of custom search engine bar.
.gsc-input-box The CSS class to customize search box of custom search engine bar.
#gsc-i-id1 The CSS class to customize the style of text or class to remove water mark.
.gsib_a The CSS class to customize inside search box.

Okay, it's over. Now learn, how you can customize Google custom search engine with the help of these CSS IDs and Classes.

How To Customize Google Custom Search Engine Bar?

We've learned important IDs and classes from which Google custom search engine processed. Now it's the time to find out how actually you can customize it. I've written step by step tutorial to customize it, like customizing search box's width, height, border color. Customizing button color, height, and width, adding a hover effect to button and box and removing the watermark. So read and understand it very carefully.

#1 Customization - How To Change Width, Height, and Border Color of Search Box's?

Now, first learn how to change search box's width, height, and border color. To do so, you have to play with CSS codes as following.

.gsc-input-box{
width:250px!important;
border-color:#111!important;
height:30px!important;
}

And now after customization place it just above of ]]></b:skin> tag or using <style>..</style> tag inside your blogger template and after that Save it to get changed.

#2 Customization - How To Change Width, Height, Background Color, and Border Color of Submit Button?

Now it's time to change width, height, background color, and border color of submit button.

.gsc-search-button{
background-color: #111111!important;
width:20px!important;
height:20px!important;
}

It will get changed after saving it.

#3 Customization - How To Add Hover Effect To Search Box and Submit Button?

As I've mentioned in one of my previous posts, Google doesn't allow you to add hover effect but no guys you can add by using little CSS code. See below code to get an idea, how it is possible.

Add Hover Effect to Search Box

.gsc-input-box:hover{border-color:#ff0000!important;
box-shadow:2px 2px 2px 2px #b7b7b7;}

Add Hover Effect to Submit Button

.gsc-search-button:hover {
background: #2af!important;
box-shadow:2px 2px 2px 2px #b7b7b7;
}

#4 Customization - How To Remove Watermark From Google Custom Search Engine Bar?

Are you thinking that I'm joking? But no, I'm not. You can remove Google's watermark from their search boxes just by adding a little piece of code. Add following code just above of ]]></b:skin> tag or use it in <style>...</style> tag.

#gsc-i-id1{
background:none!important;
}

That's it. Now after making these changes, open your blog/site and see it live with the amazing and stylish look.

You Must Read - How To Improve Google Search Ranking and Get Rank Higher?

Conclusion:

So above guide is about "How to Customize Google Custom Search Engine (CSE) Bar Using CSS For Blog/Website?" I've tried my best to make this guide as easy as possible I can. But in any case, you're facing any issue; please let me know via dropping a comment below. I'll be happy to assist you.

Did you like this tutorial? If you like, then kindly share with your friends using any one of your social networking ID. You can subscribe us If you want to get new updates direct into your mailbox for free.

Thank You!
Stay Blessed and Stay Happy!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.