Nach Bildung

“Die arbeitenenden Klassen streben nach Bildung, weil sie sie für ihren Sieg brauchen”

Labour and knowledge is a source of success in every profession. If you have no talent, then—learn, read, study, practice and work as much as you are able. It really helps to succeed.

Sunday, 14 October 2012

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


In Part I of this article a few important steps were covered. Now is time to proceed and make more adjustments and changes in premium Blogger template like applying code to widgets, to static pages and to the post itself.

Widget content

Downloadable folder always includes a separate folder or file(s) which contain(s) html code written especially for widgets, static pages and post formatting. We start filling widgets with content now. xml file as usual has a few widgets which always show a wrench icon near or under widget. Clicking this wrench icons will open new blank window (i.e. without any content). You need to add content to these blank windows. In my template folder every html file corresponding to certain widget has same title. For example, find in your xml file a line of code similar to this one:

You see an id of certain widget and this very id is "HTML1". Blogger has a few various types of widgets, it can be HTML, Sidebar, Blog etc. It may contain title and it may not. In the example above you see that title value is blank. If you inserted a title it would look that way in the code above: title='my widget name'. If situation requires, I delete the title, otherwise you would see some title inside the single quotes. Now, inside the downloadable folder you will find several html files with a code which should be assigned to your widget. How to define what does refer to what? It is simple. I entitle html files exactly like a widget id + explanation. In other words: open a folder and find a file entitled HTML1-text-widget.html. The name of my html file not only contains identical value of the widget id (HTML1), it yet explains what in fact it is–text widget. In other case it could be HTML2-recentposts-widget.html what means its code should be assigned to id HTML2 and it is actually recent posts widget. All you have to do now is copy the code from html file (you opened it in your IDE), select all and paste the code into blank window of your widget. Same manipulations you need to do with every HTML type widget you will find in your xml file.

widget editing in Blogger

Not always the code of content for widgets is written in html language. Some widgets require scripts. If you will take closer look at the image above you will recognise javascript language. Javascript is required in widgets like Share buttons, custom archive, Disqus comments and so on. In this case your action is the same–you copy js code and place it into your opened blank window, exactly like you see it on the image above.

Static pages

Placing code onto static pages is barely different from placing code to widgets windows. The only difference is that first thing to do is actually create static pages in Blogger. How to do that? Simple. As always. While you are in Blogger (your Dashboard) click Pages.

dashboard in Blogger

Create the pages you need, entitle them appropriately. Open corresponding files from downloaded template folder in your IDE. As usual, I entitle such files accordingly and place these files in folder entitled "static". Copy html code and paste it into your blank static page body. Do same with every static page. Sometimes you want to hide certain pages from appearing in navigation menu. For example Thank You page. Simply choose "Don't Show" option in Blogger and selected page will exist but will have no anchor in your navigation menu.

Post formatting

In your downloaded folder you will always find an html file entitled post-formatting.html (the name may vary slightly but you can easily understand that it refers to post formatting and not anything else). This file (and sometimes they are few) offers post formatted code which is ready to be implemented into your blog. How to deal with it? Open post-formatting.html in IDE. Copy the code. Return to Blogger. While you are on your Dashboard click Settings and then click Post And Comments (on the left side). Look at the Post Template block. You see blank white input field where you are to paste now the code you have just copied from post-formatting.html. Paste. Save Settings. Now, every time you are going to create new post and click New Post you will have already injected code of your formatted post. All you need to do now is just change your texts, headings, images and videos inside the formatted post. Here is how it looks when you click New Post:

new post formatting in Blogger

As you see it is an automatically applied html code in HTML mode. If you will switch to Compose mode it will not look like a code anymore. If you wish to keep your blog posts accurately formatted, identical to any other post in your blog in its look and structure you must use HTML mode and forget about Compose mode. You need to read my article about editing posts in HTML mode.

Unlike where all html formatting is pulled to live blog via php functions and you can write your blogs in the inbuilt editor, Blogger has no this option. It means you need to use html if you wish your blog post to look this way:

new post formatting in Blogger

and not this way:

new post formatting in Blogger

As I mentioned above there are sometimes a few types of post-formatting included into downloadable folder. It is just a variety and you can choose that one of files which matches your needs most or more frequently. For example, in one of my templates there are 3 types of blog post formatting: one with text and image, second with text and video and third is with text and slider. You need to define for yourself which type of post you are going to use more often and copy the code of html file entitled post-image.html or post-video.html or post-slider.html to Page Template filed. When you will need a post with different feature (for example instead of more frequent text with image you will want to make a post with text and slider) you will need simply to make adjustments in post code after you have clicked New Post. That's it.


Post a Comment