The most comfortable way to edit custom Blogger template. Part I.

Preface

Masses of people use Blogger as their free and simple blogging platform and do not suspect that Blogger can be something a little bit more than ugly default templates, drag-n-drop images and unstyled paragraphs. Premium Blogger templates are different. Not only in sense of design. It concerns also set of various features, design solutions, implementation of javascript and CSS3 beauties. To customise such template require a little bit more effort and patience. The user is awarded for his honest labour with a perfect blog that has another standard–standard of high quality and has definitely professional look.

Is there an alternative to hard labour?

Definitely. If one does not want to have great looking blog with accurately formatted posts, with SEO friendly URLs of images, perfectly styled paragraphs then there is no need to work hard. Hit Compose Mode, write your posts straightly in there,upload images via inbuilt Blogger editor, do not bother about paragraphs, use different fonts, use intensively inbuilt editor (i.e. use all icons and colours you see in editor panel) and you will have perfectly ugly blog. But if you do care how your blog looks like and how your post look like you will need to forget about magic want which makes all the job. Because there is no such magic wand. Because everything is just in your own hands.

IDE

Ok, you bought (or downloaded illegally–what happens very often, that is why I am mentioning it here) Premium Blogger Template, now what? Set up your Blog and upload any default template. It does not matter which one, you are going to delete it completely in a few minutes. Open my xml file in HTML editor. Often it is entitled template.xml but may carry other title. What is HTML editor? It is often open source or paid software for editing files created for web. Files which are written in various programming languages like html, css, xml, php, js and so on. Well, where to get such HTML editor? You can buy it. For example expensive Dreamweaver. Or you can download it for free as an open source software. For example Aptana Studio. Some HTML editors (IDE) have Design Mode and Code (Source) Mode. For example Dreamweaver has both. Some IDE have only Code Mode. For example Aptana Studio. If you open template.xml file in Design Mode you will not be able to make those adjustments which you need to make. You must do that vie Code Mode. If you do not want to work in Code Mode forget about your premium template, close it, send to trash, upload one of default Blogger templates and start managing your ugly blog. If you are still ready to continue with your premium template continue reading.

Hosting

Ok, you opened xml file in IDE, now what? Nothing in the meantime. Now you need to make something else before you come back to IDE. In downloadable folder you will find various files and folders. What you need to do is to upload folder with js files (folder entitled "js"), layout images (folder entitled "images") and css file(s) to your hosting. Why to upload images to hosting? You have fine Blogger tool uploading images to Picassa, why to bother with hosting? Well, first you can upload layout images to Picassa and copy URLs to xml file. But there is a difference between images created for layout design (various elements, backgrounds, sometimes buttons) and post images. If you want to keep everything in its most accurate and organised way, upload "images" folder along with "js" folder and css files to your hosting.

What is hosting? Hosting is a company that preserves your files and transfers them to Internet when request is sent. Simpler: somebody enters your blog or site and starts exploring it. This somebody sent request to hosting to view images, to read texts, to click buttons and so on. Primitive model but it is what is happening in reality. So, you need to store your files somewhere, like you store your objects in your storage room.

Well, where to get that hosting? Buy it. Go to any of reliable hosting companies and simply purchase it. I pay to GoDaddy. Bad it or good (various people have various impressions about this company), I am pretty satisfied. It is biggest company and it is cheapest company. You can buy pack: domain and hosting. What for you may need a domain? For your own site name. If you want your Blogger based blog be entitled yourname.com instead of yourname.blogspot.com, domain name is what you need. Otherwise, you can keep blogspot extension and use domain for something else. For example, my main site uses domain "virtuti" while my blog (the one you are reading now) is just a Blogger hosted one and entitled "nachbildung.blogspot.co.il".

Well, let's say you want to come out cheaply. More precisely–for free. You do not want to spend any extra penny on hosting or/and domain. Unlike Wordpress.org, Blogger allows you that miracle. You can copy the content of css and js files located in downloadable folder and paste it directly to xml file, adding scripts and styles to the head of xml file. Will it work? Should work. But there is always some danger of a conflict in between scripts, mess and unintentional mistakes made by you–all these factors may cause your blog stop working. If you are super accurate and super attentive you can try to copy-paste js/css files and if there is no conflict in between scripts, all will work fine and you will not need to buy hosting. Otherwise, if you do not want a headache, just go and buy hosting. Well, let's say you went and bought it. Now what?

FTP

Now you need to upload your files to hosting. How to do that? It is simple thing. Either you do that straightly via your hosting inbuilt FTP manager or your download open source software Filezilla. If you choose Filezilla, you open it on your desktop and simply drag files from your local computer to your hosting. It is very fast. I tried once to use GoDaddy FTP manager, it was abnormally slow and more complicated then it should be. Therefore–Filezilla is a primary choice for me, definitely.

How to work with Filizilla or hosting company inbuilt FTP manager for Blogger blog? Simply. First, you need to create a directory (in Filezilla–right click, create directory, entitle it somehow). You can name your directory as you wish–"myblog", "kitten", "flower", "rain"–any title matches. It has a meaning only for you and does not affect anything. Drag files and folders from your local computer to this directory. That's it. You can skip creating directory at all, then all your files will be dragged simply to the root folder. Which files? Well, I mentioned that above: in your downloadable folder you will find: "js" folder, "images" folder and css file(s) or "css" folder. Do not drag "static" folder or any other folder, just those ones which contain javascript files, layout images and css files.

Come back to IDE

Now is time to come back to your HTML editor. You have template.xml file opened in HTML editor and still intact. Now you need to make changes. You need to rewrite default paths of js, css files. What does it mean? In template.xml any path looks this way: yourdomain/yourfolder/stylesheet.css or yourdomain/stylesheet.css. If you created directory entitled let's say "flower" you will need to rewrite the path in this way: yourdomain/flower/stylesheet.css. If you did not create a directory then it will be just yourdomain/stylesheet.css. You will need to walk through the whole xml file and adjust in this way all the paths.

One more small thing to do is to rename your xml file (if you wish). As I mentioned above, mine is often named "template.xml". You can keep this title or give it any other title, just that one which is comfortable or/and meaningful to you.

Right after you have finished this part of work you can upload your xml file to Blogger. As you remember, you deleted the code of previously selected default template and your Edit Html page in Layout is currently blank. Upload your template.xml, hit save and preview it live. It should be 99% identical to what you see on my demo blogs.

Summary

1. Set up your blog in Blogger, upload any default template, open it in Edit HTML mode (click Layout), delete the code completely.
2. Buy or download IDE (if you have no it yet).
3. Open template.xml in IDE in Code (Source) Mode.
4. Purchase hosting and domain (if you have no it yet).
5. Download Filezilla (optional).
6. Upload folders ("js", "images", "css") to your hosting.
7. Come back to IDE, adjust paths URLs, save.
8. Rename template.xml (optional).
9. Go to Blogger, upload template.xml file, save, view live blog.

To be continued...