Blogger Template Overhaul – Part 6 of 8
Posted by taoski | Filed under Coding, Geeky, Web
Comments
Apart from the main post, the listing of comments is another area of your blog that you may want to customise.
There are two views to the comments on your blog, the list of comments you see when you view the post on it’s own and the list of comments when you are leaving a comment yourself.
There are several main differences between these two posts.
- Without major hacking and editing you cannot change the way that the comments appear when you are leaving a post yourself.
- There is not a easy way to insert the profile image of the commenter into the list of comments under the posting.
- Even though you change the way comments appear under the posting, when you post a comment, the other format will be displayed.
Although there are these restrictions, we can make it all look a little nicer when you view the comments under the posting. This is also referred to as ItemPage and a corresponding Blogger tag <ItemPage> is used to show content in this format.
What I want to do is as follows:
Highlight my comments so they appear in a different color to the others.
Highlight the commenters names in bold.
The code which displays the comments at the bottom of each posting can be found in Zone 3 as follows:
<!– Begin #comments –>
<ItemPage>
<div id=”comments”>
<BlogItemCommentsEnabled><a name=”comments”></a>
<h4><$BlogItemCommentCount$> Comments:</h4>
<dl id=”comments-block”>
<BlogItemComments>
<dt class=”comment-poster” id=”c<$BlogCommentNumber$>”><a name=”c<$BlogCommentNumber$>”></a>
<$BlogCommentAuthor$> said…
</dt>
<dd class=”comment-body”>
<p><$BlogCommentBody$></p>
</dd>
<dd class=”comment-timestamp”><a xhref=”http://geeklimit.com/#<$BlogCommentNumber$>” mce_href=”http://geeklimit.com/#<$BlogCommentNumber$>” title=”comment permalink”><$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p class=”comment-timestamp”>
<$BlogItemCreate$>
</p>
</BlogItemCommentsEnabled>
<BlogItemBacklinksEnabled>
<a name=”links”></a><h4>Links to this post:</h4>
<dl id=”comments-block”>
<BlogItemBacklinks>
<dt class=”comment-title”>
<$BlogBacklinkControl$>
<a xhref=”<$BlogBacklinkURL$>” mce_href=”<$BlogBacklinkURL$>” rel=”nofollow”><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>
</dt>
<dd class=”comment-body”><$BlogBacklinkSnippet$>
<br />
<span class=”comment-poster”>
<em>posted by <$BlogBacklinkAuthor$> @ <$BlogBacklinkDateTime$></em>
</span>
</dd>
</BlogItemBacklinks>
</dl>
<p class=”comment-timestamp”><$BlogItemBacklinkCreate$></p>
</BlogItemBacklinksEnabled>
<p class=”comment-timestamp”>
<a xhref=”<$BlogURL$>” mce_href=”<$BlogURL$>” ><< Home</a>
</p>
</div>
</ItemPage>
<!– End #comments –>
Now at first glance, this looks a little overwhelming, but we do not need to change very much to achieve the effects I wanted to make.
Firstly, we will make the commenters name bold as this is the quickest and easiest to do. We need to locate the <$BlogCommentAuthor$> tag which is used to display the name of the person who made the comment and enclose it within the HTML tags to make text bold <B> and </B>. 9 lines into the code above is the following line:
<$BlogCommentAuthor$> said…
All we will need to do is amend the code as follows:
<B><$BlogCommentAuthor$></B> said…
This will change the commenters name to appear as follows:
You could also change the “said…” text to something else if you wanted, but I am quite happy with it.
Now, I want to change the background color of any comments made by me. Any color will do – as long as its not bright pink! When reading other blogs I always like to see if the writer is part of the comment stream after their posts and this effect allows you to see that immediately.
For this part of the tutorial I will be writing some Javascript to achieve the background color change. If you are daunted by this then leave now, otherwise… let’s go!
The basis for this code is as follows:
- Check the name of the commenter by reading the contents of the <$BlogCommentAuthor$> tag.
- If that name is “Taoski” then send back some code to make the font bold and green.
- Otherwise, do nothing.
The Javascript code is as follows:
<script type=”text/Javascript”>
var author = ‘Taoski’;
var commenter = ‘<$BlogCommentAuthor$>’;
if (commenter.match(author))
{
document.write(‘<b style=”color: green;”>’)
};
</script>
Don’t worry too much about the code itself. What you will need to change is the author variable to have your name in instead of Taoski.
To activate their code, copy and paste it on the line underneath the <BlogItemComments> tag as follows:
<!– Begin #comments –>
<ItemPage>
<div id=”comments”>
<BlogItemCommentsEnabled><a name=”comments”></a>
<h4><$BlogItemCommentCount$> Comments:</h4>
<dl id=”comments-block”>
<BlogItemComments>
<script type=”text/Javascript”>
var author = ‘Taoski’;
var commenter = ‘<$BlogCommentAuthor$>’;
if (commenter.match(author))
{
document.write(‘<b style=”color: green;”>’)
};
</script>
<dt class=”comment-poster” id=”c<$BlogCommentNumber$>”><a name=”c<$BlogCommentNumber$>”></a>
<B><$BlogCommentAuthor$></B> said…
</dt>
<dd class=”comment-body”>
<p><$BlogCommentBody$></p>
</dd>
<dd class=”comment-timestamp”><a xhref=”http://geeklimit.com/#<$BlogCommentNumber$>” mce_href=”http://geeklimit.com/#<$BlogCommentNumber$>” title=”comment permalink”><$BlogCommentDateTime$></a>
<$BlogCommentDeleteIcon$>
</dd>
</b>
</BlogItemComments>
You will also need to add a </b> tag just before the </BlogItemComments> tag at the end to stop the font being bold on the next comment.
The result will show up like this:
And that rounds up the comments section overhaul!
This is part of the Blogger Template Overhaul series.
Part 1 – Introduction
Part 2 – Template Code
Part 3 – Design
Part 4 – Headers
Part 5 – Posts
Part 6 – Comments
Part 7 – The Sidebar
Part 8 – The Footer
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
posuere nunc justo tempus leo. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
Cras id urna.
June 5, 2006 at 3:53 pm
I’m digging this series and it finally motivated me to hack my blog.
As You can see on my site I wanted to keep it simple however my very basic html and css knowledge has still come in the way. I am happy with my site but when you click on a story directly It changes the header and post title sizes. How can I fix this????
Look forward to the rest of the series. Thanks.
June 5, 2006 at 4:56 pm
Thanks for the comment.
As for your blog, it looks ok to me mate!
Just make sure you press CTRL+F5 when viewing a “broken page” to force a reload, just in case you are seeing a locally cached version.
June 9, 2006 at 4:40 pm
thanks I guess I was a little too impatient!
June 10, 2006 at 8:37 am
Hey Taoski, happened upon your blog and template overhaul series and am grateful for your revelations. I am not trained in coding at all but stumble my way through. A few quick questions:
1. Could you view my page and let me know how to get my sidebar back on the side and not at the bottom?
My site
2. Is there a way to clean up my code without destroying the formatting?
Thanx, I really appreciate any help you can give!
June 10, 2006 at 9:12 pm
Thanks for the tips – these are fantastic. I see that you have categories on your site. Is there any way to have categories if your blog is hosted by blogger?
Thanks!
Sarah
June 11, 2006 at 3:57 am
Not at the moment.
This site runs on WordPress – another (more mature) blogging platform.
There are plenty of work arounds though and 3rd party products that you can use with Blogger though.
Check out http://www.labelr.com/
June 11, 2006 at 4:04 am
Bashment:
I have checked out your site and it appears that you are not using one of the standard Blogger templates. This is ok, but it also appears that you may have copied/pasted the code for your sidebar in from an old template?
This means that the template code sees it as totally separate and non-integrated into the sidebar.
The sidebar in this template is broken down into CSS modules. Once module for the profile, one for the previous posts etc.
If you want to add more things to the sidebar, you are best to reload the template from scratch and then manually add each sidebar item just before the following line near the bottom:
Hope this helps.
June 11, 2006 at 4:25 pm
Thanx! I’ll try that!
August 1, 2006 at 2:39 pm
I’ve worked my through the Blogger Template Overhaul series up through Part 6 of 8 – Comments. But I can’t find Parts 7 and 8. Have they been published yet? I was finally able to get a photo banner on my blog thanks to your blogger series and am looking forward to seeing parts 7 and 8. Thanks.
Ernie
August 1, 2006 at 5:26 pm
Mental note…. finish the series.
Appologies for the lack of posts.
I will get on it straight away!
August 2, 2006 at 8:46 am
Great! The willingness of people like you to help others is something special. Thanks. Many of us have no other resources for learning these types of things. Thanks again, you are appreciated.
(Ms.) Ernie
August 13, 2006 at 7:51 am
testcomment
September 8, 2006 at 2:33 pm
Curious – are you going to be doing a similar series on the new version of Blogger once it comes out of beta?
September 15, 2006 at 12:26 pm
sorry to be asking a question that’s probably been many times answered, but could you please tell me how to make the comments appear under the posts instead of above, as they appear in the original K2 template?
many thanks!
h.a.
September 24, 2007 at 10:35 pm
Hello.. i try.. but i want put date, time and who make the comment and it didnt work.. any clue?
December 29, 2008 at 2:51 pm
hello it is test. WinRAR provides the full RAR and ZIP file support, can decompress CAB, GZIP, ACE and other archive formats.
ukhlflktszvohgjptdkacbnlbqbqejlxgnehello
June 19, 2010 at 9:33 pm
Some human cultures, such as the various people of the Arctic Circle, make their clothing entirely of prepared and decorated furs and skins. Other cultures have supplemented or replaced leather and skins with cloth: woven, knitted, or twined from various animal and vegetable fibers.