June 27, 2011

Advanced Templates: Mobile Custom Modules

Editable mobile templates for blogs is a feature we are developing for future release. Right now, custom modules specific to the mobile display of your blog can be added to place content in the head or footer section of your mobile templates if you are using Advanced Templates for your blog's design.

Advanced Template Set designs are available with the Unlimited, Premium, and Business Class plans. If you are not using an Advanced Template Set for your blog's design, see article on styling your mobile blog with basic templates.

head-common-extra-mobile

With the head-common-extra-mobile module, you can place content within the head section of your mobile blog, including tracking script and style tags.

For example, to style the title of your posts, the below style tags and CSS could be added to the head-common-extra-mobile module:

<style>
.entry-header { border: #000000 1px solid; }
.entry-header a { text-decoration: none; color: #000000; }
</style>

To create the module, go to Design > Templates > Create new template module. Enter the Template Name as head-common-extra-mobile. Enter the code you want to display in the head section of the mobile blog and click Save Changes. Any content added to this module will be included between the <head> </head> tags of the mobile version of your blog.

footer-extra-mobile

With the footer-extra-mobile module, you can place content after the footer and before the closing body tag of your mobile blog. For instance, you may want to include navigation links to view the non-mobile version of your blog.

To create the module, go to Design > Templates > Create new template module. Enter the Template Name as footer-extra-mobile. Enter the code you want to display at the end of the mobile blog and click Save Changes. Any content added to this module will be included after the footer and before the </body> tags of the mobile version of your blog.

View Mobile Version

To view the mobile version of your blog in any browser, you can add /.m to your blog's URL. For example:

http://example.typepad.com/.m/blog/
http://www.domain.com/.m/
Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Typepad Services badge