How To Make Responsive Adsense Link Ad Unit

No like other type ad, Adsense link ad is not available in responsive size. To make responsive, we should to modify first. Link ad in this blog also modified too. We use a CSS display:block and display:none to manipulate in Media Queries. Here is the steps and i assume the link ad in below of navigation like this blog

As we know, there are 6 link ad sizes
  1. 728 x 15 (Horizontal Large)
  2. 468 x 15 (Horizontal Medium)
  3. 200 x 90 (Vertical X-Large)
  4. 180 x 90 (Vertical Large)
  5. 160 x 90 (Vertical Medium)
  6. 120 x 90 (Vertical Small)

create responsive adsense link ad unit

For Main Blogger, we need 3 link ads.
  1. for resolution > 728px we use 728 x 15 (Horizontal Large) link ad. Let say the CSS code is .link-ad728
  2. for resolution < 728px we use 468 x 15 (Horizontal Medium) link ad. Let say the CSS code is .link-ad468
  3. for resolution < 468px we use 200 x 90 (Vertical X-Large) link ad. Let say the CSS code is .link-ad200


CSS Code

To make all link ads works on different resolution, we need a modify CSS code. Go to Template > Edit HTML and find ]]></b:skin>. Copy and paste this code below above that code
@media screen {
}
@media screen and (max-width: 767px) {
.link-ad728{display:none}
.link-ad468{display:block}
}
@media screen and (max-width: 479px) {
.link-ad468{display:none}
.link-ad200{display:block}
}
SAVE


HTML Code

Now, go to Layout. Copy and paste this code below in HTML/JavaScript widget
<div class='link-ad728'>
<!-- ADSENSE 728 X 15 HERE -->
</div>
<div class='link-ad468'>
<!-- ADSENSE 468 X 15 HERE -->
</div>
<div class='link-ad200'>
<!-- ADSENSE 200 X 90 HERE -->
</div>


Result

Here is the result with those steps. (Check in this blog for demo)
  1. when the resolution > 767px, ad link size 728 x 15 will be appeared. Both 468 x 15 and 200 x 90 not appear
  2. when the resolution < 767px and > 479px, ad link size 728 x 15 will be not appeared. 468 x 15 appear and 200 x 90 not appear
  3. when the resolution < 479px, both ad link size 728 x 15 and 468 x 15 not appear, 200 x 90 appear

Note :
- you can edit the name class for each link ads as you want and it must same name in HTML code
- Media Queries maybe different with your current code (if your blog is responsive)
- this trick also works with other type ads - you can add another link ad size. just add new code or adjust it


Other methods

Here is another resources method responsive Adsense Link Ad Unit

Updates

Adsense now supports responsive Link Ad Unit

No comments:

Post a Comment