Adding adsense, search box or any gadget beside header

Make puzzled on how to put  adsense code, search box, banner or any gadget beside your  header image? You are not wrong in landing this page because I will  tell you  the steps on how to make it. Having a gadget beside your header adds professionality to your blog and have a big impact on your blog traffic as well.
So, let us now jump to the tutorial.

adding gadget beside header

Adding Adsense, Search Box or any Gadget Beside Header


Step 1. Go to Blogger Dashboard
Step 2. Click Template
Step 3. Hit the Edit HTML button
Step 4. Look for the code below
<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 5. Add the following code below right after the code above
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
So, your final code will be:

<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;'/>
Now you are halfway done in  putting another section beside your blog title section.
Step 6. We will add css to your existing header  and to the new section that you had just add recently. Copy the code below and paste it above ]]></b:skin>
#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;}

Step 7. Save your Template.

Installing the Widget


It is now time to add the widget beside your header (it may be in form of banner, adsense code or any gadgets). Do it as you normally do in putting gadget or widget in your blogger lay -out.

adding widget beside header

Step 1. Go to Blogger Dashboard
Step 2. Click Lay -out
Step 3. Hit the Add a Gadget button and paste inside it your widget codes.

Note: Drag or place your new gadget below your blog header-title in order to appear it beside the image header by the time you save it.

Step 4.  And finally, click the Save Arrangement button. Enjoy!

2 comments: