Page

2016/08/10

How to Customize Blogger Template﹍(1) Skills of Adding Comments for Codes

0
blogger-template-skills-of-adding-comments-for-codes-How to Customize Blogger Template﹍(1) Skills of Adding Comments for CodesThere are 3 posts for this series of articles "How to Customize Blogger Template", to help readers find the codes quickly in correct area in Blogger template when editing.

These series posts will summarize the codes of each important section in Blogger template, guiding readers how to use them, how to make proper comments. Thus you could save lots of time when searching for the codes you need.

(pic from: pexels.com)


1. How to Add Comments


If you often edit Blogger template, it's recommended to add proper comments for each important section, then you just have to search for the string in comments, to reach the right section.

Additionally, if you need to remove certain official codes in Blogger template, it's best not to delete the official codes. Instead, you could turn the official codes into comments, then you still have the chance to recover the official codes if necessary.

Now let's see what's the right way to make comments.


A. HTML Comments

<!-- content of comments -->

Above codes show how to add comments between HTML codes, and browsers will not display these comments on web pages.

For example, the HTML code of Blogger widget title is <h2><data:title/></h2>. If you prefer not to display the widget title, you might just delete these codes in Blogger template.

But it's recommended to turn these HTML code into comments as below:

<!--<h2><data:title/></h2>-->


B. CSS Comments

/* content of comments */

Above codes show how to add comments between CSS codes. In Blogger template, you might see the following codes:

body {
color: $(body.text.color);
}


If you would like to change the value of color, just remember to keep the default codes in the comments, in case someday you might need to recover it:

body {
color: #aaaaaa ; /*default value is: $(body.text.color)*/
}

This example is not practical actually, as we could use official tool to change the color in Blogger dashboard.


C. JS Comments

There are two ways to make Javascript comments:

// content of comments

This is and example of comments for single line.


/*
line 1
line 2
*/


This is an example of comments for multiple lines.



2. Add Comments Between Blogger Language


A. Blogger Layout

blogger-layout-How to Customize Blogger Template﹍(1) Skills of Adding Comments for Codes

Dashboard → Layout, above image shows the layout of Blogger blog, including different gadgets.


B. Blogger Language

For these Blogger gadgets(widgets), they're not composed in HTML language, but in special Blogger language.

Please refer to the official document "Page elements tags for layouts", and "Widget Tags for Layouts". In Blogger template, the codes of Blogger widgets are between these specific Blogger tags:

  • <b:section>
  • <b:widget>


C. Add Comments for Widgets

The most important issue is, if you would like to make comments for Blogger widgets, be cautious of the location in Blogger template. Only make comments over here:

<b:includable...>
put your comments here
</b:includable>


If you don't put the comments between <b:includable> tag, these comments might disappear after saving the template.


blogger-wrong-comments-location-How to Customize Blogger Template﹍(1) Skills of Adding Comments for Codes

Above image is the example of wrong location, if you put comments as where the red square is in picture, then it's useless and will not be saved.
↑ TOP

No comments:

Post a Comment