When it comes to monetization, AdSense and ads are the best friends for bloggers. We(bloggers) use different kinds of ads including pop-ups, display ads, native ads, etc. But the biggest problem bloggers face is the responsiveness issue. Almost 90% of ads including Adsense ads are not responsive, as ads are fetched by an iframe. But do you know that there is a trick to fix this issue! Yes, today I am sharing a method by which you can convert any none-responsive ad into responsive, which will help you in making your blog UX better.
Why you need responsive ads?
Hmm.. nice question, right? Whether it is Chitika, Media.net, AdSense, or any other ad network, they all provide non-responsive ads. Visitors hate these ads! And that's why they use Adblockers!
Therefore there is a need to use responsive ads. Here are some reasons why to use them -
10 Best Responsive Blogger Template?
Like this and blah blah. You'll find nine or even ten results using the keyword "Responsive."
Don't believe? Here's a screenshot -
Note- Only a few results are shown above
Saw the results? Now you need to share this post as I just saved your internet data (haha just kidding :P)
Yes, that's the harsh truth! How would you feel scrolling miles using your mouse to find the content you're looking for? Irritating, right? The same happens to your blog visitors. We just sit back and relax to get money into our pockets but isn't it bad for your visitors?
Google and other search engines can start neglecting your blog if found non-responsive! And that's a fact!
Search for anything on Google using your mobile and try to open each link, you'll find all of them having responsive design.
What's this? That's a big thumb down for non-responsive sites and blogs!
If you want to learn more about responsiveness, then you can check out this guide.
Okay, let's leave this now and start on the main topic(thanks for having patience :P).
Must Read : How To Double Your Income Using Affiliate Marketing
The Idea
Liked the idea? Might not, but it works!
Here's the screenshot of this trick -
So from the above image, you can see how we will use CSS to make any non-responsive into a responsive scrollable ad. This does not only help you to make your blog responsive but also help your blog visitors to see full ad rather than a non-visible(or hidden) ad.
This improves your ads CTR definitely helping you to make more money out of your blog.
So without wasting more time, let's start!
Making AdSense And Non-Responsive Ads Responsive
So below are some simple steps by which you can make any non-responsive ad responsive!
1. Understand the layout of your blog
First of all, we need to know the layout of our blog. For example - This blog has two column layout (Sidebar and posts). Your blog might have another.
You need to know the place and approx widget of the column where you're going to show an ad. We need to know this as we're going to play with width styles.
Now what you need to do is only use those ads which have less width than the parent element. For example - If you're going to use an ad in sidebar having width 450px, then you can't use ads having a width greater than 450 px. So 300x250 ad unit is the best.
I've seen many bloggers placing 72x90 ads in their blog's sidebar which is an awful practice!
If you're doing this type of work, then this trick might not work!
2. Know the ad size you're going to use
You need to know which ad size you're going to use in the ad placement. This will help in making this trick work more efficiently.
This will help us to look for breakpoints where our ad will become responsive.
Now come's the magical part -
3. The Magical Code
That's not magical actually rather useful :P
1- Copy your ad code. I am using <!--Ad--><div class='ad'></div><!--Ad--> as an example.
max-width:95%;overflow:auto;
5- The final code will be -
The scrollbar style will be just like of your blog's scrollbar style. You can also disable the scrollbar, but that's not recommended.
How this trick works?
You must be eagerly waiting to know the working of this method. Here's how this works -
Firstly we enclose the ad in a parent div so that the div can handle the styles. Now we use max-width property with percentage value so that the div never occupies 95% of the page. If the page size gets decreased then the width of the ad, then this CSS property comes into play and crops the extra width of the ad. Now using overflow property, we enable the div to show the cropped part only by scrolling so that it doesn't affect the original width of the page.
Final Words
So this was a small but useful trick by which you can make AdSense or any non-responsive ad into responsive one using CSS.
Hope you liked this method. Do share it with your friends so that they can also make their pages responsive.
Do share your experience using this trick and let me know your thoughts through comments.
Follow us on social media and do subscribe us to get more interesting tricks directly.
