Today in this article we are going to train how to add Add a gadget Slot in Blogger Layout in different words you can say Add a device Container/Part/section. In this, we will put into effect add a gadget container below of header and above of template footer section. From this tutorial, you will in a position to create Adsense advertisements or third-party ads add a device container in your blogger template. The main function of these types of the template is that you can region an advertisement in more than a few locations within your Blogger template.
Step 1. Log in to your Blogger Account and Go to your Blogger Dashboard
Step 2. Click on -> Template->Edite HTML
Step 3. Now Find the ]]></b:skin> By Pressing ctr+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 Past it Above /Before <div id='main-wrapper'>.
<b:section class='banner section' id='banner' maxwidgets='1' showaddelement='yes'/>
After completing the above process, you have successfully created ad weight container slow below header in your blogger template.
Step 7. Now to create an advertisement slot above the 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 Past 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 have created below header section and above footer.now your template is ready to show responsive AdSense ads.
I hope you enjoy this post and the photos. How to add Gadget Below Header And Above Footer In Blogger Blogspot.
