Thursday, December 27, 2012

6 Place Google Adsense Ads in your Blogger Header




            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


6 comments:

  1. Your style is so unique compared to other posts I've read stuff from. Thank you for posting.
    website design

    ReplyDelete
    Replies
    1. Hi there I am so excited I found your blog, I really found you by accident,
      while I was researching on Google for something else, Nonetheless I am
      here now and would just like to say thanks for a remarkable
      post and a all round enjoyable blog (I also love
      the theme/design), I don't have time to look over it all at the minute but I have book-marked it and also included your RSS feeds, so when I have time I will be back to read much more, Please do keep up the fantastic work.
      Feel free to visit my page : - www.mobilefunnysms.blogspot.com
      mobile sms
      hindi funny sms
      hindi jokes
      hindi love sms
      hindi friendship sms
      hindi romantic sms

      Delete
  2. Hi,
    I 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.

    ReplyDelete
  3. 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

    ReplyDelete
  4. Thank you very much! Worked like a charm!

    ReplyDelete