In this tutorial, we will discuss how you can create left and right floating banner ads on your WordPress or Blogger website. While there are plugins available to place sticky sidebar ads, displaying wallpaper ads on desktop screens using standard WordPress plugins is not possible. Therefore, we will learn how to hardcode a sticky wallpaper ad on WordPress using simple CSS properties. This tutorial assumes basic knowledge of CSS and HTML, and you will need access to your theme editor to implement the changes.
Before we dive into the implementation, let’s understand the concept of floating banner ads. Floating banner ads are those that remain fixed in a specific position on the screen while the user scrolls through the content. They are a popular choice for advertisers as they are highly visible and can grab the attention of website visitors.
To create floating left and right banner ads, we will use CSS properties such as position: fixed, top, left, right, and z-index. These properties allow us to control the position and visibility of the ads on the screen. By setting the position to fixed, we ensure that the ad remains in the same position even when the user scrolls.
Now, let’s start with the implementation. First, you need to identify the areas on your website where you want to display the left and right floating banner ads. These areas could be the sidebars, header, or footer, depending on your website’s layout. Once you have identified the areas, you can proceed with the following steps:
- Open your WordPress theme editor by navigating to Appearance > Theme Editor.
- Locate the file where you want to add the floating banner ad code. This could be the header.php, footer.php, or any other relevant file.
- Inside the selected file, find the appropriate section where you want to place the ad code. For example, if you want to display the ad in the header, find the header section.
- Insert the following HTML code inside the selected section:
<div class="floating-banner left"> <img src="left-banner.jpg" alt="Left Banner Ad"> </div> <div class="floating-banner right"> <img src="right-banner.jpg" alt="Right Banner Ad"> </div>
Make sure to replace “left-banner.jpg” and “right-banner.jpg” with the URLs or file paths of your actual banner images. You can also customize the alt attribute to provide a descriptive text for the images.
Next, we need to add the CSS code to style and position the floating banner ads. Add the following CSS code to your theme’s stylesheet or inside the <style> tags in the header.php file:
.floating-banner {
position: fixed;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
}
.left {
left: 20px;
}
.right {
right: 20px;
}
The CSS code above sets the position of the floating banner ads to fixed, which ensures that they remain in the same position even when the user scrolls. The top property positions the ads vertically in the middle of the screen, while the transform property with translateY(-50%) centers the ads horizontally. The z-index property ensures that the ads appear above other elements on the page.
Finally, the left and right classes determine the horizontal position of the ads. In the example above, the left class sets the left property to 20px, which positions the left floating banner ad 20 pixels from the left edge of the screen. Similarly, the right class sets the right property to 20px, positioning the right floating banner ad 20 pixels from the right edge of the screen.
Once you have added the HTML and CSS code, save the changes and refresh your website to see the floating banner ads in action. You can further customize the appearance and behavior of the ads by modifying the CSS code according to your requirements.
By following the steps outlined in this tutorial, you can easily create floating left and right banner ads on your WordPress or Blogger website. These eye-catching ads can help you monetize your website and attract the attention of your visitors, ultimately boosting your revenue and engagement.
Benefits of Creating Floating Banner Ads or Wallpaper Ads on Your WordPress Blog
Before we dive into the technical aspects, let’s explore the benefits of creating floating banner ads or wallpaper ads on your WordPress blog:
- Promote a website offer or ask visitors to install your app: If you’ve recently launched an app and want your website visitors to try it, a floating banner ad can be an effective way to grab their attention and encourage them to take action. With a floating banner ad, you can strategically place it on your blog, ensuring that it remains visible as visitors scroll through your content. This increases the chances of them noticing the ad and taking the desired action.
- Show CPM-based ads from direct buyers: Wallpaper ads have a 100% view rate, which means users have ample time to interact with the ad creative. Direct buyers often prefer this ad format to convey their message to their target audience, whether it’s for brand awareness or an action-oriented campaign. By creating a wallpaper ad on your WordPress blog, you can attract direct buyers who are willing to pay a premium for the high visibility and engagement that this ad format offers.
- Enable auto-refreshing ad units on desktop: By setting up time-based auto-refreshing ad units, you can increase overall revenue. Many ad networks, including Google Ad Exchange, allow auto-refreshing of ad units. Publishers can choose the duration before the ad unit refreshes, and websites with high time on site have seen a significant boost in revenue from these ads. When it comes to floating banner ads or wallpaper ads, auto-refreshing can be particularly beneficial as it ensures that the ads remain fresh and relevant to the visitors, increasing the likelihood of them engaging with the ads.
- Enhance the visual appeal of your blog: Floating banner ads and wallpaper ads can add a visually appealing element to your WordPress blog. When designed well, these ads can seamlessly integrate with your blog’s overall design and enhance the user experience. By carefully selecting the colors, fonts, and visuals for your ads, you can create a cohesive and aesthetically pleasing look for your blog.
- Maximize ad revenue: Floating banner ads and wallpaper ads have the potential to generate higher ad revenue compared to traditional banner ads. Their prominent placement and increased visibility make them more likely to capture the attention of visitors, resulting in higher click-through rates and conversions. Additionally, by attracting direct buyers and implementing auto-refreshing ad units, you can further optimize your ad revenue and maximize your earnings.
Now that we understand the benefits, let’s proceed with the steps to create floating banner ads or wallpaper ads on WordPress.
Locate the section of the CSS code that controls the positioning of the banner ad or wallpaper ad. This section will typically contain properties such as “position”, “top”, “left”, “right”, and “bottom”.
To create a floating banner ad, you will need to set the “position” property to “fixed”. This will ensure that the ad stays in a fixed position on the screen, even when the user scrolls down the page. Adjust the values of the “top”, “left”, “right”, or “bottom” properties to position the ad exactly where you want it on the screen.
If you want to create a wallpaper ad, you can set the “position” property to “fixed” as well. However, instead of positioning the ad in a specific location on the screen, you will need to set the “background-image” property to the URL of the image you want to use as the wallpaper ad. You can also adjust other properties such as “background-size” and “background-position” to customize the appearance of the wallpaper ad.
Once you have made the necessary changes to the CSS code, click on the “Update File” button to save your changes.
Now, you will need to add the HTML code for the banner ad or wallpaper ad to your WordPress blog. To do this, navigate to the “Widgets” section in the WordPress dashboard.
Drag and drop a “Text” widget to the desired location on your blog where you want the ad to appear. This could be in the sidebar, footer, or any other widgetized area of your theme.
In the “Text” widget, paste the HTML code for the banner ad or wallpaper ad. You can obtain this code from an advertising network or create it yourself using HTML and CSS.
Save the changes to the widget and visit your blog to see the floating banner ad or wallpaper ad in action.
By following these steps, you can easily create and display floating banner ads or wallpaper ads on your WordPress blog. These types of ads can be effective in attracting the attention of your visitors and promoting your products or services.
Left Aligned Floating Code for Wallpaper Ads
Below is the CSS code for left-aligned floating wallpaper ads:
@media only screen and (min-width: 1400px) and (max-width:500px) {
/* Insert your CSS code here */
.wallpaper-ad {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url('wallpaper.jpg');
background-repeat: no-repeat;
background-size: cover;
z-index: 9999;
}
.content {
margin-left: 300px; /* Adjust the value according to your needs */
}
}
When designing a website, it is important to consider the placement and appearance of advertisements. One popular advertising format is the wallpaper ad, which covers the entire background of a webpage. This type of ad can be eye-catching and engaging, but it requires careful implementation to ensure it does not interfere with the user experience.
The CSS code provided above demonstrates how to create a left-aligned floating wallpaper ad. The media query specified in the code ensures that the ad is only displayed on screens with a width between 1400px and 500px. This allows for responsive design, as the ad will only be visible on devices with a specific screen size range.
Within the media query, two CSS classes are defined: .wallpaper-ad and .content. The .wallpaper-ad class is responsible for positioning the ad on the left side of the screen. It uses the position: fixed; property to ensure that the ad remains in place even when the user scrolls. The top: 0; and left: 0; properties position the ad at the top left corner of the screen.
The .content class is used to create a margin on the left side of the content area. This ensures that the main content of the webpage is not obscured by the ad. By adjusting the margin-left value, you can control the amount of space between the ad and the content.
By using this CSS code, you can effectively implement a left-aligned floating wallpaper ad on your website. However, it is important to consider the overall design and user experience when using such ads. Make sure that the ad does not disrupt the readability or functionality of the website, and always test it on different devices and screen sizes to ensure optimal performance.
Right Aligned Floating Code for Wallpaper Ads
Below is the CSS code for right-aligned floating wallpaper ads:
@media only screen and (min-width: 1400px) and (max-width:500px) {
/* Insert your CSS code here */
.floating-ad {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 300px;
height: 600px;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px;
box-sizing: border-box;
z-index: 9999;
}
.floating-ad img {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.floating-ad p {
margin-bottom: 10px;
font-size: 16px;
line-height: 1.5;
}
.floating-ad a {
display: block;
text-align: center;
padding: 10px 20px;
background-color: #000;
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: bold;
border-radius: 5px;
}
}
Remember to replace “/* Insert your CSS code here */” with the actual CSS code for your wallpaper ads. This code will define the positioning and behavior of the floating ads on your website.
Once you have updated the CSS code, save the changes and check your website to see the floating banner ads in action. You may need to adjust the CSS properties to achieve the desired placement and appearance.
By hardcoding the sticky wallpaper ads using CSS, you have more control over their behavior and can ensure a seamless user experience. Experiment with different designs and placements to find the best approach for your website.
Remember to regularly monitor the performance of your floating banner ads and make adjustments as needed to optimize their effectiveness. With the right strategy and implementation, these ads can enhance your website’s monetization and user engagement.
In addition to the CSS code provided above, you may also need to consider the HTML structure of your website to properly integrate the floating ads. Make sure to create a container element for the ad, such as a div, and give it a unique class or ID that matches the CSS code.
For example, if you want to display the floating ad on the right side of your website’s content, you can place the ad container inside the main content container and apply the appropriate CSS class or ID to position it correctly.
Furthermore, it’s important to consider the overall user experience when implementing floating banner ads. While they can be effective in grabbing attention and increasing click-through rates, they can also be intrusive if not implemented thoughtfully.
Consider the size and placement of the ad to ensure it doesn’t obstruct the main content or negatively impact the user’s browsing experience. It’s also a good practice to limit the number of floating ads on a page to avoid overwhelming the user with excessive advertising.
Lastly, don’t forget to test the floating ads on different devices and screen sizes to ensure they are responsive and provide a consistent experience across various platforms. This will help you reach a wider audience and maximize the impact of your advertising efforts.
