Template Blogspot 2012

Modifying a template in Blogger is very powerful feature. It allows you to make significant modifications to your blog which helps your blog to distinguish itself from millions of other blogs. It also gives you ability to add interactivity to your blog. This article will show how to achieve that for both Desktop and Mobile Template.Some cases which require modifications of the template:. Changing the Theme of your blogYou change a theme by modifying CSS code in the template. If you are familiar with CSS and HTML, then modification of template code is best suited for you.

1. Best Blogspot Templates

Otherwise use Blogger Template Designer as it gives you ability to modify the theme without the need to deal with CSS and template code.It is located at Dashboard Template. Once there, click on Customise button. Changing the Layout of your blogMaybe you are not satisfied with the default layout and want to change it. For example by default, you can not add any gadget in the header part of the layout as there are no Add a Gadget links located there. Modifying template code solves that problem.

Click image to enlarge. Changing the code of the Widget TemplatesIf you want to change the HTML output that the template generates, then you need modify widget code in the template.

One reason for that would be to improve Search Engine Optimization. Adding Interactivity to your blogIf you would like to spice up your blog, then adding various jQuery plugins will achieve that by adding their code into the blogger template. In most cases, you should add the jQuery code at the end of the template before  tag.

Note:If you are interested in backing up whole site, not just a template, check my other article:. After you made a backup, you are now ready to start with modifications. Go to Dashboard Template tab and click on Edit HTML button.

You get an edit window containing template code where you can do all the necessary modifications. If you want to edit widget code, you can use Jump to widget drop-down menu to quickly locate the widget.

Some modifications require you to find particular code in the template and since the template contains lots of code, you might find it difficult to locate that code. To help you with that, use some sort of text editor by copying whole template there and then use Find command. Modifying template for mobile devicesWhen you are optimizing your blog by directly modifying the template, you should also take into consideration the visitors that use mobile devices to visit your site.

Modifying Blogger's template for mobile devices is the same as modifying a normal template (steps 1-5 above), except that you need to do one additional step. You need to set mobile template to Custom, otherwise you will not be able to see any changes you make in the mobile parts of the template.By default, the mobile template is set to default template. To set it to Custom, do the following:.Click on Settings button which is located below Mobile.This will open new window and once there, choose Custom mobile template under Choose mobile template.Click Save and now your mobile part of the template is ready to accept any changes and additions that you make. To test your modifications, you don't need to check your blog on a mobile device, you can just add?m=1 at the end of the URL and the browser will display mobile version of your site. Useful ResourcesIf you want to learn more about the technologies mentioned above, check the links below:. HTML and CSS. Blogger Template Code(from Google).

jQuery(experiment with javascript / jquery code in interactive window)ConclusionIn this article we examined why and how to modify blogger templates. This is a big topic, so the article also listed few links of resources you might find useful when modifying your template. If you think of any other resource that would be useful for blogger template modifications, feel free to suggest them and I might add them to the list.I hope you have found this post useful. Feel free to comment or share it on your social networks. Hello, that is amazing tutorial. But can you help me please?I have a custom template of desktop version and for mobile it was similar (color, background.) Suddenly something happened, and mobile version is now different.Background is white, texts dark. I tried to restore it by changing templates, but nothing helped.

Best Blogspot Templates

Is there some way, to use main template and apply to mobile version?I tried to set background by tags in main template to CSS of mobile classes, but that didn't help.And one more question. Is there way, to put in mobile version some menu? Its very hard to find some post in history, if I dont't use archive or categories.

Thank you very much and nice day. You are welcome:) Previously I wrote to you this:Yeah, it was very helpful. Thank you:) If I dont bother you yet, I have two little problems yet. If you want to help me again. In desktop main template, when I chose some label (tab) and go to these type of posts, label name in menu jumps up, right blue border is lost and font is smaller and maybe different.

This was default in original template. I tried to find css, but without success. There are many 'tabs' code, but didnt find this one.And second problem, or maybe just improvement. Is there a way to set selected link in my mobile menu to different color, so user would see, where he is in categories? I tried to set pseudoclasses like hover, visited, focus and so on, but it wasnt ok, perhaps because thats everytime new site, not the one with clicked link.

I dont know how to do that somehow easily. But it is too difficult, let it go.If you have some others users for solving their problems, its ok.

I thank you very much for previously help and your time and I try to figure out on my own. You helped me enough yet:) Martin.

Hello, I have a side bar with page widgets on my blog. The web version works perfectly displaying page title and the link to the page directly underneath, e.g.- My Facebook Page- Facebook (link)When I go onto the mobile version, however, all i can see is the word 'Home' instead of either the Page name or the link name.

Only after clicking on one of the 'home' buttons I have a choice to click on either another 'home' or 'facebook'. Links work all fine but it is rather ugly to see 'home' 4 times at the top of the mobile page.I am a little surprised by this as I specifically unticked showing 'home' in the gadget dialogue box.Any solutions? Well actually trying to help a online friend with her blog.

I haven't used my blog for years so am a tad rusty. Lol.I never had my blogs set to mobile. I don't have a mobile phone and forgot about the people that only access using their phone, but back in 2009 when I used my blogs that wasn't such a 24 hour a day thing.now it is.She would like her blog to be accessed by both computer and mobile but I am clueless as to how to help her do that.Any help would be greatly appreciated.Thank you. Worked perfectly.I have been using my old blog as a test for the things she wants changed or added and I can't thank youenough.

Going back and forth with her is hard, as she is pretty much clueless about blogger other than how to makea post. Would be easier if she would let me log into her blog and just do it all at once. But then again, alearning lesson for her and honing up on my forgotten skills at the time time.

Now my 13 grandson wants me toshow him how to build one.Thanks for much for all you do for all of us that get stumped. Greatly appreciated.