Logo

In this article, we learn how to create sticky posts or have an article permanently displayed on your Home page and above the Blog Posts. This is useful if you want readers to see a particular post, message, announcement or text whenever they visit the site. It could be an earlier popular post. In all Blog platforms, new posts are always shown first and older posts are archived. With a simple trick, we can have this earlier post remain on the Home page, above all the new posts.

Create a Page Element Method

One recommended way to have a piece of writing permanently on top of the Blog Posts is to work it into the template by creating a Page Element.

1. Follow our article in Add Page Element to Blogger Header and Blog Posts. Enable the “Add a Page Element” function in the Blog Posts and if you'd like, the space between the Header and the Blog Posts. This is an interesting location, because it is right after the Header and yet does not follow the style settings of the Header. For people who want to insert a Horizontal Menu and Navigation Bar, this might be an ideal location. Once you have done that, you should be able to add new elements above the Blog Posts or right underneath the Header.

2. The second step is to create the Post. Login, go to “Posting” and create a New Post under the “Compose” mode. If you don't see a “Compose” mode, go to Settings -> Basic and at the bottom, to the question “Show Compose Mode for all your blogs?” choose “Yes” and save the settings. Type your Post contents, upload your pictures, create your links, etc. While you don't have to insert the labels, put in the Title of the article within the contents. Make the title large, bold or change the font color. Preview the post and if you are satisfied with it, you can save the draft Post and go to the next step. [Note: To check the Post Title font-size and color code settings, go to Template -> Edit HTML and look for .post h3{ You would be able to see the font-size, font-weight (if any) and color. Apply the same style to the Title that you have typed in the contents of your draft Post.]

3. Click to view the post under the “Edit HTML” mode.



4. There are some things you must do. If in your Settings -> Formatting -> Convert line breaks you have chosen “Yes”, whenever you press the “Enter” or “Return” key on your keyboard, the Post Editor will convert that into the HTML tag <br/>. We must now enter these tags into the HTML of the draft Post. Go to your draft Post under the “Edit HTML” mode.

Example 1:

At the places where you press an “Enter” key to create a line break, add the HTML tags as follows:-

Line One <br/> Line Two

Example 2:

Between each new paragraph, add this HTML tag:-

Paragraph One <br/><br/> Paragraph Two

Example 3:

You can also add this instead:-

Paragraph One <p> Paragraph Two </p>

5. Once these are added to the Post, we can now block copy the entire chunk of the draft Post HTML code. Go to Template -> Page Elements -> Add a Page Element in the Blog Posts section and choose “HTML/JavaScript”. Paste the entire draft Post HTML code and save. View your Home page, and you will see the Sticky Post permanently displayed above the Blog Posts.

6. Finally, we can delete the draft Post. If you have uploaded pictures, you will be asked whether you want the pictures deleted. Since you are using these pictures in your Sticky Post, uncheck the box to keep the pictures in your Picasa Web Album.

Change the Post Date Method

When you are creating a new post, you can see at the bottom left of the Post Editor a “Post Options” link. When you click that, you will be able to amend the “Post time and date.” If you want the post to be always on top of all the other new posts, change this date to a future date like the year 2015. Once the post is published, the post, being the latest post in the reverse chronological date order, will always appear on the Home page as the first post.



Important Notes:

i) In the new Blogger platform, the URL of Posts follow the month and year that are specified in the “Post month and date” option. In our example, we specified the month as August and the year as 2015. The Post URL will be http://BLOG URL/2015/08/TITLE.html. This URL will remain unchanged even if you edit the post and alter the date. Good for us. It means that we can change the date of an earlier post without affecting the backlinks to that post. People who linked to that URL will not have to change the link address.

ii) You can therefore alter an existing post in the same manner. Edit the Post. Change the year to a much later year and the post will always appear on your Home page.

iii) The other point to note is that when the year 2015 arrives, you may have to alter the post date yet again to another later date. Who knows, perhaps by then you may not want that post to appear on your Home Page anymore.

iv) If you want a recent post to be stored somewhere at the end of your archive list, and never to appear in the list of recent posts, use the same method but change the date to an earlier date, a year like 1950.

The Blogger's post editor gives you one number style for an Ordered (Numbered) list and one bullet style for an Unordered (Bulleted) list. Here, we shall let you know how you can change these styles to add variation to your posts. We shall also discuss how links can be incorporated into such lists and how a marquee tag can be added to make the list scroll.

Ordered (Numbered) List

We like to use ordered lists to assign numbers to a list of items or a step-by-step instructional guide. Inserting it into our posts is easy. When you are creating a post, choose the “Compose” mode and click the button in the toolbar that says “Numbered list”. Type your items and press Enter after every item. You will see numbers 1, 2, 3 and so on assigned to each item.



Sometimes, you may not want numbers. For example, if you have a Table of Contents, you may want to use capital letters A, B, C to the list. If you have a long article with several lists, you may want to use Roman numbers I, II, III too. What you do after typing the list is to change the mode from “Compose” to “Edit HTML”. You will see the HTML that looks like this:-

How to bake a chocolate cake <ol> <li>Preheat oven.</li> <li>Sift together flour, baking powder, baking soda, cocoa and sugar.</li> <li>Add water and oil.</li> <li>Add eggs, milk and vanilla.</li> <li>Pour batter into pan.</li> </ol>

The <ol> tag represents “ordered list” and each list item starts with <li> tags. Notice that they must have closing tags. After each list item, there is a </li> tag and after the entire ordered list, there is a closing </ol> tag. If I want the numbers changed to capital letters, I can add a type="A" into the code. The code will now be this:-

<ol type="A"> <li>Preheat oven.</li> <li>Sift together flour, baking powder, baking soda, cocoa and sugar.</li> <li>Add water and oil.</li> <li>Add eggs, milk and vanilla.</li> <li>Pour batter into pan.</li> </ol>

When you click back to “Compose” mode, this is how the post will look:-



The other possible types that you can use are the Lowercase letters, Roman numerals, and Lowercase Roman numerals.

type="a" will give you a, b, c
type="I" will give you I, II, III
type="i" will give you i, ii, iii

Unordered (Bulleted) List

Using the above cake recipe example, the ingredient list need not have any particular order. Instead of numbers, we will use “Bulleted list” in the toolbar to type in our ingredients. The standard Blogger style is a Disc bullet (a black colored dot).



This time, when we view the code under “Edit HTML” mode, we will see this:-

Ingredients <ul> <li>all purpose flour</li> <li>baking powder</li> <li>baking soda</li> <li>cocoa</li> <li>sugar</li> <li>water</li> <li>oil</li> <li>eggs</li> <li>milk</li> <li>vanilla</li> </ul>

The <ul> tag means “unordered list”. The other styles you can change the bullets to are the circle and the square. Just like the ordered list, we can add within the <ul> tag the type of bullet. We can have:-

<ul type="circle">

Or

<ul type="square">

We have incorporated both of them into our sample to let you see how they would appear:-



Link List

Instead of having just words, we can have text links within an ordered or unordered list. A detailed writeup of text link codes can be found at our article on Hyperlinks and Image Links. Put the text link code into the numbered or bulleted list. For example, this HTML code:-

<ul type="circle"> <li><a href="http://tips-for-new-bloggers.blogspot.com/" target="_blank">Blogger Tips</a></li> <li><a href="http://quotes-motivational-inspirational.blogspot.com/" target="_blank">Famous Quotes</a></li> <li><a href="http://fairy-tales-fables-business.blogspot.com/" target="_blank">Business Fables</a></li> </ul>

Will give you this, with links opening in new windows or tabs when clicked.

• Blogger Tips
• Famous Quotes
• Business Fables

You can also replace the text links with image links.

Scrolling Links

We can make the links scroll by combining the above code with the marquee tag. The various styles of scrolling text and their attributes were explained in our article on Scrolling Text – Marquee HTML Code.

If we take one of the specimen scrolls, this scrolling text code:-

<marquee direction="up" scrollamount="2" height="100px" bgcolor="#ffffcc"> <ul type="circle"> <li><a href="http://tips-for-new-bloggers.blogspot.com/" target="_blank">Blogger Tips</a></li> <li><a href="http://quotes-motivational-inspirational.blogspot.com/" target="_blank">Famous Quotes</a></li> <li><a href="http://fairy-tales-fables-business.blogspot.com/" target="_blank">Business Fables</a></li> </ul> </marquee>

Will give you a link list that scrolls upwards:-

• Blogger Tips
• Famous Quotes
• Business Fables

Bloggers generally welcome constructive comments and feedback on their posts. Among the ways to encourage comments are to remove the “nofollow” tag and to add a Recent Comments widget into the template. Comments highlight issues that readers might have faced, and the author's reply to these comments may be useful to other readers as well. If you have many comments posted in your blog, it would be nice to add different styles to the author's comments to make them stand out from the rest. Readers with questions on commonly asked issues may easily find their answers in previous posted comments. This tutorial shall explain how the author comment styles can be added to the template.

After 7 months of blogging, we have today hit the 300,000 visitors mark. It is not a big deal to many bloggers but it means a lot to us, knowing that whatever leisure time we had given up to write these articles was worth the while. Thanks to all! While we were reviewing our articles earlier, we realized that there were so many comments in several of them that we had a hard time finding our own comments. We have therefore decided to highlight our comments to make it easy for our readers to sieve through and check if their issues have been addressed. An important point to note is that some of the answers we posted may have been superseded by events and you are still free to post the questions again.

Modify Template

Since this article is about setting a style for the comments that appear after a post, we assume that you have configured your Blog to display the comments. Check Settings -> Comments and select “Show” Comments.

Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Click the check-box next to “Expand Widget Templates”.

Press Ctrl+F and search for the word “comments-block”. You should come to these lines. Insert the code (shown in red):-

<dl id='comments-block'> <b:loop values='data:post.comments' var='comment'> <dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> <data:commentPostedByMsg/> </dt> <b:if cond='data:comment.author == data:post.author'> <dd class='blog-author-comment'> <p><data:comment.body/></p> </dd> <b:else/> <dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd> </b:if> <dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </dd> </b:loop> </dl>

Comment Styles

After you have inserted the above code, scroll upwards in the template and Ctrl+F to search for the word “comment-body”. In the Minima template, you should have this code:-

#comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-body p { margin:0 0 .75em; }

According to our Poll, the second most commonly used template is the Rounders template. In Rounders, this is what you will find:-

.comment-body { margin:0 0 1.25em; padding:0 0 0 20px; } .comment-body p { margin:0 0 .5em; }

In other templates, you should see “comment-body” classes similar to the above. This is the current style for the display of all comments after the posts. To have a different comment style for the author, copy what you have in your template, paste and rename the class. For example, in the Minima template, we shall add the code (shown in red):-

#comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-body p { margin:0 0 .75em; } .blog-author-comment { margin:.25em 0 0; } .blog-author-comment p { margin:0 0 .75em; padding:5px 10px; border:1px dotted #254117; background:#C3FDB8; }

You can name the new class anything you want by changing the “.blog-author-comment” to something else. (Don't omit the full-stop in front.) Just remember to rename that bit of code discussed in our earlier section. In our example, we have used the same margin settings but added a padding (space around the text) of 5px at the top and bottom, and 10px on the left and right. We introduced a thin border surrounding the text and added a background color. For more color codes you can refer to our Color Code Chart. The author's comments block will look like this:-



If you are using the Rounders template, follow the same steps as above, copy the “comment-body” styles and add the new classes. For example, the code can look like this:-

.comment-body { margin:0 0 1.25em; padding:0 0 0 20px; } .comment-body p { margin:0 0 .5em; } .blog-author-comment { margin:0 0 1.25em; padding:0 0 0 20px; } .blog-author-comment p { margin:0 0 .5em; padding:0 0 0 20px; color:#F6358A; font-style: italic; }

Did you notice that we have not changed the margins and padding? The author's comments will be different though as there is now a text color and the font-style is in italics. This is what you will see:-



If you are using other templates, do the same by copying the current “comment-body” styles and inserting the new classes and new styles. Experiment with the different style options and colors. If you need more ideas, you can refer to the list of properties in our article Links - Hover and Rollover Effects.

You can even insert a background image to the author's comments and change the font to a larger font or a different font typeface. The code will look like this:-

.blog-author-comment p { margin:0 0 .75em; padding:5px 10px; font-size:120% font-family:courier; background: url("URL OF IMAGE"); }

Try out different blog author comment styles and settle on the one that best suits you. Refresh the blog every time you make the change. You will notice that there is a “Post a Comment” link at the Comment footer. Should you want to rename it and change the words, read our short guide on Change the Post a Comment Link.