How to add Google Custom Search:Gadget Beside Blogger Header

How to add Google custom search: Before adding Google Custom search or any other Gadget beside your Blogger header, we need to backup or restore our template code so that if you make any error or put any wrong code, you can quickly restore our original template for the blog. If You want to Backup or Restore your Blogger template code, then go to your template option and then click on the Backup/Restore button from the right side corner and download your template XML file.

It is a fascinating topic, and by this topic, you will able to know how you add Google custom Search, AdSense code, Banner, or Gadget beside Blogger header. This tutorial will help you to add Google Custom search beside the blogger header. So let’s go. We discuss the above mention topics below.

add Google Custom search

How to add Google Custom Search Box beside the header

Before I mention how to backup and restore your template code before editing it. Here I have put a screenshot that helps you to backup your template code.
backup your template code

Step to add Google custom search

Step 1:
At first Go to your Blogger Dashboard or Admin panel

Step 2:
Then click on a Template option

edit html for blogger

Step 3:
Then click on edit HTML option for edit template code. After click on the edit HTML option, you will find the following code. You may search the code after click to the format template option.If not find search this code only <b:section class=’header’ id=’header’ maxwidgets=’1’showaddelement=’no’> and you will find the below code.

<b:section class='header' id='header' maxwidgets='1'showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR OWN HEADER
TITLE/IMAGE' type='Header'/>
</b:section>

Step 4:
Add the following code after the above mention code

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Step 5: 
After adding the code, Your final code will be looks like below code

 <pre class="prettyprint" ><b:section class='header' id='header' maxwidgets='1'
showaddelement='no'> <b:widget id='Header1' locked='true' title='YOUR OWN HEADER TITLE/IMAGE' type='Header'/>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
</pre>

Step 6: 
Now you have to add CSS. To add CSS, you need to copy the following code and paste it above “]]></b: skin>.”Search in search section for this “code ]]></b:skin>” and place below code

#header, body#layout #header {width:50%;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:35%;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}
add CSS for google custom search

Step 7:
Finally, Save your Template

Now,

How to add Gadget Beside Blogger Header

Gadget Beside Blogger Header:  If you add gadget beside blogger header, you have to follow some steps, which is mention below.

Step 1: 
At first, you have to go your Blogger Dashboard

Step 2: 
Next Click Layout section

How to add Gadget

Step 3:
Click on Add a Gadget button, and you have to paste here your widget Codes.

Gadget Beside Blogger Header

Note: Now, you can Drag or place your new gadget below your blog header-title so that it appears beside the image header by the time you save it.

Step 4: 
At last and final step, save the arrangement button, and you will find that code beside the blogger header. Many bloggers put Adsense ads beside blogger header or put code for Google custom search.

Updated: October 16, 2019 — 11:13 am

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.