TheAdsense: Mobile | Your Blog Description

This article explains why mobile mattes for some blogs (but non all), what tools Blogger has provided to help amongst this, in addition to how to gear upwardly a mobile topic (aka template) for your blog. It also links to Google's mobile testing tool, which shows you lot how your weblog looks on a mobile device.

This article explains why mobile mattes for some blogs Info How to plough on a mobile topic / template for blogs inward Blogger

By default, when mortal uses a smartphone, tablet or other mobile device to expression at your blog, they run into the "full site" only similar they would if they were using a PC. The pages aren't gear upwardly to operate good on their small-scale screen, but they convey access to all the features in addition to gadgets you've installed.

In some cases, this is fine. For example, when I start wrote this article, I looked at the statistics for this site and hardly whatever of the visitors were mobile. However now, a brace of years after things convey changed in addition to I've implemented a mobile topic for this blog.

But for other blogs, specially ones that convey maps in addition to other location-information or which people read on the go, having a mobile-friendly topic is really important: for example, on my public-transport blog, over 25% of visitors are using mobile, in addition to that figure is growing. Making my site operate good for these visitors is definitely of import for its long-term time to come (and my brusque term advertising revenue!)

What's available

Blogger convey made a laid of mobile themes, to correspond the measure Designer Themes, in addition to thus far only 1 to correspond the Dynamic theme(s).

We cannot command the layout of gadgets on these - when the hide is only 300-ish pixels wide, there's non much room to move.

But nosotros tin add in addition to take gadgets, in addition to also past times choosing a custom template instruct coloring settings that correspond our master copy blog.

How to enable a mobile topic / template for your blog

Log in to Blogger using an concern human relationship amongst administrator rights to the blog.

Go to the Themes tab.

If your weblog has a Designer or Dynamic theme, in addition to thus at that spot volition live on a Mobile option to the correct of the "Live on Blog" area.

If the weblog is non gear upwardly to usage a mobile topic ,then the give-and-take Disabled will live on inward the middle of the motion painting surface area - although it may live on difficult to read if your base of operations template (chosen inward the Live on Blog area) has a motion painting behind it.

Click on the gear-wheel underneath the motion painting to run into the mobile options.

Select "Yes. Show mobile template on mobile devices."

Either locomote out the mobile template on Default, or select 1 of the other options.

If you lot conduct Default, your mobile template volition usage the measure template matching your desktop template.
If you lot conduct Custom, your mobile template volition usage the colour-scheme in addition to diverse features from your desktop template, in addition to you lot volition live on able to makes changes to these settings.

Use the Preview push if you lot desire to run into what your weblog volition expression similar amongst the selected template on a mobile device.

When you lot are happy amongst your selection, press Save.

What your readers see

Visitors to your weblog who are using a desktop PC (or laptop or netbook or whatever other auto amongst a full-size screen) won't run into anything different.

Readers who are using an internet-enabled στοιχείο (ie smartphone), tablet, iPad, etc volition run into a dissimilar view:

They won't convey a sidebar
The gadgets volition live on limited (unless you lot add together some extra ones) in addition to inward the header in addition to footer only
On the home-page at that spot volition only live on the title, thumbnail in addition to snippet for each post, in addition to a push for read-more (this is irrespective of where you've position the jump-break) - notice that the green methods of giving your weblog a home-page don't ever work.
Custom styles that you lot convey added to the template may non live on applied (this has happened on 1 weblog where I usage styles, I'm notwithstanding investigating whether it's a characteristic of all mobile templates, or only due to the agency I added these detail styles).
There volition live on buttons at the bottom of the page for Home, < in addition to > . I intend that the latter 2 refer to older in addition to newer posts (though possible they are the contrary agency roughly from what I expect).
There volition live on a link to "view spider web version", which lets your visitor switch to to run into the weblog using the desktop template.

I convey a feeling that at that spot may live on another differences likewise - really cracking to listen most any others you've spotted.

Seeing what your mobile readers see

The absolute best agency that I've constitute to accurately experience my blogs every bit mobile visitors run into them is to usage a mobile device myself:

Just similar preview fashion inward the Post-editor, the mobile preview mode shows a "look in addition to feel" view, which is non solely accurate. For representative inward the motion painting above, it shows purpose of the most-recent article insteaod of only the postal service championship in addition to mini-snippet that I run into when I expression at the site on my phone.
The screen-size testers that I've tried out (ie software tools that mimic showing your website inward diverse dissimilar hide sizes) don't genuinely usage the mobile template - I suspect that this is due to the agency that Blogger detects mobile devices.

However you lot tin run into whatever weblog every bit it would live on on a mobile device past times appending /?m=1 to the destination of the URL. For example, to run into this weblog inward mobile, I would expression at theadsenseblog.blogspot.com/?m=1 If you're going to usage this approach, it's best to re-size your browser window thus that it's most 300px broad - from my netbook, that's most 1/3 of the hide size, but it would live on less from machiens amongst bigger screens.

Another approach is to usage Google's Mobile Friendly Testing tool, which will

... analyze a URL in addition to study if the page has a mobile-friendly design.

As good every bit showing you lot how your weblog looks, it also reports on whatever issues that convey been found.

Adding gadgets to your mobile template.

Removing the attribution from moblile blogs

Showing a Google custom map on your blog

Advertising programmes for websites

Types of Blogger template

Administrator rights to your blog

Labels: Article, Blogger, Mobile, Templates, Themes

This article describes Page-level ads, a novel type of AdSense promotion which Google has of late introduced. It includes how to laid upwardly these ads if you lot role Blogger, in addition to roughly troubleshooting information close them.

It likewise describes how to laid upwardly an mistake inward the code which is supplied, which causes a message similar "Attribute yell "async" associated amongst an chemical constituent type "script" must live on followed yesteryear the ' = ' character".

What are Page Level AdSense ads

Google has of late introduced a novel type of Adsense ad-units, which may live on shown to people who see a website using a mobile device (eg smartphone of tablet),

There are 2 types of Page-level ads:

Vignette ads: When a visitor on your site clicks on a link to roughly other page on you lot site, a vignette advertizement may live on loaded every bit a full-page overlay which the user needs to closed earlier they come across the page which they navigated to.

Overlay ads: these are smaller ads which present at the plough over or bottom of your screen, in addition to which "stick" to the edge, therefore they appear to remain inward house every bit the user scrolls upwardly in addition to downward your site. The see may click on them inward the green way.

For Blogger users, these ads are solely currently available if you lot convey a sum AdSense account: if you lot solely convey a hosted AdSense account, in addition to therefore you lot cannot instruct the code to install them. But if you lot practise convey a sum AdSense occupation concern human relationship (either because you lot convey a custom domain, or because you lot signed upwardly for AdSense earlier the "host AdSense account" selection was introduced), they are attractive because they don't count towards the count of advertisement-units which you lot are allowed to display on each page.

They likewise solely operate if you lot convey a mobile subject switched on for your blog, therefore that visitors who role a mobile device come across mobile-optimised screen.

How to install AdSense Page Level ads inward Blogger

Log inward to your AdSense account.

Go to the My Ads tab

Turn on i or both of Overlay or Vignette ads options.
(By default, they are both turned Off. Click on the empty box beside the "0" to plough an selection to on: in these controls, 0 agency "off" in addition to 1 agency "on".)

Click the < > Get Code button.

Copy the code that is generated.

Switch to Blogger, in addition to edit your theme in the green way.

Find the text <head> (including the brackets).

On the really side yesteryear side draw later on <head>, paste in your code.

Optional - but highly recommended - add comments to clearly present what this code is for. I commonly use

in addition to and therefore the code goes inward hither ...

Preview the theme, in addition to make certain it's working.
(See Troubleshooting department below if you lot instruct a message close Attribute yell "async" associated amongst an chemical constituent type "script" or similar.

Save the theme.

Job done! This is all you lot bespeak to practise to enable page-levels ads for your blog: you lot practise non bespeak to install gadgets to state where these ads go, because Google handles this for you.

How to come across what page-level ads await similar inward your blog

Visit your weblog using a smartphone or tablet.

Add the text #googleads at the halt of the website address, therefore it changes from something like:

theadsenseblog.blogspot.com/?m=1

to something like:

theadsenseblog.blogspot.com/?m=1#googleads

After this, when you lot click on a link to motion a dissimilar page inward your blog, a Vignette way advertizement volition display - these are whole-page ads, which include a "close ad" button, similar this:

Troubleshooting

Extra "src" text inward the ad-code

Right now, at that spot is a work amongst the code that AdSense are providing. I don't know if this is because Blogger doesn't empathize a characteristic that AdSense is using, or if it's a genuine bug. But if you lot come across a message similar this when you lot essay to preview the theme:

Could non charge subject preview: Error parsing XML, draw 21, column 15: Attribute yell "async" associated amongst an chemical constituent type "script" must live on followed yesteryear the ' = ' character.

in addition to therefore there's a really elementary alter that you lot convey to make.

All you lot convey to practise is delete the "src" directly later on the give-and-take async.

So your code changes from similar this:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-DONT-USE-MY-NUMBER-GET-YOUR-OWN-PUBLISHER-ID",
enable_page_level_ads: true
});
</script>

to similar this:

<script async ="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-DONT-USE-MY-NUMBER-GET-YOUR-OWN-PUBLISHER-ID",
enable_page_level_ads: true
});
</script>

Different Page Level settings for dissimilar websites

If you lot are using Adsense across several dissimilar websites, in addition to therefore you lot may desire to enable i of vignette or overlay ads on roughly sites, in addition to a dissimilar selection on others.

Currently, at that spot is no way to practise this: you must pick out i combination of:

No Page Level ads
Overlay ads only, no Vignette ads
No Overlay ads, but practise present Vignette ads
Allowing Google to pick out Overlay and/or Vignette ads

Stop Vignette ads beingness attached to roughly links

By default, whatsoever link to roughly other page inward your weblog may convey a Vignette advertizement attached to it. However at that spot may live on roughly links which you lot specifically don't desire this to occur to - for representative if the user actually needs to retrieve what was on the electrical flow page i time the instruct to the side yesteryear side one.

You tin give the axe forestall whatsoever Vignette ads beingness displayed when a user clicks a link yesteryear adding a tag to the link.

The tag to add together is:

data-google-vignette=”false”

in addition to you lot bespeak to switch to Edit HTML (top left of the post-editor window) to add together it.

This is an representative link to roughly other page on this weblog which is prevented from having a Vignette ad, in addition to this is the HTML code I've used to accomplish this.

<a data-google-vignette=”false” href="theadsenseblog.blogspot.com/search?q=simpler-but-more-limited-adsense-sign">an representative link</a>

More help

Google convey provided to a greater extent than information close Page degree ads here.

Setting upwardly a mobile subject for your blog

Editing your Blogger theme

Hosted AdSesne accounts for Blogger users

Labels: Adsense, Advertising, Article, Blogger, Mobile

TheAdsense

Info How To Plough On A Mobile Topic / Template For Blogs Inward Blogger