BLOGFIN

Tips, That Makes Blog Perfect !

How to add Google Custom serarch:Gadget Beside Blogger Header

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

It is very interesting 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 blogger header.So lets go. We discuss the above mention topics below.

add Google Custom search

How to add Google custom Search Box beside header

In before I mention that how to backup and restore your template code before editing it. Here I have put a screenshot which help 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 Template option

edit html for blogger

Step 3:
Then click on edit html option for edit template code. After click on edit html option you will find the following code.You may search the code after click to 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 add 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 step which are 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 appear 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 blogger header.Many blogger put Adsense ads beside blogger header or put code for Google custom search.

BLOGFIN © 2017