How to Create Floating Left and Right Banner Ads in WordPress

Spread the love

Last updated on July 13th, 2021 at 08:02 am

In this tutorial, we are going to discuss how you can create left and right floating banner ads on WordPress or Blogger website. Plugins like Q2W3 fixed widget can help you place sticky sidebar ads on your site. However, it is not possible to display wallpaper ads on your desktop screens using standard WordPress plugins.

Thus, publishers are left with the option either to buy a premium plugin like WP Advanced Ads to set up a sticky ad or hard code it. In this tutorial, we will learn how you can hardcode a sticky wallpaper ad on WordPress using simple CSS properties. We would be requiring very basic knowledge of CSS and HTML for this and you need to have access to your Theme editor for this action.

Benefits of Creating Floating Banner Ads or Wallpaper Ads on your WordPress Blog

We recommend publishers to try sticky 160×600 sticky ad units on their website and here are some of the benefits which would justify a similar setup.

1. Promote a website offer or ask your visitors to install your app if you’ve recently launched a app and want your website visitors to try the app.

Also Read:  A Beginner’s Guide to App Store Optimization for Developers: Tips

2. You can show CPM based ads from direct buyers. A wallpaper ad unit has 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).

3. Enable auto-refreshing ad units on desktop. You can set time-based auto-refreshing ADX ad units on mobile. Quite many 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 a 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 Floating Banner Ads or Wallpaper Ads on WordPress

It is something like sticky left and right rail ads or wallpaper ads which you have noticed on various publisher websites. Here, we will look at how you can set up these sticky desktop ad units on your website.

This is the ad script which you need to place in the CSS stylesheet of your blog template. Normally, the CSS file is defined as stylesheet.css on your theme editor. So, login to your WordPress blog, go to theme editor and open the stylesheet.css file and update the following code.

Left Aligned Floating Code for Wallpaper Ads: CSS Code

@media only screen and (min-width: 1400px) and (max-width:500px) {

#LeftFloatAds{

left: 0px;

position: fixed;

text-align: center;

top: 0px;

}

}

Right Aligned Floating Code for Wallpaper Ads: CSS Code

@media only screen and (min-width: 1400px) and (max-width:500px) {

#RightFloatAds{

right: 0px;

position: fixed;

text-align: center;

top: 0px;

}

}

Here is a little technical brief of the ad code

@media—We call this as media query which is a CSS element that tell the browser to execute the code on if the screen width is between 310 px to 500 px (i.e. this ad code would appear on feature phones and smartphones having a maximum width of 500 px)

Also Read:  How to Create Sticky Mobile Footer Ads in WordPress

#LeftFloatAds #RightFloatAds – It is defined as a CSS with an id named as LeftFloatAds. This id would have the CSS property defined under the {}

Addon notes: The position is set to fixed and aligned centrally. This means that the elements in the ad code will not move as the user scrolls the screen.

Ad Code

<div id=”LeftFloatAds”> your ads code here </div>

<div id=”RightFloatAds”> your ads code here </div>

Now copy the ad code from the notepad or where you’ve saved the ad. Place the ad code in the section of the code which says, “your ads code here”. Copy the updated code and place it before the end of the head that ( i.e. </head>)

Placing the ad code before the closing of the head tag ensures that the ad will be loaded every time the header of the article is called, and the display properties of the ad code is defined by id = LeftFloatAds or RightFloatAds.

Now, that you know how to create wallpaper ad codes on desktop (left aligned and right aligned), let’s take a look at how we can create sticky ads on mobile.

Thus, to conclude, auto-refreshing wallpaper ad codes can work like a charm and increase your overall ad revenue. Also, it helps you to promote website offers and app installs on your site or in fact if you’ve any advertiser for your site. So, let’s go ahead and setup wallpaper ads on desktop. Also, do check our tutorial on creating sticky bottom mobile ads here.


Spread the love

Leave a Comment