How to install sticky AD blogger widget - Rauf Graphics
How to install sticky AD blogger widget

Hello once again today we are going to see how we can create sticky AD widget at the bottom of your website.

This looks very pretty if you are on PC then you will see at the bottom of my website or the bottom of this page which you are viewing now.

It is very easy to create this kind of blogger widgets I am also using this project and I decided to share it with you.

Advantages of sticky AD blogger widget:

  • Helps in increasing your AdSense revenue

Disadvantages of sticky Ad blogger widget:

  • This sticky add blogger visit has 1 disadvantage but you don't have to worry about it the disadvantage was that when someone open your website or view any page of your website this visit creates a full size AD.

Which can create invalid click on your AdSense account so I written some CSS code for that so that this visit will not be shown on mobile devices.

How to install sticky AD blogger widget:

It is very easy to install sticky AD blogger widget if you want to do that simply follow the steps below.
  1. Go to blogger.com
  2. Go to layout section
  3. Create a new widget as HTML / JavaScript widget
  4. Copy the code provided below and paste it as blogger widget content
  5. <script type='text/javascript'>
    //<![CDATA[ 
    $(document).ready(function() {$('img#closed').click(function(){$('#bl_banner').hide(90);});});
    //]]>
    </script>
    <div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);left:0;'>
    <div><a id='close-fixedban' onclick='document.getElementById('fixedban').style.display = 'none';' style='cursor:pointer;'><img alt="close" src="//1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif" style="vertical-align:middle;" title="close button"></a></div>
    <div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
    
    Paste Your Adsense Ad Code Here
    
    </div>
    </div><br>
    <style><br>
    @media (max-width: 1024px) {#fixedban{display:none;}}a{color:#f80538}
    </style>
    Replace Paste Your Adsense Ad Code Here with your adsense ad code.
  6. Save It

Conclusion of sticky AD blogger widget:

Our today's tutorial ends here I think you have got your answer and now you can go and refresh your website page to see this widget in work.

If you like my today's post make sure to subscribe to the newsletters of this blog to get updates of all upcoming posts and if you want to learn blogger or if you want to become master in blogger you should do it right now.
How to install sticky AD blogger widget

How to install sticky AD blogger widget

How to install sticky AD blogger widget

Hello once again today we are going to see how we can create sticky AD widget at the bottom of your website.

This looks very pretty if you are on PC then you will see at the bottom of my website or the bottom of this page which you are viewing now.

It is very easy to create this kind of blogger widgets I am also using this project and I decided to share it with you.

Advantages of sticky AD blogger widget:

  • Helps in increasing your AdSense revenue

Disadvantages of sticky Ad blogger widget:

  • This sticky add blogger visit has 1 disadvantage but you don't have to worry about it the disadvantage was that when someone open your website or view any page of your website this visit creates a full size AD.

Which can create invalid click on your AdSense account so I written some CSS code for that so that this visit will not be shown on mobile devices.

How to install sticky AD blogger widget:

It is very easy to install sticky AD blogger widget if you want to do that simply follow the steps below.
  1. Go to blogger.com
  2. Go to layout section
  3. Create a new widget as HTML / JavaScript widget
  4. Copy the code provided below and paste it as blogger widget content
  5. <script type='text/javascript'>
    //<![CDATA[ 
    $(document).ready(function() {$('img#closed').click(function(){$('#bl_banner').hide(90);});});
    //]]>
    </script>
    <div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);left:0;'>
    <div><a id='close-fixedban' onclick='document.getElementById('fixedban').style.display = 'none';' style='cursor:pointer;'><img alt="close" src="//1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif" style="vertical-align:middle;" title="close button"></a></div>
    <div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
    
    Paste Your Adsense Ad Code Here
    
    </div>
    </div><br>
    <style><br>
    @media (max-width: 1024px) {#fixedban{display:none;}}a{color:#f80538}
    </style>
    Replace Paste Your Adsense Ad Code Here with your adsense ad code.
  6. Save It

Conclusion of sticky AD blogger widget:

Our today's tutorial ends here I think you have got your answer and now you can go and refresh your website page to see this widget in work.

If you like my today's post make sure to subscribe to the newsletters of this blog to get updates of all upcoming posts and if you want to learn blogger or if you want to become master in blogger you should do it right now.
Disqus Codes

No comments

Subscribe Our Newsletter

Notifications

Disqus Logo
close