Scribd
Upload
78 views

Add A Gadget Slot Below Header and Above Footer in Blogger Template - BloggersStand

This article explains how to add gadget slots below the header and above the footer in a Blogger template to display advertisements. It involves adding code to create two sections called "banner" and "banner2", then inserting them in the correct places in the HTML. This allows ads to be placed in desirable locations that will be visible to readers.

Uploaded by

Mathew Mkude
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
78 views

Add A Gadget Slot Below Header and Above Footer in Blogger Template - BloggersStand

This article explains how to add gadget slots below the header and above the footer in a Blogger template to display advertisements. It involves adding code to create two sections called "banner" and "banner2", then inserting them in the correct places in the HTML. This allows ads to be placed in desirable locations that will be visible to readers.

Uploaded by

Mathew Mkude
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

8/25/2019 Add a Gadget Slot Below Header And Above Footer In Blogger Template | BloggersStand

Advertise Here

ADD A GADGET SLOT BELOW HEADER AND ABOVE FOOTER IN BLOGGER

TEMPLATE

 06:30:00 / BY  BLOGGERSSTAND /  0 / IN  BLOGGER GADGETS , BLOGGER TUTORIALS , BLOGGER WIDGETS

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.

 ALSO READ...

HOW TO ADD A ADS SLOT ADD A GADGET IN BLOGGER LAYOUT

INSTALLATION STEPS:
https://www.bloggersstand.com/2015/12/create-new-ads-container-gadget-in-blogger.html 1/4
8/25/2019 Add a Gadget Slot Below Header And Above Footer In Blogger Template | BloggersStand

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>

CODE

/*Ad Slot widget by http://www.bloggersstand.com */


.banner, .banner2 {margin:0 auto;text-align:center;over ow:hidden;}
.banner .widget,.banner2 .widget {width:970px;max-width:100%;margin:0
auto;background:transparent;text-align:center;over ow: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;over ow:hidden; oat:none}
#layout #banner .add_widget,#layout #banner2 .add_widget{width:80%;margin:5px
auto!important;over ow:hidden; oat: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'>.

CODE

<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:

https://www.bloggersstand.com/2015/12/create-new-ads-container-gadget-in-blogger.html 2/4
8/25/2019 Add a Gadget Slot Below Header And Above Footer In Blogger Template | BloggersStand

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'> 

CODE

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

 SUMMARY

How To Create Or Add A Gadget


Slot Container,Part,Section In
Blogger Template,To Display
Adsense Ads Below Header And
Above Footer Section Add A
Gadget In Blogger Layout To
Display Ads Headlines.

KEEP ON READING...

https://www.bloggersstand.com/2015/12/create-new-ads-container-gadget-in-blogger.html 3/4
8/25/2019 Add a Gadget Slot Below Header And Above Footer In Blogger Template | BloggersStand

We hope this article helped you to learn Add a Gadget Slot Below Header And Above Footer In Blogger
Template. If you have any question or any complication please don't hesitate to ask us.You can drop your
message below in the comment box or you can Contact Us!. If you liked this article please join us on : 
Facebook | Twitter | Google+

 SUBSCRIBE ARTICLES BY EMAIL Enter your email...

SUBSCRIBE

https://www.bloggersstand.com/2015/12/create-new-ads-container-gadget-in-blogger.html 4/4

You might also like