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.

Monday 23 July 2012

Writing Blogger post in Edit HTML mode

Preface

Well-designed and well-coded templates come with certain set of HTML tags which should not be omitted if post author wants to keep beauty and accuracy of template design. And it is barely possible in Compose mode. Post, written or edited via Compose mode will lose its structure, alignment, proportion and what not. Why does it happen so and how a person who has no idea about HTML must cope with the problem?

Start doing

Well, there is no way out but learn a little bit HTML. It is really very very basic knowledge. In fact, the blog author should know just a few tags, no virtuosity in HTML coding is required for this purpose.

Blogger post in Edit HTML mode

Well, a screenshot above displays template in Edit HTML. As a rule post author needs to have possibility to insert his own:

  1. headings (post titles)
  2. texts
  3. ordered or unordered lists
  4. blockquotes
  5. static images
  6. images for slideshows
  7. videos

Here is a a list of HTML tags corresponding to above listed web elements:

  1. headings: h1, h2, h3, h4, h5, h6
  2. texts or paragraphs: p
  3. ordered or unordered lists: ol li, ul li
  4. blockquotes: blockquote
  5. static images: img
  6. images for slideshows: img
  7. image descriptions: alt (it is important for SEO)
  8. videos: video, iframe (for embedded video from YouTube for example)
  9. bold text: strong
  10. italic text: em
  11. link or anchor: a

Heading, text, image and so on must be placed in between required tag which opens and closes:

Post Title

Article Title

Long portion of text should go here

HTML tags are never uppercased. They are always lowercased. They always must be closed (actually, if ones leaves a tag unclosed, Blogger will show a warning alert automatically and the post will not be saved until fixed).

My Blogger templates (in fact any template) go with pre-formatted HTML layout for individual posts. Once a user copies-pastes its code into Setting/Formatting tab in Blogger, every post will show that very HTML structure. If this structure satisfies a user completely he/she must just insert his/her own data in between the existing tags. For example, the user needs to insert his/her meaningful text instead of the dummy one. In this case the user should just delete and replace the dummy text without writing or touching paragraph tag (p tag). Here is a dummy text coming inside the pre-formatted post template:

Nulla consectetur libero consectetur quam consequat nec tincidunt massa feugiat. Donec egestas mi turpis. Fusce adip du aura metus gravida vel facilisis ligula iaculis. Crasa rhoncus les massa. Crasa rhoncus les massa. Donec egestas mi turpis.

Here is a meaningful text inserted instead of dummy text in between p tag:

If this structure satisfies a user completely he/she must just insert his/her own data in between existing tags. For example, the user needs insert his/her meaningful text instead of dummy one. In this case the user should just delete and replace the dummy text without writing or touching paragraph tag.

If an author of the blog wants to add another paragraph he/she must write firstly:

and afterwards, to insert the requirable portion of text. Nothing too much complicated. Same method is should be applied to any other HTML tag. Apart above mentioned tags my templates written in HTML5 contain masses of tags like article, section, figure and many more. There are also plenty of div tags as well. Sometimes div tags have classes and ids, sometimes have no. As a rule there is no need to dive into these specifications and try to understand them–if the blog author’s goal is not a learning HTML language. However, it is very important not to delete accidentally some tag by ignorance or inattentiveness. Deleting a tag will cause all structure to break down.

A few words about alt tag. This tag describes an image (since search engines do not know recognise images and are able to read image’s description only–therefore is very important for SEO) and must be always added straightly after image URL (description must be included into quotes):

this is an image description

If you have any specific question about how to post via Edit HTML mode in Blogger you are welcome to leave your comment below.

0 comments:

Post a Comment