bollywood latest news

Home » Posts filed under Templates

Showing posts with label Templates. Show all posts

How to enable a mobile template in Blogger

Posted by Unknown Wednesday, 9 May 2012 0 comments

This article explains why mobile mattes for some blogs (but not all), what tools Blogger has provided to help with this, and how to set up a mobile template for your blog.

Blogger and Mobile - do you need to care?

By default, when someone uses a smartphone, tablet or other mobile device to look at your blog, they see the "full site" just like they would if they were using a PC. The pages aren't set up to work well on their small screen, but they have access to all the features and gadgets you've installed.

In some cases, this is fine. For example, the last time I looked at the statistics for this site, hardly any of the visitors were mobile. This makes sense - people wanting to find out how to do things in Blogger are probably using the full Blogger software at the time.

But for other blogs, especially ones that have maps and other location-information or which people read on the go, having a mobile-friendly template is very important: for example, on my public-transport blog, over 25% of visitors are using mobile, and that figure is growing. Making my site work well for these visitors is definitely important for its long-term future (and my short term advertising revenue!)

What's available

Blogger have made a set of mobile templates, to match the standard Designer Templates, and so far only one to match the Dynamic template.

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

But we can add and remove gadgets, and also by choosing a custom template get colour settings that match our main blog.

How to make your blog use a mobile template

Log in to Blogger using an account with administrator rights to the blog.

Go to the Template tab.

If your blog has a Designer or Dynamic template, then there will be a Mobile option to the right of the "Live on Blog" area.

If the blog is not set up to use a mobile template,then the word Disabled will be in the middle of the picture area - although it may be hard to read if your base template (chosen in the Live on Blog area) has a picture behind it.

Click on the gear-wheel underneath the picture to see the mobile options.

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

Either leave the mobile template on Default, or select one of the other options.

If you choose Default, your mobile template will use the standard template matching your desktop template.
If you choose Custom, your mobile template will use the colour-scheme and various features from your desktop template, and you will be able to makes changes to these settings.

Use the Preview button if you want to see what your blog will look like with the selected template on a mobile device.

When you are happy with your selection, press Save.

What your readers see

Visitors to your blog who are using a desktop PC (or laptop or netbook or any other machine with a full-size screen) won't see anything different.

Readers who are using an internet-enabled cellphone (ie smartphone), tablet, iPad, etc will see a different view:

They won't have a sidebar
The gadgets will be limited (unless you add some extra ones) and in the header and footer only
On the home-page there will just be the title, thumbnail and snippet for each post, and a button for read-more (this is irrespective of where you've put the jump-break) - notice that the usual methods of giving your blog a home-page don't always work.
Custom styles that you have added to the template may not be applied (this has happened on one blog where I use styles, I'm still investigating whether it's a feature of all mobile templates, or just due to the way I added these particular styles).
There will be buttons at the bottom of the page for Home, < and > . I think that the latter two refer to older and newer posts (though possible they are the opposite way around from what I expect).
There will be a link to "view web version", which lets your visitor switch to to see the blog using the desktop template.

I have a feeling that there may be some other differences too - very keen to hear about any others you've spotted.

Seeing what your mobile readers see

The absolute best way that I've found to accurately experience my blogs as mobile visitors see them is to use a mobile device myself:

Just like preview mode in the Post-editor, the mobile-template preview mode shows a "look and feel" view, which is not entirely accurate. For example in the picture above, it shows part of the most-recent article insteaod of just the post title and mini-snippet that I see when I look at the site on my phone.
The screen-size testers that I've tried out (ie software tools that mimic showing your website in various different screeen sizes) don't actually use the mobile template - I suspect that this is due to the way that Blogger detects mobile devices.

However you can see any blog as it would be on a mobile device by appending /?m=1 to the end of the URL.

For example, to see this blog in mobile, I would look at http://blogger-hints-and-tips.blogspot.com/?m=1

If you're going to use this approach, it's best to re-size your browser window so that it's about 300px wide - from my netbook, that's about 1/3 of the screen size, but it would be less from machiens with bigger screens.

I'm very interested in suggestions about any other tools that give a reliable mobile-experience view without actually having to use a smartphone.

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

Seven simple steps to a snazzy new-look blog: preparing to change template in Blogger

Posted by Unknown Wednesday, 7 July 2010 0 comments

This article is about making a plan to change your Blogger template if your existing blog-template has been customised: it covers how to make a list of the changes that have been made to your template, and using this as the basis of a list of changes to re-apply when you change templates.

Overview:

Changing your template in Blogger is easy: you just choose another template, press save or Apply to Blog (in the Template Designer), and the changes are applied.

But if you have ever customised your template using the Edit HTML feature, then ALL the customisations are lost when you change templates. This is fine for some changes (eg hiding things you didn't like in a particular template), but it means you lose changes that you may want to keep, eg a favicon, meta-tags, Google Analytics or Webmaster verification, Amazon Product Preview, etc - in short anything that you want to keep, no matter how your template looks.

If you're worried about the consequences of changing templates, you have a basic choice to make:

1 Remember what you did:
Try to remember what you've set up on your blog, and think about which of these things you want to apply in your blog-with-a-new-template.

2 Code comparison:
Compare the layout-template code for your blog with the same code from another blog that has the same template and widgets as your blog, but not the HTML customisations. From this comparison, make a list of what customisations you need to re-apply after you change templates.

The first option is quicker and a lot easier - but you might miss something important. Personally it's not an option I'd like to use for any blog that has "weight".

Unfortunately the second option doesn't give a 100% correct list of customisations, unless you kept a copy of your current template at it was at the time when you first applied it to your blog. This is because Google may have upgraded their copy of the standard version of your template, but not been able to upgrade your customised version. (See Advantages and Disadvantages of Editing Your Blogger Template for more about this). However the list that you can make may be close enough - and I used it myself to make sure I didn't miss any details in migrating the blog you are reading now.

This article is about the second option, and how to use the results of the comparison to make a detailed plan for moving your blog from one template to another.

Applying Option 2:

Follow these steps to compare the template from your blog with another un-customised version of the template:

1 Make a test-blog which is like your Real-blog, except it doesn't have the layout-template customisations. See Making a test-blog for more details about this: it's NOT as simple as just copying the template over.
IMPORTANT: If you do have a backup copy of your template from immediately after you last applied a new template to, then apply it to your test blog before giving it any widgets. (Doing this will give you the chance of making a 100% correct list.)

2 Line-by-line, compare the template code in your test and main blogs. For each difference, work out whether it's due to a customisation that you want to keep when you "migrate" your main blog to a new template, or something that you can leave behind.

To do the comparison:

Get the template code for your test-blog by choosing Design > Edit HTML for it, and clicking on Download Full Template. Save the downloaded file somewhere with a name like testBlog-Template.xml

Get the template code for your main blog the same way Save the downloaded file with a name like realBlog-Template.xml

Use a text-file comparison tool to find the differences between the two files.
Comparing two text files using Excel discusses this in more detail, and links to a tool that makes this process (a little) easier.

Note that there may be some differences which aren't explained by modifications that you made to the template: these will be due to improvements that Google have made to the template file. You need to decide how much time to spend investigating each difference, based on how likely it is that you made it.

3 From the list of differences, write a plan of the existing customisations you want to apply to your new template, and also of any new changes that you want to make at the same time. Put it in order of most-to-least important (eg I usually put "load Google Analytics code" just after "apply template, because the statistics are very important to me).

3.5 (optional) Decide which new template to use, and practise the upgrade:
Use the test-version of your existing blog (the one you made in step 1), and give it the new template. Apply the extra customisations from your list. Possibly even copy in some posts from your main blog into it. Test how well it works, and tweak your list of the changes that need to be made when you migrate your real blog.

4 Back up the current template of your blog.

5 Apply the new template you've selected to your blog.

5.5 (Optional) make another back-up of your template - before you re-apply any of the customisations. This will be the basic version that you compare against if you ever need to do this exercise again, so save it somewhere safe.

6 Make the other changes from your plan.

7 Test your blog to see that all is well.

That sounds easy enough. Seven simple steps to a snazzy new-look blog. Let me know how you get on.