These days I was searching for problems of bloggers to solve when I noticed that none of Blogger blogs have the comment avatar images on the right side. Only Wordpress blogs have this feature to set the position of the avatar images. I`ve spent two days finding a solution when I decided to customize the entire comments area. I think my comments area is now pretty cool, but it`s difficult to install it. Please read with attention, follow the steps bellow carefully and BACK UP your template!

Here is an image about my comments area, later in this tutorial I will show you how to customize it:

Installing this comment area form
This is pretty difficult, read with attention!

1. Go to your Dashboard, Layout , Edit HTML and check in the Expand Widget Templates checkbox.

2. Find the following code (Ctrl + F and type in comments-block):

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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>
<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>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

3. Replace the above code with the following one:

<div id='comments-block3'> <b:loop values='data:post.comments' var='comment'> <div id='comment-header'> <div expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'> <div id='comment-profile-image'> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> </div> <div id='comment-name-url'> <a expr:name='data:comment.anchorName'/> <b:if cond='data:comment.authorUrl'> <a class='comments-autor-name' expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <a class='comments-autor-name'> <data:comment.author/></a> </b:if><a class='says'>says:</a> </div> <div id='comment-date'> <span class='comment-timestamp'> <a class='comment-permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span> </div> <div id='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p class='comment-body'> <data:comment.body/></p> </b:if> </div> </div> </div> </b:loop> <div align='right' class='js-id-json14358458433' id='comments-form-script-js14876248' style='margin:0 10px 0 0; height:10px;'><a href='http://seo-tips-blogger.blogspot.com' rel='dofollow' style='font-family: Arial, Tahoma, Verdana; font-size:10px; color:#484848; text-decoration:none;'>BY SEO TIPS BLOGGER</a><!--comments-form json14358458433 - don`t edit!--></div> </div>

4. Find the following codes and remove them:

Your code may be a little different , search for the starting tags

#comments-block {

margin:1em 0 1.5em;

line-height:1.6em;

}

#comments-block .comment-author {

margin:.5em 0;

}

#comments-block .comment-body {

margin:.25em 0 0;

}

#comments-block .comment-footer {

margin:-.25em 0 2em;

line-height: 1.4em;

text-transform:uppercase;

letter-spacing:.1em;

}

#comments-block .comment-body p {

margin:0 0 .75em;

}

Customizing the comments area

Find the ]]></b:skin> line and place the following code BEFORE it!

#comments-block3 {

padding:0;

margin:0;

float:left;

overflow:hidden;

}

#comments {

padding:0;

margin:0;

}

#comment-name-url {

width:465px;

float:left;

}

#comment-date {

width:465px;

float:left;

}

#comment-header {

float:left;

border:1px dotted rgb(187, 187, 187);

padding:5px 0 5px 10px;

margin:5px;

background: rgb(238, 238, 238);

}

.avatar-image-container {

background:url(http://i645.photobucket.com/albums/uu178/coolboycsaba/no-avatar4.jpg);

width:48px;

height:48px;

float:right;

margin:5px 10px 5px 5px;

}

.avatar-image-container img {

border: 1px solid white;

width:48px;

height:48px;

}

a.comments-autor-name {

color:#088A08;

font-weight:bold;

font-size: 12px;

font-style: normal;

font-family: Arial, Tahoma, Verdana;

}

a.says {

color:black;

font-weight:bold;

font-size: 12px;

font-style: normal;

font-family: Arial, Tahoma, Verdana;

}

.says a:hover {

text-decoration: none;

}

a.comment-permalink {

color:#088A08;

font-weight:normal;

font-size: 10px;

font-style: normal;

font-family: Arial, Tahoma, Verdana;

}

1. Change the size of the avatar image

Customize the size of the comments to fit to your template:

First change the size of the avatar images:

.avatar-image-container {

background:url(http://i645.photobucket.com/albums/uu178/coolboycsaba/no-avatar4.jpg);

width:48px;

height:48px;

float:right;

margin:5px 10px 5px 5px;

}

.avatar-image-container img {

border: 1px solid white;

width:48px;

height:48px;

}

To change the size of the avatar images replace the red marked values to any number of pixels. Use the same at all red marked code lines.

Now change the size of the comments area:

#comment-name-url {

width:465px;

float:left;

}

#comment-date {

width:465px;

float:left;

}

The size of the comments area is depending on the size of the main-wrapper and on the size of the avatar image: e.g:

(main-wrapper)550px - (avatar image)48px - (paddings , margins and borders)37px = 465px

The padding and margins size is in bold because it`s always 37px, calculate the size of your comments area size and use the result as the value of the red marked code lines.

2. Change the colors
To change the background color of the comments change the red code line , to change the color of the border change the blue code line to any color.

#comment-header {
float:left;
border:1px dotted rgb(187, 187, 187);
padding:5px 0 5px 10px;
margin:5px;
background: rgb(238, 238, 238);
}

e.g:

#comment-header {
float:left;
border:1px dotted red;
padding:5px 0 5px 10px;
margin:5px;
background:#FF00FF;

To change the color of the comment author name change the red marked code line , to change the color of the comment posted date change the blue marked code line, to change the color of the says word change the green marked code line.

a.comments-autor-name {

color:#088A08;

font-weight:bold;

font-size: 12px;

font-style: normal;

font-family: Arial, Tahoma, Verdana;

}

a.says {

color:black;

font-weight:bold;

font-size: 12px;

font-style: normal;

font-family: Arial, Tahoma, Verdana;

}

a.comment-permalink {

color:#088A08;

font-weight:normal;

font-size: 10px;

font-style: normal;

font-family: Arial, Tahoma, Verdana;

}

3. Change the border types

Here are the border types to chose from, every comment have a border.

#comment-header {

float:left;

border:1px dotted rgb(187, 187, 187);

padding:5px 0 5px 10px;

margin:5px;

background: rgb(238, 238, 238);

}

Dotted

-this is the default , don`t change the red marked code

Dashed

-to use this type of borders change the value of the red marked word to dashed

Solid

-change the red marked word to solid

4. Change the No-Avatar image:

.avatar-image-container {

background:url(http://i645.photobucket.com/albums/uu178/coolboycsaba/no-avatar4.jpg);

width:48px;

height:48px;

float:right;

margin:5px 10px 5px 5px;

}

Change the URL (marked with red) with the URL of your image, please change it or download the image and upload it to your own host or photobucket , don`t steal my bandwidth!

Save your template!
Well done! If you have followed all the above steps carefully your comments area is pretty cool and it`s ready to use!
NOTE: Please don`t remove that small link at the end! Thanks my reading our blog!

Related tutorials:

Read more...

Most of your blog readers are only reading your blog without commenting. The problem is that just a very little amount of readers are contributing. With good techniques you can increase the amount of contributing members. Encourage your visitors to leave comments on your blog:

1. Make commenting easy - Your visitors may want to leave comments but if they don`t know how to or just they are too lazy to comment if it`s to hard. Allow anonymous comments, place the comment form bellow posts, and remove the word verification.

• To place the comment form bellow posts go to Settings , Comments and select the Embedded bellow posts option at Comment Form Placement.
• Select the Anyone option at Wo Can Comment? to allow anonymous comments.
• Select No at Show Word Verification for Comments? to remove the word verification.

2. Make your blog DoFollow - Your visitors will leave comments to build backlinks for they own blog. If your blog is Dofollow every comment is a backlink for the reader who posted the comment, but be carefull cause some unwanted visitors will try to SPAM your blog with bad quality comments to create backlinks.

3. Ask them - Ask your visitors to comment, ask them to share they opinion and suggestions. Place questions on your posts and talk with your visitors , be active and they willl follow you.

4. Respond to comments - Respond to comments , talk with your visitors to create a community. Try to respond fast as it`s possible to all the questions they ask. If they ask something you don`t know say what you think about it and ask them to share they view.

5. Comment on other blogs - Demonstrate to your visitors that your are active on other blogs. By commenting on other blogs you will get more backlinks and maybe the owners of the other blogs will leave comments on your blog.

Thanks for reading my posts and please contribute to our community by posting a comment !

Related tutorials:

Read more...

Back up your blog before any to make any changings in the code of your template or when before you want to edit your posts. Back up your blog regulary to avoid data losing.

1. How to back up your blog:

Go to your blogger dashboard and click on Setting , click on the Export blog link.

Click on the DOWNLOAD BLOG button and save the XML file. With this your template , your posts and comments will be saved.

2. How to back up your template:

Go to your blogger dashboard , click on Layout , Edit HTML. There is a link: Download Full Template , click on it and save your template XML file. Every time when you want to change something in your template first download the XML file and if something goes wrong just uplod your template by clicking on the Browse... , select the XML file and click on the Upload button.

The second way to back up your template is to copy and paste your template code in any text editor like Notepad and save it in a .txt file. If something goes wrong when you work on your template just replace the entire code with the code saved in the .txt file.

3. How to back up your posts

You can back up your posts easily by using the BlogSend feature. To use it go to Settings , Email&Mobile , your posts will be sended to a given email adress so if you accidentaly delete one you can back up it from your email adress. Type your email adress in the BlogSend Adress textfield and click on the SAVE SETTINGS button.

Related tutorials:

Read more...