Airtel
Airtel Zone
Blogger
Blogging Tips
How Tos
How to Customize Blogger's Mobile Site View with CSS
Blogger's Developers Network has just disclosed how one can customize (tweak) his mobile site to his taste.
It's no secret that many bloggers have been hoping for the day this feature will be enabled. Now it has been made possible, I guess the waiting is over.
In this tutorial, I'll be showing you how to customize the default widgets and manually installed gadgets on your mobile site.
THE DEFAULT WIDGETS ON THE MOBILE SITE ARE:
It's no secret that many bloggers have been hoping for the day this feature will be enabled. Now it has been made possible, I guess the waiting is over.
In this tutorial, I'll be showing you how to customize the default widgets and manually installed gadgets on your mobile site.
THE DEFAULT WIDGETS ON THE MOBILE SITE ARE:
- Header
- Blog
- Adsense
- PageList
- Profile
- Attribution
Your mobile template can be customized by adding the property mobile='no' to the widget tag in your HTML.
Other property attributes include, 'no', 'yes', and 'only'
If you want to Hide a widget on the mobile site, simply add the property mobile= with the attribute 'no' to its widget tag (e.g mobile='no')
EXAMPLE:
Let's try to hide the Profile Widget (gadget) from showing on your mobile site.
This is the original code for the Profile widget tag:
<b:widget id='Profile1' locked='false' title='contributors' type='Profile'>
To hide it from showing in mobile view add the attribute mobile='no' to its widget tag
<b:widget id='Profile1' locked='false' mobile='no' title='contributors' type='Profile'>
Save your template and preview it with a phone.
You can do this for any widget you prefer.
Note that any widget that you add the property attribute mobile='only' to, will be shown on your mobile site alone.
If you want to Hide a widget on the mobile site, simply add the property mobile= with the attribute 'no' to its widget tag (e.g mobile='no')
To show a widget on the mobile site, add the property mobile= with the attribute 'yes' (e.g mobile='yes') <== When you do this, that particular widget (gadget) will be shown on both the mobile and the full site.
You can decide to show particular widget on the mobile site alone. To do this just add the attribute only to its widget tag in your HTML. (e.g mobile='only')
DEFINING MOBILE SITE WITH CSS PROPERTIES
You can set different css properties for both Desktop and Mobile View
To do that, first check if the body your template contains the following tag
<body expr:class='"loading" + data:blog.mobileClass'>
If you have the above tag in the body of your template, you can customize your mobile site if you are very good at CSS
The CSS class for the mobile site = .mobile
For Example:
/* For mobile site Post Header */
.mobile .date-posts {
margin: 0;
padding: 0;
}
/* For mobile site Date Header */
.mobile .date-header {
text-decoration: underline;
}
I hope you won't have troubles customizing your moibile site to your satisfaction
Get out there and start creating powerful mobile sites!!!
If you have any question or complaints please use the comment form below. I'll reply as soon as possible.
Thanks.
.jpg)
Thank you very much for sharing. With your this information I have been able to customise my blog to display the large sharing buttons. I have been looking for this information for a while. But adsense appears not to be a default widget on my mobile site as I have tried everything to make it show. I want you to take a look at my site http://www.nfreshgraduatesjobs.blogspot.con in mobile view and tell me what I am doing wrong. I will appreciate ur response. I have already bookmarked this site
ReplyDeleteThis will be great since standing out will surely get the people's attention. Thank you very much.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteHi, nice blog you got, Profile widget aint showing on my blog mobile view and i've done everything i can to make it show but to no avail. Please can you help me with tips?
ReplyDelete