Add a Gadget Slot Below Header And Above Footer In Blogger Template

Hello Folks,Today in this article we are going to teach how to add Add a gadget Slot in Blogger Layout in other words you can say Add a gadget Container/Part/section.In this we will implement add a gadget container below of header and above of template footer section.From this tutorial you will able to create adsense ads or a third party ads add a gadget container in your blogger template.The main feature of these kinds of template is that you can place advertisement on various places within your Blogger template.The best place for displaying ad banner is below Blog header and above Blog footer.They can increase their advertisement revenue.So we will create a ad slot below Blogger headline where Blog or website visitors will see advertisement easily while reading your content , secondly we will  add ads slot above footer section where website readers use page for navigation and they can see advertisements too.To grab this ads slot add a gadget container in blogger layout follow the steps mentioned below.

How to add a ads slot add a gadget in blogger layout

installation steps:

Step 1. Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2. Click on -> Template -> Edit HTML->

Step 3. Now Find the ]]></b:skin> By Pressing Ctrl+F 

Step 4. Now Copy the below code and Paste it Above /Before]]></b:skin>

/*Ad Slot widget by http://www.bloggersstand.com */
.banner, .banner2 {margin:0 auto;text-align:center;overflow:hidden;}
.banner .widget,.banner2 .widget {width:970px;max-width:100%;margin:0 auto;background:transparent;text-align:center;overflow:hidden;}
.banner img, .banner iframe,.banner2 img, .banner2 iframe{display:block;margin:0 auto;text-align:center;}
/*Ad Slot widget Layout Design by http://www.bloggersstand.com */
#layout #banner,#layout #banner2 {background-color:#444;padding:20px 0!important;margin-bottom:20px;}
#layout #banner .widget,#layout #banner2 .widget{width:80%;margin:5px auto!important;overflow:hidden;float:none}
#layout #banner .add_widget,#layout #banner2 .add_widget{width:80%;margin:5px auto!important;overflow:hidden;float:none}

Customization: 

• To Display Adsense responsive ads with different width  alter width:970px; with your desired value.
• To control widget slot width in Blogger Layout alter the width:80%; with your desired value.

Step 5. Now search for <div id='main-wrapper'> or <div id='post-wrapper'> or <div id='content-wrapper'>, that code means is wrapping up your website or blog post container and sidebar.

Step 6.  Now Copy the below code and Paste it Above /Before <div id='main-wrapper'>.

<b:section class='banner section' id='banner' maxwidgets='1' showaddelement='yes'/>

After completing above process,you have successfully created ad weight container slow below header in your blogger template.

Step 7. Now to create advertisement slot above Blog Footer section. search for the following code:

<footer id='footer-wrapper' itemscope='' itemtype='http://schema.org/WPFooter'>
or  <div id='footer-wrapper'>

Step 8. Now Copy the below code and Paste it Above /Before <div id='main-wrapper'> 

<b:section class='banner2 section' id='banner2' maxwidgets='1' showaddelement='yes'/>
<div class='clear'/>

 Now Click on Save Template..You Are Done !!

Check your blogger layout,now you can see 2 ads slots has created below header section and above footer.now your template is ready to show responsive adsense ads.

We hope this article helped you to learn How To Add  Responsive Social Media Share Buttons Below/Footer Blogger Post.If you liked this article please Join us on Facebook,Twitter,Google Plus.