Skyrocket Your Blog Traffic!
Join our newsletter to get guides which will help you boost your blog traffic for free!

How To Make AdSense And Other Non-Responsive Ads Responsive

4/16/2017 No Comment
Make Money Online

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,, 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 -

    • Responsiveness is on demand
    Ok, tell me one thing, whenever you go to a search engine and try to find a good blog template, what results do you get?

    Here is an infographic about importance of responsive design -

    Importance Of Responsive Design

    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 - 

    Blog Template Search Results

    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)

    "Responsiveness is the key to getting mobile visitors."

    • Visitors hate non-responsive ads
    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

    Idea? Ya, that's an idea, or you can say jugaad (lol, this word so so funny :P). 

    What we're going to do is using CSS(Cascading Style Sheet). We'll first check the size of our ad, and according to that, we'll use max-width property. Then we'll use CSS overflow property so that the ad doesn't go out of the page and the page remains responsive.

    Liked the idea? Might not, but it works!

    Here's the screenshot of this trick -

    Responsive vs non-responsive ad

    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.

    2- Enclose the ad code in a div.

    Like this - 

    <!--Ad--><div class='ad'></div><!--Ad-->

    3- Use HTML style attribute to add CSS styles -

    Like this -

    <div style="">
    <!--Ad--><div class='ad'></div><!--Ad-->

    4- Finally add this code in the style property -


    5- The final code will be -

    <div style="max-width:95%;overflow:auto;"><!--Ad--><div class='ad'></div><!--Ad--></div>

    6- That's it!

    We've used just two CSS styles to make an ordinary non-responsive ad into responsive one!

    Note- Always use 95% or less widget in the max-width attribute so that page remains in same proportion. Using 99% or 100% might not work all times.

    Testing Part -

    To test the responsiveness of the ad, just decrease the browser window size below the ad width. For example - If you chose 728x90 ad then make your window width 700px or less. 

    You'll see a scrollbar in the ad which will help the page not to go outside whole width of the page.

    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.

    Good Luck :)

    Join Our Newsletter!

    Join our newsletter to get regular updates with secret tips/tricks to skyrocket your blog rankings!

    No comments:

    Post a Comment

    Powered by Blogger.