As to my Opinion Google Adsense is the Best Ad network I've Ever Seen. And that is why it is Hard to get the Approval of the Google Adsense. But to day I'm not going to tell you How can we get the Google Adsense Approval and What they Want from Us. It was in a previous Post in My site.
From this post I'll show you how to add an Adsense Ad in ur Blogger Header. The Main thing we Do is actually adding a Widget and through it we are going to add the Adsense Ads.
But how we can add something inside blogger header - be it a Adsense unit, a search bar, social media buttons or a widget? By simply adding a section in the header. First off, to give space for the extra gadget to fit in, our blogger header should be resized.
Changing the Size of the Blogger Header
Step 1: Go to Blogger Dashboard > Design > Edit HTML and backup your template
Step 2: Check the "Expand widget templates" box
Step 3: Find (CTRL + F) this piece of code:
/* Header
----------------------------------------------- */
Step 4: Now Paste the Below code after the Above tag
.header-left{
display: inline-block;
height: 35px;
width: 350px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}
Change the pixels in blue with the image's height and width of your blogger header and change float: left; to float: right; if you want to change the position of your logo.
Step 5: Find the Below Code and Replace
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
replace above code with below code code
<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>
Now "Preview" your template, you will find that the background color of Blogger's header is not visible or it's missing. To bring it back, you need to add some more snippets:
Step 6 : Find the following code
<div class="header-cap-bottom cap-bottom">
<div class="cap-left">
</div></div>
Step 7: Just above it Paste the Following Code
<div style='clear:both;'/>
Note: if you can't find the code from step 7, search for this instead:
<b:include name='description'/>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
:and paste the code from step 8 just below it.
Step 9. Save Template
Add an extra widget section to Blogger Header
Now your Hard work with Template is Done almost 70% all you have to do this now is Follow the Below Steps to Over with It.
Step 1: Go to Dashboard > Design > Edit HTML and backup your template.
Step 2: Find for the below code which you have implemented in previous step:
<div style='clear:both;'/>
Step 3. Paste before/above it, the following code:
<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>
Step 4. Now find
]]></b:skin>
Step 5. Paste just above it, this CSS code:
.header-right {
display:inline-block;
float:right;
width:400px;
}
Change the width that is marked in red color. Increase or decrease the pixels according to your needs and positioning new header section.
Step 6. Save Template.
Now all you have to do is to go to Design > Page Elements tab
And add a new gadget to the newly created extra header section in Blogger.
You may find that the extra gadget section is created just under your Blogger header as shown in the image below.
Don't worry about its position, the widget now should appear side by side.
Ah! After a Sitting nearly one Hour infront of the Computer it is feeling Better as at last I was able to finish the Tutorial for you.
If you are whether Happy or or not with my Post please leave a Comment.
Warning : Don't Copy from this Post Without Linking Back to the Post
Your style is so unique compared to other posts I've read stuff from. Thank you for posting.
ReplyDeletewebsite design
Thank You for your Appreciation :)
ReplyDeleteHi,
ReplyDeleteI find many useful things herewith. It is really amazing for us. Where ever we are, just click on the website and Take advantages regarding Place your ads .Your article impressed me very heartily. From a last decade I was searching such type of web site. Thanks for giving me a space in your blog. I refer this to my close friends who are already seeking for the same.
Hi, you make mind blowing ideas about Place your ads and a spectacular article here. Last time, when I saw your site this was a little good but today I visit the web site again and find that you are making a very smart work on the site. Today Web surfing is run very fast and a huge competition over the web is spread. So it is quite interesting. Thanks
ReplyDeleteThank you very much! Worked like a charm!
ReplyDelete