Register Arama Bugünkü Mesajlar Tüm Forumu Okundu Say

Reply
 
Thread Tools
Responsive AdSense
 
TTayfun's Avatar
TTayfun
TTayfun has a brilliant futureTTayfun has a brilliant futureTTayfun has a brilliant futureTTayfun has a brilliant futureTTayfun has a brilliant futureTTayfun has a brilliant futureTTayfun has a brilliant futureTTayfun has a brilliant futureTTayfun has a brilliant futureTTayfun has a brilliant future
Gerçek Ad: Tayfun T.
Kayıt Tarihi: Nov 2017
Mesajlar: 170

Güzergah: Istanbul Anadolu
Show Printable Version Email this Page
Makale: XenForo 1, yazan TTayfun 26 Nov 2017, 01:50
Oylama: (1 oy - 2.00 ortalama)

One of the biggest concerns with 1.2 has been how to activate the responsive design while still using AdSense.

Obviously as the various page widths are now totally dynamic, simply adding a Google ad slot in the normal manner won't work.
Once the browser width reduces below the width of the advertisement, it will break out of the right hand side, producing a horizontal scrollbar.

This is a simple guide explaining how to display different ad slots based on the screen width.

This is based on Google's own recommendation (Modification of the AdSense ad code - AdSense Help) and as it is JavaScript based, the advertisements will not change on the fly as the browser window is resized. Instead, a page refresh is required.

What follows below are examples using standard AdSense code.
Google have since introduced asynchronous AdSense code - see here for how to implement that: Utilising the new asynchronous ad code

Here then are a few examples with some explanatory text.

The items highlighted in red are the important bits of code which are in addition to regular AdSense code.
The items highlighted in blue are the different ad slots.

The first is using the ad_thread_list_below_stickies template.


Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

What the above code will do is display the advertisements as follows:
  • Browser width 483 and below - 320x50
  • Browser width 484 to 743 - 468x60
  • Browser width 744 and above - 729x90

So as you can see, as the browser window increases (or reduces) in width, different ad slots are served.

Here's another more complex example using the ad_message_below template:


Kod Blok Kilitli:      (Kayıt veya giriş yapmalısın)  
Engellenmiş, kayıtlı olmayan veya onay bekleyen kişiler kodlara erişemezler.

So anything up to 619px, the 320x50 ad slot will be served.
Between 620px and 879px, the 468x60 ad slot will be served.
At widths of 880px and above, the 728x90 ad slot will be served.

These trigger points are based on my style which includes the margin, padding, avatar block width and message content margin, which is 8+120+16+advert width+8.
So for the 468 wide advert it requires a width of 8+120+16+468+8 = 620.
Hence why the trigger point is width > 619.

These trigger points will vary from style to style - you will have to work them out.

[Source]: İçerik Kaynağı

Views: 197
Reply With Quote
Reply

Thread Tools

Şunları Yapabilirsin
Yeni Konu Açmak
Konuya Cevap Yazmak
Eklenti Eklemek
Düzenleme Yapabilmek

Forum Atla


LD'de Yeni misin? Yardıma mı ihtiyacın var?

All times are GMT +3. The time now is 10:59.

Tasarım Özelliği | Genişlik: Geniş Renk: Responsive AdSense Responsive AdSense Responsive AdSense Responsive AdSense Responsive AdSense