Customize Blogger Mobile Templates

If you enable mobile template for your blog, here is a good news, you can now customize your mobile site to your own personal taste using CSS definitions.

You will able to decide which widget is to be displayed in mobile site and which one shouldn't. You can also configure a widget to appear on both desktop and mobile site.

How To Customize Mobile Template

The default widget that appears on mobile template are as follow:
Header
Blog
Page List
Adsense (If applied)
Profile
Attribution

Three properties can be use to control how widget operates, and the properties include: mobile="no", mobile="yes", and mobile="only".
If you want to hide any default widget, simply use the mobile="no" property to hide the widget in mobile website.

Example: The default widget tag/code for attribution widget is:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

Now to hide the attribution widget, simply insert the mobile="no" property as shown below

<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>

If you want to show any non-default widget, simply use the mobile="yes" property.

Example: The default widget code for the archive widget is:

<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>

Now use the mobile="yes" property as shown below

<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>

If you want to show a widget only in mobile site, simply use the mobile="only" property.
Example: Let's try to show the archive widget only in mobile site, using the mobile mobile="only" property as shown below.

<b:widget id='BlogArchive1' title='Blog Archive' mobile='only' type='BlogArchive'>

What Next?

You will need to activate custom template for your mobile template, as it may not show any changes if you are the using any of the default template.
Now go to Template, click on the gear icon below the mobile template and set it as shown in the screenshot below.

It is advisable that you Preview the custom template before you finally click on the Save button.


Customize Mobile Template Using CSS

You can set CSS properties for both mobile and desktop view, but make sure your template is having the following code.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

If you are so good at CSS, you can style your mobile site to your own perfect taste. You can edit some CSS class like:

.mobile .date-header {
  text-decoration:underline;
}

.mobile .main-header {
  margin: 0;
}

.mobile .content-outer{
text-decoration:none;
}

You can control how a widget behave in mobile site by using css class .mobile

Let us know if you have customize your mobile template and we will be happy to make a visit. You can check this blog on mobile and any recommendations or suggestions concerning the improvement of the mobile template is highly welcome.
.

Read More »

Punjabians Theme

Purpose:Web tempelate is totally designed for public figure. 

Colour Management: 3 coloured theme designed by Coral Draw by our expertise,

UI: Easy and understandable interface, all the contents are defined according to requirements of the user.

Our Developers consider more on users requirement than our own features. We try our best to cover all the sections that a normal user uses.

Tooltip: General toop tip suits for this layout. so like other stylish tool tips, here there is no any style, you can ad script if you want to change.

Popup page: Here no pop up window suits to be inserted. is simple, attractive.

Cursor Style: Window Default Cursor style that will beautify the theme.

Customization: 100% customizeable: your can easily edit CSS, HTML, Javascripts and other contents of this webtheme. everything is defined and written in separate portion that you can easily understand all

High Resolution:Yes

Compatible Browsers IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge

Tested: tested: IE, Firefox, Safari, Opera, Chrome, Edge

Files Included: Layered PNG, PHP Files, HTML Files, CSS Files, JS Files, PSD

Layout Responsive

Size : 2.97 mB

Read More »

Zahi Web Theme

Zahi Web tempelate is totally designed for educational purpose or aimply for students. 

Web tempelate is totally designed for educational purpose or aimply for students. 

Excellent colourfull theme designed by Coral Draw by our expertise, easy and understandable interface, all the contents are defined according to requirements of the user.

Our Developers consider more on users requirement than our own features. We try our best to cover all the sections that a normal user uses.

Tooltip: Beautiful and excellent tool tip with header ann a shot customized description

popup page: while clicking on defined link, a small popup page will open having all the description of your contents.

New cursor style that will beautify the theme and more attractive.

100% customizeable: your can easily edit CSS, HTML, Javascripts and other contents of this webtheme. everything is defined and written in separate portion that you can easily understand all

High Resolution:Yes

Compatible Browsers IE9, IE10, IE11, Firefox, Safari, Opera, Chrome, Edge

Tested: tested: IE, Firefox, Safari, Opera, Chrome, Edge

Files Included: Layered PNG, PHP Files, HTML Files, CSS Files, JS Files, PSD

Layout Responsive

Size : 1.0 MB

Read More »