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.

Updates

Adsense now support responsive Link Ad Unit

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)

Recommended Posts

• How To Add Adsense Inside Post
• How To Add Adsense Above The Comment System
• How to Turn Your Blog Into A Cash Cow

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.

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

• 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

• Create a responsive ad unit from Google Support
• Responsive link ad from Digital Internals