How to add Gadget/Widget section along with Blog Header in Layout Section of a Blogger’s Blog for increasing Adsense or any Monetization Revenue?
You might have noticed that we cannot add widget in header section in a blog because often the header section of blog is locked and there is no space providing any widget section. This can be another tip, impression or whatever you say, to increase your adsense money or any other monotization.
All bloggers definitely want to increase their earning potential through blogging, so putting ads on recommended place; this can be better money making technique. Here I would like to show you that how to add widget or gadget in the right side of the blogger head section where you can put adsense ads or leave for people’s ads place. When you going to put this widget or gadget on any section, first of all you should know how many space the widget going to reserve.
I would always recommend you to keep back up your blog’s template before any changes are going to take in your templates.
Carefully go through the lesson step by step:-
1. 1. First up all, login into you blogger dashboard,
2. Go to Template>>Edit HTML
3. Click any place inside the template and click CTRL+F to find the code <b:section class='header' id='header'
4. And then replace only the class=’header’ with class=’header left-header’.
Then it should be
<b:section class=’header left-header’ id='header'
5. After that again Click any place inside the template and click CTRL+F to find the code <div class='header-cap-bottom cap-bottom'>. Above this you can see two ending div.
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
6. Paste the given code above them.
<div style='clear:both;'/>
Then it should be
<div style='clear:both;'/>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
7. Now it’s time to make new gadget/widget area. Let’s add new gadget elements
8. Then paste the given code before the code <div style='clear:both;'/>
<b:section class='right-header crosscol' id='right-header' maxwidgets='1' showaddelement='yes'/>
Then it should be
<b:section class='right-header crosscol' id='right-header' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</div>
</div>
<div class='header-cap-bottom cap-bottom'>
|
Finally it is the time to add the CSS codes
Click any place inside the template and click CTRL+F to find the code <head> tag and the add the given css below this tag
right-header {display:inline-block;float:right;}</style>
Then it should be
<head>
<style>.left-header{display: inline-block;float: left;}#right-header {display:inline-block;float:right;}</style>
At last Click on Save Template button to save the template and go to the layout button to see the widget area. Here
is your new Widget Area in the name of right-header where you can add Adsenses,
Text, and Image etc...
Header
Right-header
Cross-Column
Hi Friends
Once it is published the Header session has been there
with the extra content which looks like this manner.
Thank you for visiting and reading us. I would be there always for your help.
Regards
Tamanna J
Posts
No comments:
Post a Comment