Add Google search box to Navigation / Menu or at Page Widget in Blogger

I think everyone who wants to customize their blogs or want to design their blog templates, this tutorial would be helpful. In this tutorial I am going to show you how to add custom search box in Navigation / Menu Bar of your blogger template or at Page Widget as shown in below image.
1. First of all you need Custom Search Code/script similar to google search as shown below which you will get it from AdSense account. If you don't have adsense account, don't worry still you can add Google Custom search box. When you copy Search Box Code from your AdSense account, it will look like below.

As I mentioned before, those who don't have AdSense account can simply remove highlighted line and use it as it is in your blog.
2. Once you have custom search box script/code. Next task is to edit Blog Template. Before you make any changes to your original template, it is recommended to take backup of your template. (To Backup existing Template: Go to your Blog "Settings" > "Other" > Under Blog tools select "Import Blog").

3. Now go to "Settings" > "Template" and Click on "Edit HTML" button.

4. You can now jump to "PageList" Widget directly or Search for "PageList" in HTML code and you will see something similar as shown in below screenshot.

5. Expand the Widget tag and you will see something similar (Note, if Blog is not enabled for Mobile then you won't see Mobile section like below).

6. Replace Custom Search Code and save the template changes.

Related Posts Plugin for WordPress, Blogger...
Powered by Blogger