Responsive Sticky Ads For Maximum Adsense Revenue. Hi guys! It’s Ola again, your Favorite author here on SlikkyHelp. Today, I’ll guide you in creating responsive sticky ads for maximum ad revenue.
But before we move forward, you must register on SlikkyHelp and follow me to stay up-to-date about the latest tips and tricks on Digital Entrepreneurship. Make sure you click the like button on my articles and react at the end of the article.
After all is said, let’s begin!
Responsive Sticky Ads For Maximum Adsense Revenue
Adaptable means the term responsive. With good user experience, we say it’s responsive when an image, ad, or website fully adapts to any device.
To fully grasp this article about making sticky ads Responsive, you might want to review my previous piece, where I discussed “How To Add Sticky ADS Code To Header And Footer“.
I am releasing this new code; as you all know, we have different tastes when choosing ad sizes. It’s intended to make the ads entirely responsive while explaining how to achieve that yourself.
Considering that you’re using stick ads with Adsense ads, as I’m doing this, you can ignore this article if you’re not using it with Adsense. I could release another version that works with other ads; however, there are no requests for that right now.
Your Sticky Ads should take less of Your Screen.
By adding some media element to control the size of our ads, if the user device width is smaller than a Desktop PC and other larger screens, we will use inline CSS (Cascading Style Sheets) to manipulate our ads.
Your ads will still look great on nonmobile devices; do not despair. Our Previous code in my previous article was like this below:
<script type='text/javascript'>
$(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);'> <div>
<a id='close-fixedban' onclick='document.getElementById("fixedban").style.display = "none";' style='cursor:pointer;'>
<img alt='close' src=' https://slikkyhelp.com/wp-content/uploads/2023/09/slikkyhelp_stickyads_btn_close.gif ' title='close button' style='vertical-align:middle;'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<center>
<font color="#D3D3D3">ADVERTISEMENT</font><br/>
<!-- SlikkyHelp Sticky Ads - Add Your Adsense Code Below Here -->
Insert Your Adsense or Ads Code You Want To Stick Here
<!-- SlikkyHelp Sticky Ads - Do not Add Anything Below Here -->
</center>
</div>
</div>
Now, where you insert your AdSense ads code, we need to add some little elements to target that ad specifically with CSS, like the below example:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-😂😂😂😂😂😂"
crossorigin="anonymous"></script>
<!-- 🥰 -->
<ins class="adsbygoogle" id="sticky-jelly"
style="display:block"
data-ad-client="ca-pub-😂😂😂😂😂😂"
data-ad-slot="014024010101"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<style>
/* CSS rule targeting a specific ad with the id "sticky-jelly" */
@media only screen and (max-width: 768px) {
#footer {
max-width: 250px !important; /* Set the maximum width for this sticky-jelly */
}
}
</style>
Code Explanation For Better Understanding
Code Explanation For Better Understanding
768px is used as a value in a CSS media query in the modified code I provided. A screen width threshold in pixels is what it represents. Here’s what it means:
* @media: We’re defining a media query with this part, which enables the application of different CSS styles based on certain conditions like screen size.
* (max-width: The curly braces {} represent styles that should apply when the screen’s maximum width is 768 pixels or less according to this condition (768px).
So, in this context, it means that the styles within the media query (the max-width: Devices with a screen width of 768 pixels or smaller will have the 768px condition applied.
The “max-width: 250px !important;” tells our CSS to make sure the AdSense ads to be displayed can equal 250px in width or less than 250px in width.
If the screen size of our user devices is mobile, we are simply instructing our ads to display an ad between a maximum width of 250px, as I added in the code above, and this pixel size is what most responsive mobile phone ads use.
Adjusting this value according to your preferences can target different screen sizes. If your goal is to apply the maximum ad width on smaller screens, you can use a less than 768px value I have given.
The 768 is for controlling the kind of screen sizes we’re trying to target. Unless you know what you are doing, my advice is to let it remain at the default 768. Just mind it.
For lower-screen devices, if you want the ads to fill up half of your mobile phone, a larger value than 250px can be used, which I’ll explain further below.
If you want to manipulate the size of your ad for your sticky ads as I did in the above code by strictly setting the maximum width of the ads to 250px, you might want to increase yours to 300px or even lower it.
Your set size will be strictly adhered to by any ads displayed by Google ads. As I mentioned in my previous article about sticky ads policies and user experience, filling your user’s screen with ads is bad, so don’t go above 300px.
Decreasing the number of pixels by 10 allows you to experiment with different sizes and check the changes to determine what is good for you.
Responsive Sticky Ads on Desktop And PC Devices.
In the modified version of my earlier-provided codes. The attribute data-full-width-responsive=”true” included in the AdSense code is what you’ll notice if you check again.
AdSense is told to display the ads responsively on desktop and laptop screens by this attribute, data-full-width-responsive=”true.”
Ensuring that they display well and utilize the available screen width effectively, the ads will adapt their size and layout to fit the available space when viewed on larger screens.
Adjusting their size and layout as needed for larger screens, the ads should display responsively on desktop and laptop PCs to provide a good user experience.
Code Explanation on ID Targeting of sticky-jelly
I added an ID to the ads and named that ID sticky-jelly instead of targeting the ‘class=.adsbygoogle’ if you check the code carefully. Not using the class name to target the ad was my choice because all other Adsense ads on your blog also use it.
If we target the class name on the code in our CSS media, it will affect all the ads on your blog using the .adsbygoogle classes since the class name is constant for most Google ads code.
I introduce ‘ID=sticky-jelly’ to add a unique specific IDENTIFIER, so I use that ID as a target for the CSS to know which ads I’m trying to apply the responsive code to.
The styles apply only to the ad with that specific ID and won’t affect other instances of .adsbygoogle on your blog, and I ensure this by using the #slikky-jelly selector in the CSS.
That’s all about Responsive Sticky Ads For Maximum Adsense Revenue. This new code can be copied and pasted to replace your old code.
On SlikkyHelp, don’t forget to follow me. Please also share this article with all your social media platforms if you find it useful. It helps a lot.
You can leave your query in the form of a comment below if you require our help or assistance; we’d be more than happy to assist.
Thanks for reading about Responsive Sticky Ads For Maximum Adsense Revenue.
