How To Create Sticky Footer Ads In Blogger And WordPress? - Fiolty

How To Create Sticky Footer Ads In Blogger And WordPress?

Sticky Footer Ads For Blogger And WordPress
Create Sticky Footer Ads

Want To Create A Sticky Footer Ads for Mobile ? If yes then you are at the right place ! In this tutorial we are going to teach you how to Create Sticky Footer Ads in Blogger or WordPress.

Benefits Of Creating Sticky Footer Ads! 

Sticky Footer Ads is basically ads widget for Mobile Device, Imean when you access your site with your mobile device this ads will show in your top or bottom of your Screen. 

If your maximum traffic's are using mobile device then you have to add this widget in your site because I'll increase your earning.

Benefits — There are few benefits you'll get after adding this widget on your website. Promotion , CMP Based Ads , Auto Refresh Ads.

Let's Explain It

PROMOTION : With the help of this widget you can promote a website Offer or ask your visitors to your app . If You recently Launched app and want your website visitors to try the app.

CMP BASED ADS :  You can show CPM based ads from direct buyers. A sticky mobile ad unit has a 100% view rate and thus it gives enough time to the users to interact with the ad creative and direct buyers would prefer this ad format to send their message to their target audience (be it a brand awareness or an action-oriented).

AUTO REFRESH ADS : Enable auto-refreshing ad units on mobile. You can set time-based auto-refreshing ADX ad units on mobile. Quite a number of ad networks like Google Ad Exchange and others allow auto-refreshing of ad units. While publishers can choose the duration of the ad unit before it refreshes, we have seen marked increase in overall revenue for these ads on websites which have high time on site. We can help you get started with auto-refreshing ad units. Get in touch.

How To Create Sticky Footer Ads?

If you want to create Sticky Footer Ads in your website then you have to add little bit css and html . In this article we'll share 2 css for Sticky Footer Ads . You can add Sticky ads on your top of screen or bottom of screen. Choice is Your !

ADD HTML —

For adding this html code you can put it anywhere in your theme but we recommend you to add this code before  </body>  tag or After </footer> Tag.

<b:if cond='!data:view.isHomepage and !data:view.isPage and data:blog.isMobileRequest'>
          <!--[ Sticky ad ]-->
          <input class='stickAdin hidden' id='stickAdin' type='checkbox'/>
          <div class='stickAd'>
            <label class='stickAdclose' for='stickAdin'><b:include name='close-icon'/></label>
            <div class='stickAdcontent'>
              
              <!--[ Ads Code Here ]-->

            </div>
          </div>
        </b:if>

DESCRIPTION —  Replace <!--[ Ads Code Here ]--> With Your Ads Code ,or Img with Link.   Remove This Code !data:view.isHomepage and  if want to show sticky Footer Ads in your Home Page By default it'll show only in Post Page. You can display sticky footer ads in desktops by removing this code  and data:blog.isMobileRequest .

ADD CSS —

For Adding This CSS Code You can directly put this css in the Head Section . Simply Put This Below Css Just Above The  </head>  tag.

<style>/*<![CDATA[*//* Sticky Ad */
.stickAd{position:fixed;bottom:0;left:0;right:0;width:100%;min-height:70px;max-height:200px;padding:5px 5px;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition:all .1s ease;transition:all .1s ease;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:50;border-top:1px solid #eceff1;} .stickAdclose{width:40px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:12px 0 0;border:1px solid #eceff1;border-bottom:0;border-right:0;position:absolute;right:0;top:-30px;background-color:inherit} .stickAdclose svg{width:18px;height:18px} .stickAdcontent{flex-grow:1;overflow:hidden;display:block;position:relative} .stickAdin:checked ~ .stickAd{padding:0;min-height:0} .stickAdin:checked ~ .stickAd .stickAdcontent{display:none} .darkMode .stickAd{background-color:#2d2d30;} .darkMode .stickAd, .darkMode .stickAdclose{border-color:rgba(255,255,255,.1)}/*]]>*/</style>
DESCRIPTION — If you want to show your sticky Ads in the top of screen then use the below css . Ignore the above one. 
<style>/*<![CDATA[*//* Sticky Ad */
.stickAd{position:fixed;top:0;left:0;right:0;width:100%;min-height:70px;max-height:200px;padding:5px 5px;box-shadow:0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition:all .1s ease;transition:all .1s ease;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:50;border-top:1px solid #eceff1;} .stickAdclose{width:40px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:0 0 12px;border:1px solid #eceff1;border-top:0;border-left:0;position:absolute;left:0;bottom:-30px;background-color:inherit} .stickAdclose svg{width:18px;height:18px} .stickAdcontent{flex-grow:1;overflow:hidden;display:block;position:relative} .stickAdin:checked ~ .stickAd{padding:0;min-height:0} .stickAdin:checked ~ .stickAd .stickAdcontent{display:none} .darkMode .stickAd{background-color:#2d2d30;} .darkMode .stickAd, .darkMode .stickAdclose{border-color:rgba(255,255,255,.1)}/*]]>*/</style>

Conclusion —

I hope you can create Sticky Footer Ads now easyly with this tutorial. If you still have any question related to this then feel free to ask in the comment section. And Don't Forget to give the 5 Start Rating on this article.

Rate the article ツ