Showing posts with label Blogger Templates. Show all posts
Showing posts with label Blogger Templates. Show all posts

Add Missing Embedded Comments Form to Blogger

Today I will show you how to fix your Blogger template if the embedded comments feature is missing or not working. I decided to write this article because I have noticed that the embed a comment below the post feature is often not working in many Blogger custom templates available for download. This is usually because many of these templates were released prior to Blogger enabling embedded comments.

If you have downloaded a custom template that has embed a comment missing then read on as I will show you how to insert the code for embed a comment form into your template. Inserting code into a blog template can be challenging for some but if you follow these instructions it is not beyond even virtual beginners.

1. Login to Blogger if you are not already logged in

2. Navigate to Settings > Comments. Under Comment Form Placementmake sure the Embedded below Post radio button is set. Save any changes you make.

In Blogger Settings Comments Set Comments to Embedded

3. Navigate to Layout > Edit HTML

4. I strongly recommend you back up your template by downloading it to your computer before proceeding

4. Check Expand Widget Templates

5. Use CTRL + F to bring up the Blogger Toolbar

6. Look for the following code block by entering <span class='paging-control-container'> into the find box on the toolbar. Note if you don't have this code look at the alternative option below #7 in this post
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>

<data:post.commentRangeText/>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>


7. Paste the following code into your template immediately after the code block above and before this line of code <div id='backlinks-container'>
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

Enter the Embed Comments Form into Blogger Template
Alternative Option
If you don't have the code as mentioned in #6 you will likely have the following:
<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </p>
</b:if>

In which case replace with this code:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

8. Click on the Save Template button to save your template changes

9. Click on the View Blog link and test your embed comment feature by clicking on the number of comments link found at the bottom of each post. Notice that the post will now be displayed along with the embed a comment form below the post



Troubleshooting
As there are many variations amongst templates neither of these options may work in which case try this solution from Blogger Buster:
Find: <b:include data='post' name='comments' />

Immediately below this line add the following line:
<b:include data='post' name='comment-form'/>


In this tutorial I have shown you how to add the embed comments form into your custom Blogger template if it is missing so that visitors can comment easily.
Read More

How to Add a Subtitle to Blogger Posts

This Blogger tutorial shows you how to easily and quickly add a subtitle to your Blogger posts (Blogspot posts) so that both search engines and readers will have more information about your post. I also discuss the benefits of adding subtitles to Blogger articles. This is an easy tweak to your Blogger blog that anyone can carry out in a couple of minutes.

blogger Blog with Subtitle Under Post for Emphasis and Search Engine Friendliness

Benefits of Using Subtitles in Posts
Adding a subtitle which appears below the title of your post can be both eye catching and informative. For instance a titling schema for this post could be:
Title: Add a Subtitle to a Blogger Blog

Subtitle: Make Your Posts More Search Engine Friendly and User Friendly

If you craft your titles and subtitles carefully you will encourage more targeted readers of your blog as they will be able to see at a glance what your post is about rather than reading the whole article. Your traffic therefore might be slightly less but they will be far more targeted to the content of your site resulting in a lower bounce rate. 

If the subtitle you choose for your Blogger post is keyword rich then you are also improving your chances of gaining a higher position in search engine result pages because search engines give added weight to headings and to text early on in an article. By adding a subtitle to a Blogger post you have a SEO tool which if used effectively could result in more visitors finding your site because of higher keyword density. 

You can of course add a subtitle manually to each post and format it everytime. The advantage of this method over doing it manually though is that all the formatting is in the stylesheet section of your template so you only have to change the colour scheme and font variables in one location and Blogger will look after the rest. Any change will be reflected in each and every post that has the subtitle <div> tags. 


How to Add a Subtitle to Blogger Posts 
This tutorial guides you through the steps to take to add a subtitle to your Blogger blog. The trick requires only takes a few short minutes and requires only a small snippet of code to be added to your template. Provided the instructions are followed anyone can do this including beginners and new bloggers. Interestingly it is not widely known or written about in technical blogs that a subtitle can be added to your Blogger Blogspot blog posts yet the advantages are considerable. 

1. Log in to Blogger and navigate to Design > Edit HTML

2. Find the </b:skin> tag in your template. If you are have difficulty finding it use CTRL + F to bring up the Blogger toolbar at the bottom of your blog and enter the tag </b:skin> into the search box on the toolbar

3. Copy and paste the code below into your template making sure that itappears before the </b:skin> closing tag

.subtitle{
font-family:Trebuchet MS',Verdana,Arial,Sans-serif;
font-size:15px;
color: #ca1717;
line-height:20px;
}

Add a Subtitle to a Blogger post - edit template and customise if desired

Update November 14, 2010. This code inserts a subtitle in red. You will need to change this color to match your template. See later in this post for information on how to add styling or change the color of the subtitle. If you wish to use a known variable as shown in the above image you can. color: $dateheadercolor; could be used for example provided this variable had already been declared in the variables section of the template.

4. Save Template

5. Go to the post you wish to add a subtitle to by clicking on the Posting tab and then the Edit Posts link.

6. Copy and paste the following code into your post ahead of any other text.

<div class="subtitle">Subtitle Text. Please Substitute for your own text</div>

Add a Subtitle to a Blogger Post

7. Substitute your own text between the <div> tags

8. Navigate to Settings > Formatting and under the last option Post Template enter the following into the box:

<div class="subtitle"></div>

This will mean that every time you create a post you will have the tags appear automatically. All you need do is place the text of your subtitle between the tags. If you don't want to use a subtitle for a particular post just delete the tags.

9. Save Changes to Post and click on View Blog to admire your new subtitle.

blogger Blog with Subtitle Under Post for Emphasis and Search Engine Friendliness

Customizing the CSS Styling of a Blogger Subtitle
It is easy to customize your subtitle for a different font type, color and size. Just change the code you added before the </b:skin> tag. If you want a specific color for instance you could change the color I have chosen for another color, increase the font size, and change the font face to Times Roman for instance. Thus your code would become something like this:


.subtitle{

font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
color:#ff6600;
line-height:20px;


This Blogger tutorial has shown you how to add a subtitle to your Blogger posts (Blogspot posts) quickly and easily. I have discussed the benefits of inserting a subtitle feature on a Blogger blog including how this might assist search engines to correctly index your blog articles. I have also shown you how to customize your subtitle to your own individual requirements using CSS styling
Read More

Show Date Above Blogger Post Title

Sometimes you may download a Blogger Blogspot template which does not display the date header above the post title. I recently struck a free Blogger template like this and it took some time to find the right part of the template to fix the date. Plus the answer was not as far as I could tell listed in Blogger help. So to help anyone desperately struggling to find the solution to this problem I have decided to share this information in this article.


To Display the Date Header Above Post Title

1. Log in to Blogger

2. Go to Layout > Edit HTML

3. Back up your template before attempting any changes

4. Type the following into the search box (CTRL + F) to find the block of code beginning with this line:
<data:adStart/>

5. Paste the following lines of code 

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

into the code block as shown here:

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
<b:if cond='data:post.trackLatency'>
<data:post.latencyJs/>
</b:if>
</b:loop>
<data:adEnd/>
</div>

7. Click the Save Template button

8. View Blog to see the date above the header


Today's Blogger Blogspot tip has shown you how to add the date above the post title on a Blogger Blogspot blog. The date above the post is often missing among slightly older Blogger templates but thankfully the fix is fairly easy.
Read More

Add 3 Column or 4 Column Footer to Blogger

In this Blogspot tutorial you will learn how to convert your existing Blogger footer (Blogspot footer) into a 3 column footer or a 4 column footer. With more columns in your Blogger footer you will be have the extra room to accommodate more widgets such as Flickr photos and Twitter updates. Also you will be able to put less frequently used widgets such as recents comments, archives, followers, About Me etc at the bottom of your template so that only the most important widgets are loaded first.

This tweak involves adding code to the footer section of your existing Blogger template to change it to 3 columns or 4 columns. The tutorial is not beyond the capabilities of Blogger newbies and webmasters with intermediate skills but care needs to be taken when modifying your Blogger template so back up before you start. For best results a Blogger template with a width of around 900px is best.

Convert your Blogger footer to a 3 column footer

How to Add a 3 Column Footer to Blogger
  1. Log in to Blogger if not already logged in
  2. Navigate to Layout > Page Elements
  3. Move any existing widgets out of the footer section and place them in the sidebar temporarily and save changes
  4. Navigate to Layout > Edit HTML
  5. Back up your template as a precaution by downloading it to your computer
  6. Find the following section in your Blogger template
    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>

    If you are having difficulty finding this section trying searching for footer-wrap or something similar as sometimes this section is called something else in some templates.
  7. To Add a 3 Column Footer to Blogger
    Replace all the code located in Step 6 with the following
    <div id='footer-columns'>
    <div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    </div>

    To Add a 3 Column Footer to Blogger with a Lower Footer Section
    Replace all the code located in Step 6 with the following
    <div id='footer-columns'>
    <div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    <p/>
    <div id='footer-bottom' style='text-align: center; padding: 10px;'>
    <b:section class='footer' id='col-bottom' preferred='yes'>
    </b:section>
    </div>
    <div style='clear:both;'/>
    </div>

    Add 3 column footer to Blogger with a lower section
    To Add a 4 Column Footer to Blogger 
    Replace all the code located in Step 6 with the following
    <div id='footer-columns'>
    <div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer2' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    </div>

    Convert Blogger Footer to a 4 Column Footer
  8. Save changes to your Blogger template.
  9. Navigate to Layout > Page Elements. You will now see a 3 column footer, 3 column footer with a lower section or a 4 column footer depending on what option you chose.
  10. Move the desired gadgets to the new Blogger footer columns. Create new widgets to fill up the footer columns if necessary. Save your changes.
  11. Click View Blog to admire your new footer section

Tips and Troubleshooting

  1. To Add Padding Between Footer Columns in Blogger
    To create some padding between the columns add the following code to the style section of your Blogger template - before </b:skin> tag.

    #footer-columns {
    clear:both;
    }

    .footer-column {
    padding: 10px;
    }
  2. To Add a Border to the 3 or 4 Column Blogger Footer
    • For Top Border Only of the 3 or 4 Column Footer
      Paste the following code before the </b:skin> tag

      #footer-columns{
      border-top:1px dotted $bordercolor;
      clear:both;
      margin:0 auto;
      }

      Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example


      #footer-columns{
      border-top:1px dotted #113355;
      clear:both;
      margin:0 auto;
      }
    • For a Box Border Around the 3 or 4 Column Footer

      #footer-columns{
      border:1px dotted $bordercolor;
      clear:both;
      margin:0 auto;
      }

      Replace $bordercolor with a hex color if default color is not displayed. Change this color to suit your template. For example

      #footer-columns{
      border-top:1px dotted #113355;
      clear:both;
      margin:0 auto;


In today's Blogger tutorial you have learned how to add a 3 column footer or a 4 column footer to your Blogger template (Blogspot template). You have also learned how to add some styling such as a border above the footer and around the footer. As always I am available to answer questions if you need assistance. Good luck! 
Read More

Blogger Post Image Borders Change or Remove

Sometimes you may want to remove, delete or change the image border of a custom Blogger template or default Blogger template (Blogspot template). In this Blogger tutorial you will learn how easy it is to make changes to your template so that you can get rid of unwanted image borders around all the images that appear in your blog posts or around a single image in a blog post.

You will also learn how to enhance your Blogger template (Blogspot template) by changing the line color and line style of the existing image borders.
Note this Blogger tutorial applies to custom templates and the previous generation of Blogger templates. If you are using the new default Blogger Template Simple please refer to my Blogger tutorial How to Remove the Image Border in Blogger template Simple for instructions

This Blogspot tutorial is rated easy. It involves making minor alterations to your Blogger template (Blogspot template) but this is well within the capabilities of beginner bloggers and newbies. The changes will take less than 5 minutes to complete and can make the world of difference to your Blogger template.

Blogger image with borderBlogger image without border

How to Delete, Remove, Get Rid of the Image Border in Blogger Posts
The following instructions will remove the little border around the images in your Blogger posts.

  1. Login into Blogger if not already logged in
  2. From the Dashboard navigate to your blog. Go to Design > Edit HTML by clicking on the Design tab and then choosing the Edit HTML link
  3. Back up your existing Blogger template by clicking on theDownload Full Template button
  4. Find the following code in your Blogger template (no need to check the Expand Widgets Template box as we are only working with the CSS Style Sheet). Note: the code in Blogger templates varies but this is the code you will find on a Blogger Minima template and most other default Blogger templates.

    .post img {
    padding:4px;
    border:1px solid $bordercolor;
    }

    If you do not have this code look for the following:
    img{
    padding: 4px;
    border:1px solid $bordercolor;
    }

  5. There are two ways to get rid of the unwanted border image code. You can either:
    • Remove the following line:
      border:1px solid $bordercolor;
      or
    • Change it to the following
      border:0px;

  6. Click on the Save Template button
  7. Click View Blog to admire your post images minus any image border.

How to Change the Color of the Image Border Around Posts in a Blogger Template 
The following instructions will show you how to change the color of the border which appears around images in your Blogger posts

  1. Follow Steps 1 to 4 as per removing the image border from Blogger posts.
  2. There are several methods to change the color of the image border but the easiest is to
    • Change the following line: 
      border:1px solid $bordercolor;

      to
      border:1px solid #6698FF;

      The above change will make the border line color sky blue. To change the color (in red) to your own color choice replace with the hex color code for your chosen color

  3. Click the Save Template button to save your changes
  4. Click on View Blog to admire the new color around the images in your Blogger posts

Tips and Troubleshooting

  • To change the image border line style from a solid line to a dotted line change the word solid to dotted eg
    border:1px dotted $bordercolor;

  • To change the image border line style from a solid line to a dashed line change the word solid to dashed eg
    border:1px dashed $bordercolor;

  • To increase the width of the image border change the size from 1px to 2px or 3px eg
    border:3px solid $bordercolor;

  • To Remove The Image Border Around Only One Image paste the following into your image code in your Blogger post:
    style="border:none"
    eg
    <img style="cursor:pointer; cursor:hand;width: 126px; height: 22px;" src="http://3.bp.blogspot.com/_vLeiVavkV_M/SrRp2wb1I_I/AAAAAAAAAAA/XXXXXXXXX/s200/download-now.png" border="0"style="border:none"alt=""id="BLOGGER_PHOTO_ID_XXXXXXXXXXXX" />

In this Blogger tutorial you have learned how to remove, delete and get rid of the line border which appears around images in your Blogger posts (Blogspot posts). You have also learned how to change the line color of the border image to your own chosen hex color. In addition I have shown you how to change the line style from solid to dotted or dashed and to remove the border around a single image. As always any problems with making these changes please let me know. Good luck!
Read More

Add CSS Styling to Blockquotes in a Blogger Template

Today I continue the series of Blogger tutorials (Blogspot tutorials) by showing you how to apply CSS styling to blockquotes in a Blogger template. Other articles I have already published on the subject of CSS styling include:

How to Add, Delete or Remove Blogger Image Borders
How to Align and Justify Posts in Blogger
How to Add a Divider Between Blogger Posts
How to Add or Change a Background Image in a Blogger Template.

Today's tutorial on Blogger blockquotes will be useful if you are using a default Blogger template or a third party custom template. It will show you how to change your blockquote area in the following ways:
  • Add a background color to the blockquote
  • Add a border around the background of the blockquote
  • Add or change the color of the blockquote text
  • Add or change padding around the text
  • Add or change the margin
  • Add a background image

Blogger beginners you can relax as I have written this Blogger tutorial with you in mind. I will walk you through the steps of styling the blockquote section and you will see that it is not as daunting as it first appears. This Blogger tutorial assumes no knowledge of CSS styling. I have rated the difficulty level as easy to medium because it does involve making adjustments to your Blogger template.

How to Change the Blockquote Section of a Blogger Template

First of all let's take a look at the CSS Styling for the blockquote section of a default Minima Blogger template. 

.post-body blockquote {
line-height:1.3em;
}

.post blockquote {
margin:1em 20px;
}

.post blockquote p {
margin:.75em 0;
}

As you can see the blockquotes area of this Minima template has minimal styling. Apart from line height and margin indentation there has been no additional code added to improve the look of the template. 

Minima Blockquotes No Extra CSS Styling
Let's go ahead and give the blockquotes in your Blogger posts some styling. I will use the Minima template to show you but you can do the same for another default template or custom template. As always back up your Blogger template by downloading it to your computer before you begin to make any changes.

  1. CSS Styling to Add a Background Color to Blockquotes
    Adding a background color to the blockquote area can be achieved in 1 of 2 ways.
    1. One way is to enter the hex color directly into the styling as I have done below. This code will add a light grey background to the blockquote area.
      .post-body blockquote {
      line-height:1.3em;
      background-color: #cccccc;
      }

    2. Another way to add a background color using CSS styling for the blockquote area is to make use of the variable names already set up. The border color is light grey #cccccc by default in a Minima template. The advantage of this option is that if you decide to change the border color under Layout > Fonts and Colors the blockquote color will automatically change to the new color too.
      .post-body blockquote {
      line-height:1.3em;
      background-color: $bordercolor;
      }

      If you wanted the background color to be the same as the blog title color rather than the border color you would write this instead
      .post-body blockquote {
      line-height:1.3em;
      background-color: $titlecolor;
      }

  2. CSS Styling to Add a Border Around Blockquotes
    You have your background in place now let's add a narrow border around the background to add some more definition. The following will add a 1px solid border around the outside of your blockquote area in your Blogger posts.
    .post-body blockquote {
    line-height:1.3em;
    background-color: #cccccc;
    border: 1px solid #cc6600;
    }

    or if using variables
    .post-body blockquote {
    line-height:1.3em;
    background-color: $bordercolor;
    border: 1px solid $titlecolor;
    }

    Blockquotes With a Background and Background Border
  3. CSS Styling to Add Padding Around Blockquotes
    Now if we were to leave the styling at this point one of the problems would be that the text would butt up against the background which is not a good look. To create some space between the text and the background edge all the way around we use CSS styling to add some padding like this:
    .post-body blockquote {
    line-height:1.3em;
    background-color: #cccccc;
    border: 1px solid #cc6600;
    padding: 20 px;
    }

    or if using variables
    .post-body blockquote {
    line-height:1.3em;
    background-color: $bordercolor;
    border: 1px solid $titlecolor;
    padding: 20 px;
    }

    Blockquotes With a Background, Background Border and Padding
  4. CSS Styling to Add or Change the Text Color of Blockquotes
    If you want to accent your blockquote area in your posts one effective way to do this is to make the blockquote text color a different color from the text color of your pages. We do this by picking a color and adding the following line to the code:
    .post-body blockquote {
    line-height:1.3em;
    background-color: #cccccc;
    border: 1px solid #cc6600;
    padding: 20 px;
    color: #cc6600
    }

    or if using variables
    .post-body blockquote {
    line-height:1.3em;
    background-color: $bordercolor;
    border: 1px solid $titlecolor;
    padding: 20 px;
    color: $titlecolor;
    }

    Blockquotes With a Background, Background Border, Padding and Change of Text Color

Tips and Troubleshooting
If you want to add further modifications to the blockquotes area of your Blogger template here are several other possibilities.

  1. CSS Styling To Change the Margin of Blockquotes
    You can increase the margin from 1em to 1.5em by changing the margin line to
    margin: 1.5em 20px;

  2. CSS Styling to Add a Background Image to Blockquotes
    You can have your own image as a background in your blockquotes area of your posts by adding this line:
    background: url(http://URL of your image.jpg);

In today's Blogger tutorial (Blogspot tutorial) you have learned how to add CSS styling to the blockquotes area of your Blogger posts. I have shown you how to add a background, a background border, change the text color, add padding, change the margin and add a background image to the blockquotes code block. If you have a moment please let me know how you got on customizing your own Blogger template. Any questions please ask.
Read More

Add Profile Images to Blogger Comments

Today I will show you how easy it is to have Blogger (Blogspot) display profile images in the embedded comments section of your blog even if you are using a custom template.

About a month ago Blogger announced that it was enabling profile images (profile avatars) in the embedded comments section on Blogger (Blogspot) as part of its 10th birthday feature series. The new profile image feature which has been available on other commenting options has now been extended to the embedded comments option. This is good news if you are using a default template as you will now see a small avatar next to your visitors comments and your own avatar if you have uploaded a profile image.



Default Blogger Templates - Enabling Profile Images 
Profile images work on default Blogger templates and have been automatically enabled by Blogger. If you are using a default Blogger template with embedded comments enabled and have recent comments on a post you will see a profile image to the left of visitor comments (provided they have uploaded one that is). Your profile avatar will also display when you respond to visitor comments again provided you have uploaded one. (To upload your profile photo click on Add Photo at the Dashboard). If profile images are not displayed enable them by going toSettings > Comments and checking the Yes radio button at the bottom of the page which says Profile Images Enabled.

Custom Blogger Templates - Enabling Profile Images 
If you are using a custom template you may still be able to see profile images in your embedded comments section. Check out Settings > Comments to make sure Profile Images are enabled. If you can't see profile images you can still add this feature by tweaking your Blogger template. Follow the instructions below to have Blogger display profile images in the embedded comments section of your custom Blogger template.

Add Profile Images to Comments Section of a Custom Blogger Template
If you are using a custom Blogger template you can use the following method to add profile images to the embedded comments section of your Blogger template.
  1. Login to Blogger if not already logged in
  2. Go to Design > Edit HTML
  3. Back up your Blogger template as a precaution by downloading the full template to your computer
  4. Expand Widget Templates by checking the box on the right hand side
  5. Find the following line in your Blogger template by using CTRL + F:
    <dl id='comments-block'>

  6. Change the above line to the following:
    <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

  7. Scroll down a few lines and find the following line in your Blogger template:
    <a expr:name='data:comment.anchorName'/>

  8. Directly before the above line paste the following code block:
    <b:if cond='data:comment.favicon'>
    <img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
    </b:if>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:blog.enabledCommentProfileImages'>
    <data:comment.authorAvatarImage/>
    </b:if>

  9. Click Save Template
  10. Click View Blog and navigate to a page with commenting to see avatars next to comments in the embedded comments area


Tips and Troubleshooting

  • If you have added the author commenting highlight hack to your Blogger template there will be 2 instances of the code at Step 7 to change
  • If your template does not have the code mentioned in Step 5 and Step 6 check that dl has not be replaced by div. In this case leave the div as is and replace the rest of the code in the line.
  • Blogger has only enabled profile images for Blogger and Google profiles so if your visitors comment using identities such as "Anonymous" or "Name/URL" their image profile will not be displayed. If OpenID, AIM or other identities are used these favicons will be displayed instead.
  • Profile avatars load last so they will not prevent visitors viewing your content if you have a lot of comments on some pages


In today's Blogger tutorial (Blogspot tutorial) you have learned how to enable profile images in the embedded comments section in Blogger. If you are using a default Blogger template this can be achieved by enabling profile avatars in your Blogger template. If you are using a third party custom template I have shown you a Blogger hack that will display profile images next to comments on your blog. As always I am interested in how you get on with this tweak. Good luck!
Read More
Designed ByBlogger Templates