From Page 25 |
Structure of a Web Page | |
For a reader a blog is nothing but a Web Page. Thinking of the appearance of your blog is thinking of the design of the web displaying the blog. The template you choose for your blog decides this appearance.
To understand the template and its contents, you need to understand the structure of a web page.
The browser identifies the content as HTML content based on the <html> tags and not based on the file name extension. That is the reason we see web pages with different file name extensions also being interpreted correctly by the browser. Learning HTML involves learning about the various HTML tags and where they are to be present i.e. whether in the HEAD section or the BODY section of the web page. |
HTML code relating to a Classical Template | |
HTML tags, Blogger Page-Level Tags and Blogger Item-Level Tags are the three types of codes/tags that you come across within the template.
When you publish a post or save a draft of the post, the content relating to the post is stored in a database. The blogger program at the time of building up your blog page places the appropriate content in the web page, using the Item Level and Page Level Tags present in the template. • Item Level Tags <$____$>
The Item-Level tags represent the post/blog data stored in the blogger database in relation to the blog.
Its name is delimited within <$ and $> The blogger program at the time of building up your blog (web) page would fetch and pour the data represented by the item level tag at the place where the tag is located in the template.
The content below gives the location of the various Blogger Item Level Tags used within a template.
• Page Level Tags <____>
The Page-Level tags represent instructions for the design and structure of the page. They act as containers for one or more Item-level tags.
• HTML Tags <____>
The HTML tags have their normal functionality just like in any other web page. The page level tags and HTML tags look similar. Unless you know HTML you may not be able to identify which is a Blogger Page Level Tag and which is a HTML tag.
A brief explanation of the various tags within the template is given below under the various sections. |
HTML Document beginning | |
• Document Type Declaration
According to HTML standards, each HTML document requires a document type declaration. A HTML document begins with the "DOCTYPE" definition. It tells a validator which version of HTML to use in checking the document's syntax. The document type declaration precedes the beginning of the HTML document. Many web sites ignore placing this tag in their web pages. If you want your web documents to be standards compliant you should ensure its presence in the web document. • HTML Begin
The beginning HTML tag. This tag is an indication to the browser that the content from here on is in HTML (Hyper Text Markup Language). The end tag </html> that indicates the end of the HTML content, can be found towards the end (generally as the last piece of code) in any HTML document. |
HTML Document Head | |
• Document (Web Page) Head Section
• Document/Web Page Title
The content of the html TITLE element is displayed in the browser's title bar.
The content of the title element is represented by the blogger item level tag <$BlogPageTitle$ >. The blogger program would place
• Meta Data
metadata is data about data. An item of metadata may describe an individual data item or a collection of data items.
The item level tag, <$BlogMetaData$> represents the meta data to be included within the page header. An example of the content placed when this tag is used is given below.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="generator" content="Blogger" /> <link rel="service.feed" type="application/atom+xml" title="A Different Kind of Thought" href="http://thezing.blogspot.com/atom.xml" /> <link rel="service.post" type="application/atom+xml" title="A Different Kind of Thought" href="https://www.blogger.com/atom/26040249" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.pyra?blogID=26040249" /> <meta name="ROBOTS" content="NOINDEX,NOFOLLOW" />
• Style Definitions » CSS
No separate CSS file is used for web pages generated by blogger and all the formatting options would be present here itself. The content of this element forms a major part of the template content within the header. The various formatting definitions are explained near the element that they influence. |
Body beginning | |
• Document Body Section
» Formatting Options
Defined for the <body> element in the document head within the <style> element.
This style definition for the anchor tag works for all the links created using the anchor tag by default.
• Division holding the total Content
» Formatting [id="content"]
|
Blog Header [Title and Description] | |
• Blog Header Container
A html DIV element nested within another html DIV element (id=header) holds the content that forms the blog title and description.
A html DIV element is delimited by a <div> being tag and the </div> end tag. Any attribute being included within the begin tag.
» Formatting [id="header"]
• Blog Title
The following Blogger Item Level Tags place the respective data from the blogger database
The blogger item level element <$BlogTitle$> being outside the ItemPage element, would be included in the web page always. » <ItemPage> : Page level Conditional Element
<ItemPage> is a blogger page level Conditional element. The content of this element would be included/displayed only on the individual post pages and will not be included/displayed on the blog's main page.
The <$BlogTitle$> not being included within the <ItemPage> element, the title text/images would be displayed on all pages. The html anchor (a) element is made a part of content of the "ItemPage" element. Thus the title content would be formatted as a link to the blog main page when it is a page other than the blog main page (like individual blog post pages) only. • Blog Description
The Blogger Item Level Tag <$BlogDescription$> places the data relating to the blog description from the blogger database |
Blog post Content holder | |
• Post Content Containers
The post content is placed within a division with an id="main3", which is nested in another division id="main2" which itself is nested within another division with id="main", each division with its own formatting.
The content relating to the post header, post body, post footer, post comments, post backlinks are all held within the division with id=main3. You can find the end tags for these divisions just after the end of the code for comments. You can identify them with the </Blogger>, <!-- End #main --> etc. » Formatting [id="main"]
» Formatting [id="main2"]
» Formatting [id="main3"]
No formatting is specified for <div id="main3">.
• <Blogger> : Page level element
The total post content forms part of the blogger page level element <Blogger>.
All the tags/elements relating to the blog post-content should be a part of this element i.e. they should be placed after the <Blogger> (begin tag) and before the </Blogger> (end tag) in the template. The code within these tags would be processed as many times as the number of posts whose content is to be displayed in the web page. |
Post Date Header | |
• Post Date Header
The blogger page level tags <BlogDateHeader> and </BlogDateHeader> wrap the content relating to the date. This would result in the date being formatted in a form and displayed in a language you have chosen in your blog date and time settings. The date format defines how the date is expressed [23/03/2007 (or) 23rd March 2007 (or) March 23rd 2007, etc.]. The Blogger Item Level Tag <$BlogDateHeaderDate$> places the data relating to the publishing date from the blogger database. The formatting options for the html H2 element defines how it is displayed (font face, font size, color, etc). |
Container for Post Title, Body and Footer | |
• Container
The html DIV element holding the content of the post (title, body and footer) is delimited by the <div> (begin tag) and </div> (end tag)
• Block Quote
Blockquote is a html element delimited by the <blockquote> (being tag) and </blockquote> (end tag).
This is inserted into the post container using the tools available on the blogger post create/edit pages. » Formatting[blockquote]
» Formatting[class=post | blockquote | p]
• POST ID
The post ID is assigned to the post by blogger when the post is published or saved as a draft for the first time. This ID is used to create a book mark within the web page for the starting point of the content division.
Though a html anchor (a) element is used, it is does not form a hyperlink. This can be understood from the absence of the href="" attribute within the opening tag of the anchor element. This type of anchors would be useful as bookmarks. This anchor element would form the bookmark for the beginning of the content division for the post. |
Post Title and Body | |
• Post Title
» Title Text
» Formatting [class="post-title"]
» Title Link
Where the display of the Link field in the post compose page is not enabled or where it is enabled and left empty, the value of the href attribute would be the url of the permanent link to the post. » Formatting [class="title-link"]
• Post Body
|
Post Footer | |
• Post Footer ContainerThe total footer content is held within a paragraph (p) html element delimited by a <p> (begin tag) and </p> (end tag). Any attribute being included within the begin tag. The end tag is found just before the </div> for the total post content.
• Post AuthorThe content forming a part of the <em> HTML element would be emphasised. @ would be replaced by the word to mean at. The Blogger Item level tag <$I18NPostedByAuthorNickname$> places the data relating to the post body from the blogger database. The author name is the name set as the display name in your profile information. • Time Stamp » Perma Link
PERMALINK is a link to the blog post. The actual url is dependent on the settings chosen for the post pages and archiving frequency for your blog. (Caution: Please do not change those settings frequently as that would result in a change in the post url thereby making it difficult for those who have bookmarked your post to access it).
The Blogger Item level tag <$BlogItemPermalinkUrl$> places the data relating to the post PERMALINK (url) from the blogger database as the value for the href attribute. The Blogger Item level tag <$BlogItemDateTime$> places the data relating to the time of publishing the post from the blogger database. This text works as the display text for the PERMALINK. The end </em> tag ends applying the emphasis format for the text. • Links for Comments Pages in Footer
The blogger page level tag <BlogItemCommentsEnabled> is like a conditional tag. The contents within this tag are processed by the blogger program only when the comments are enabled for the post (comments can be disabled for all the posts together or for each individual post) » Comments Page URL
The blogger item level tag <$BlogItemCommentCreate$>
places the data relating to the URL for accessing the web page displaying the comments for the post. The page also has a form for writing new comments.
Where the comments are made to open up in a pop up window, (&isPopup=true) would not be present in the URL. » OnClick event to Open the Comments Page in a new window
The blogger item level tag <$BlogItemCommentFormOnclick$> places value for the onclick="" event (javascript code for opening the comment in a new window) which is also placed within the anchor element opening tag.
» Number of Comments
The blogger item level tag <$I18NNumComments$>
places the numerical data indicating the number of published comments on the post.
It is placed as the content of the HTML <span> element. The style attribute is included within the opening tag. The style property converts the characters to lower case (using a style property) .
• Links for Backlinks Page in Footer
The blogger page level tag <BlogItemBacklinksEnabled> is like a conditional tag. The contents within this tag are processed by the blogger program only when the backlinks are enabled for the post (backlinks can be disabled for all the posts together or for each individual post) » URL for Page Displaying Backlinks
The Blogger Item level tag <$BlogItemPermalinkUrl$> places the data relating to the post PERMALINK (url) from the blogger database as the value for the href attribute ading a bookmark #links.
When a blog reader clicks on this link a page with only the post is displayed. The post content, the comments made on the post and the backlinks for the post are displayed one below the other in that order. The bookmark will ensure that the browser would display that part of the page with the beginning of the backlinks section. » Number of Backinks
The blogger item level tag <$I18NNumComments$> places the numerical data indicating the number of backlinks created for the post. It is placed as the content of the HTML <span> element. The style attribute is included within the opening tag. The style property converts the characters to lower case (using a style property) .
» Formatting [class="comment-link"]
This style definition is the same as that for the comments above.
• Quick Edit & Email Post Links
These are also placed within the same paragraph holding the total footer content. |
Comments and Backlinks Display division | |
• Comments Division
The total content relating to Comments and Backlinks for a post is included within a division element with the id=comments.
You can find the end tag for the division just after the code for the backlinks along with the Itempage end tag. » Formatting [id=comments]
• <ItemPage> » Comments Conditional Display
The content within the blogger conditional tags, <ItemPage> and </ItemPage> would be displayed only on the inner pages where the blog posts are displayed individually and not on the blog main page.
These tags hold the code for the Comments and the Backlinks for the post. You can find the end tag after the code for the backlinks subsequently. |
Comments display (on Post Page) | |
• Comments » Enabled/Disabled
• Bookmark for the Comments Display area
This type of anchors would be useful as bookmarks. This anchor element would form the bookmark for the beginning of the area on the webpage displaying the comments for the post.
• Number of Comments
The blogger Item Level tag <$I18NNumComments$>, places the data relating to the number of published comments on the post at the top within the h4 HTML element.
» Formatting [id=comments | h4]
• Comments Block
» Formatting [id=comments-block]
• Comment Filler
The total code relating to placing a single comment is included within these tags. • Comment ID : Author
The data relating to comment author is made a part of a definition term by delimiting it within a <dt> (opening tag) and </dt> (end tag). Sample output relating to a post comment.
» Comment ID
Each comment when saved is assigned a unique numerical id. The blogger item level tag <$BlogCommentNumber$> would bring in this data from the blogger database and include it as the value of the id="__" attribute within the <dt> tag as well as the value of the name="__" attribute within the <a>
» Bookmark
Though a html anchor (a) element is used, it is does not form a hyperlink. This can be understood from the absence of the href="" attribute within the opening tag of the anchor element.
<a name="comment-614157385342593746"></a> This type of anchors would be useful as bookmarks. This anchor element would form the bookmark for the beginning of the comment.
» Author Name : Link
The author name would be the blogger display name, if the comment is posted by a blogger user. The value of the href="__" attribute in such a case would be the link to the blogger profile page.
For an anonymous comment, if the author name is filled by the comment poster, that would be displayed as the comment author name. The link filled in the link field would be taken as the value of href="__" attribute in such a case. <a href="http://www.blogger.com/profile/09622048748094105118" rel="nofollow">The Edifier</a> said... For an anonymous comment, the name Anonymous is displayed and no value is fillled for the value of the href="__" attribute The blogger item level tags <$I18NAtCommentTimeWithPermalink$> and <$I18NCommentAuthorSaid$> would place this data into the web page. » Formatting [id=comment-data]
• Comment Body : Permalink
The data relating to comment body and the perma link to the comment are made a part of a definition description by delimiting it within a <dd> (opening tag) and </dd> (end tag). » Formatting [class=comment-body]
Sample output relating to a post comment.
» Comment Body
The blogger page level tag <$BlogCommentBody$>, fetches the post body content from the blogger database. This is placed within a html paragraph element.
» Formatting [class=comment-body | p]
» Comment Perma Link
The blogger page level tag <$BlogCommentDeleteIcon$> fetches the content relating to creating a perma link for the comment with the time stamp for the comment working as the link text.
Where the person viewing the blog pages has the administrative authority for the blog, a delete icon (bin image) would also be displayed. » Formatting [class=deleted-comment]
• Post a Comment Link
The blogger page level tag <$BlogItemCreate$>, fetches the content relating to creating a link using which the page to create/publish a new comment can be accessed by the blog reader.
This is included within a paragraph (p) element delimited by the <p> (opening tag) and a </p> (end tag).
• Link for Comments Feed
The blogger page level tag <$BlogItemFeedLinks$>, fetches the content relating to creating a link for the feeds for the comments on the post.
This is included within a paragraph (p) element delimited by the <p> (opening tag) and a </p> (end tag). This link can be found at the bottom of the page just after the navigational links below the content relating to backlinks. » Formatting [id=postfeeds]
|
Backlinks display (on Post Page) | |
• Backlinks » Enabled/Disabled
• Bookmark for the Backlinks Display area
This type of anchors would be useful as bookmarks. This anchor element would form the bookmark for the beginning of the area on the webpage, displaying the backlinks for the post.
• Number of Backlinks
The blogger Item Level tag <$I18NLinksToThisPost$>:, places the data relating to the title for the backlinks section. This does not include the number of backlinks for the post.
The links to the post in other blogger blog posts, are verified at the time of displaying the post page and only the working links are listed. The number of backlinks is not a static figure whose data can be obtained from the blogger database (unlike in the case of comments). » Formatting [id=comments | h4]
• Backlinks Block
» Formatting [id=comments-block]
• Backlinks Filler
The total code relating to placing a single backlink is included within these tags. • Backlink Title : Link
The data relating to comment author is made a part of a definition term by delimiting it within a <dt> (opening tag) and </dt> (end tag). » Formatting [class=comment-title]
This formatting style is not defined. Sample output relating to a backlink to the post.
» Backlink Control
The blogger item level tag <$BlogBacklinkControl$>, places the controls within a span (<span class="backlink-toggle-zippy"> </span>) that would enable the backlink detail to be folded and unfolded.
» Backlink Title : Link
The blogger item level tag <$BlogBacklinkURL$> places the data relating to the url of the post where the link to the current post exists as the value of the href="__" attribute within the anchor tag.
The blogger item level tag <$BlogBacklinkTitle$> places the data relating to the title of the post where the link to the current post exists. This text works as the display text for the link to that post i.e. the backlink. • Content of the Post holding the link
A snippet of the content of the post where the link to the current post has been placed would be placed along with the backlink. This content is hidden by default and can be displayed in a pane that is expanded on clicking on the right arrow icon to the left.
The blogger item level tag <$BlogBacklinkSnippet$> places the data relating to the snippet.
• Author of the Post holding the link
The name of the author publishing the post containing the link would be displayed along with time stamp indicating the time of publishing the post. This content is hidden by default and can be displayed in a pane that is expanded on clicking on the right arrow icon to the left.
The blogger item level tag <$I18NPostedByBacklinkAuthor$> places the data relating to the author and the item level tag <$BlogBacklinkDateTime$> places the data relating to the time stamp. » Formatting [class=comment-poster]
• Create a Link
The blogger page level tag <$BlogItemBacklinkCreate$> fetches the content relating to creating a link using which the page to create a new post with a link to the current post can be accessed by the blog reader.
This is included within a paragraph (p) element delimited by the <p> (opening tag) and a </p> (end tag).
|
End of Post Content Holder | |
Link to Blog Main Page (HOME)
Towards the end of the posts container after all the content is placed a link to the home page is created.
The blogger item level tag <$BlogURL$> would place the blog url as the value of the href="__" attribute and the blogger item level tag <$I18NHome$> would place the text that works as the display text for the link (Home - by default). |
Side Bar Container | |
• Sidebar ContainerThe side bar code starts immediately after the end of the main post section code. The total content within the side bar is made a part of a html div element. » Formatting [id=sidebar]
• Member Profile Box
The total code for forming the member profile box is placed into the web page by the blogger item level tag <$BlogMemberProfile$>.
Thus any changes to be made to it have to be by using the style properties. Sample output from a blog page.
» Formatting [id=profile-container]
» Formatting [id=profile-container | h2]
» Formatting [id=profile-container | P]
» Formatting [id=profile-container | a]
» Formatting [id=profile-container | class=profile-textblock]
» Formatting [class=sidebar-title]
» Formatting [class=profile-data | strong]
» Formatting [class=profile-link | a]
|
Side Bar Boxes | |
All the other content in the side bar, apart from the Member Profile is placed in a division which is nested two levels deep. » Formatting [class=box]
» Formatting [class=box | ul]
» Formatting [class=box | ul | li ]
» Formatting [class=box | p ]
» Formatting [class=box]
|
Side Bar » Links List | |
• Title
The blogger item level tag $I18NLinks$> places the data relating to the title of the links list (links by default).
» Formatting [class=sidebar-title ]
• Links List » Conditional Display
The links list is formatted using an unordered (bulleted list). Each link is formed as a list item within the list.
To create/modify entries within the list, you need to create/modify the relevant list item. The list is placed within the blogger page level conditional tag <MainOrArchivePage> (begin tag) and </MainOrArchivePage> (end tag) which would ensure that the list is displayed only on the blogs main page or the blog pages when the archive list is being displayed. The list would not be displayed on the post pages when the individual posts are displayed. |
Side Bar » Previous Posts List | |
• Title
The blogger item level tag $I18NPreviousPosts$> places the data relating to the title of the previous posts list (Previous Posts by default).
» Formatting [class=sidebar-title ]
• List
The list of previous posts is also formatted using an unordered list. Each post listed is a list item forming a link (with the permalink as the url) to the relevant post. The title of the posts is used as the display text for the hyperlink.
The blogger item level tag <$BlogItemPermalinkURL$> places the data relating to the posts perma link (url) as the value of the href="__" attribute and the blogger item level tag <$BlogPreviousItemTitle$> places the data relating to the post title. The code for generating the list items is placed within the blogger page level tags <BloggerPreviousItems> and </BloggerPreviousItems>. To ensure that the published posts prior to the first post (in display on the blog page) are listed, the code generating the list has to be processed anew every time the post in display changes. The list is displayed on all the blog pages. On the main page, the list displays the 10 most recent posts. On the post pages and other pages, the list would display the posts prior to the first post in display. |
Side Bar » Archives List | |
• Title
The blogger item level tag $I18NArchives$> places the data relating to the title of the archives list (Archives by default).
» Formatting [class=sidebar-title ]
• Archives List
The list of Archived posts is also formatted using an unordered list. Each set of archived posts is a list item forming a link to the page displaying the set of posts. The display text for the hyperlink is dependent on the options chosen for archiving frequency and post pages.
» Conditional
The list is placed within the blogger page level conditional tag <MainOrArchivePage> (begin tag) and </MainOrArchivePage> (end tag) which would ensure that the list is displayed only on the blogs main page or the blog pages when the archive list is being displayed. The list would not be displayed on the post pages when the individual posts are displayed.
The code for creating the list is placed within the blogger conditional page level tags <BloggerArchives> and </BloggerArchives>. The code within these tags would not be processed if archiving is disabled for the blog. » The Link
The blogger item level tag <$BlogArchiveURL$> places the data relating to the page displaying the archived posts as the value of the href="__" attribute and the blogger item level tag <$BlogArchiveName$> places the data that works as the display text for the link. The url and the display text are dependent on the archiving frequency and the post pages settings chosen for the blog.
» Link to Home Page
Additional piece of code is placed within the blogger conditional tags <ArchivePage> and </ArchivePage> which will be processed only if the page in display is one which is displaying the archived posts. Whenever you access the archive pages from any blog page, an additional link at the end of the list is placed that would work as a link to the blog's main page.
The blogger item level tag <$BlogURL$> would place the blog url as the value of the href="__" attribute and the blogger item level tag <$I18NCurrentPosts$> would place the text that works as the display text for the link (Current Posts - by default). |
Side Bar » End | |
• Blogger button
Towards the end of the side bar code you will find the above noted code which would place an image button within the side bar.
The additional line of code within the paragraph element is to work as a hint to those searching for customising the side bar code. • Feed Link
Where your blog has feeds enabled, you may also find a link to the blog feed at the end after the button.
» Formatting [id=blogfeeds]
• Adding content to the sidebar
If you understand the total template code (atleast the sidebar code) it would be convenient for you to make insertions into the sidebar. If you insert anything at the end (before the 3 </div> tags that end the side bar boxes), it would be added to the side bar at the bottom.
|
Blog Footer Code | |
• Container
The footer container is formed by three html divisions nested one within the other. Where the footer is empty, only the container is displayed on the blog pages initially. You can fill the footer with your own content as you intend.
» Formatting [id=footer]
The content within the paragraph is commented out so as not to be displayed. It works as a hint to those intending to include content in the footer.
» Formatting [id=footer | div]
» Formatting [id=footer | div | div]
|
Author Credit : The Edifier | ... Continued Page 27 |