display:block
and display:none
to manipulate in Media Queries.
Updates
Adsense now support responsive Link Ad UnitAs we know, there are 6 link ad sizes.
- 728 x 15 (Horizontal Large)
- 468 x 15 (Horizontal Medium)
- 200 x 90 (Vertical X-Large)
- 180 x 90 (Vertical Large)
- 160 x 90 (Vertical Medium)
- 120 x 90 (Vertical Small)
Recommended Posts
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.- when the resolution > 767px, ad link size 728 x 15 will be appeared. Both 468 x 15 and 200 x 90 not appear
- 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
- 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
Post a Comment