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.
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.
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
box-shadow:2px 2px 2px 2px #b7b7b7;}
Add Hover Effect to Submit Button
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.
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.
Stay Blessed and Stay Happy!