Well, because i have no more words to say then let's just step forward and get on the point. - To show your blogger profile picture on comment section you can follow the instruction below, which is much easy to make, piece a cake. I've made it some times ago.
1. Login to your blogger.
2. Go to the setting field on comment and make sure that the "Show Blogger Profile Picture On Comment" has been set to enabled.
3. Save your change and check whether it is working or not by posting a comment on your blog post. If it is working, which means that your profile picture is loaded in the comment, then you are done. But if it is not, then you have to step a bit further, together with the other in order to show it.
4. Well, go back to your blogger home page again and then go to your design page. Later, go to Html page to edit your template.
5. This is important, tick on Expand Widget Template box to load the whole codes in your template.
6. Copy and save the entire codes in text box for inticipation of making mistakes when you're editing the codes. Or simply download the template by clicking the Download Full Template thread.
7. You should find the following code in your template: ]]> < /b:skin>. Copy and paste the code below above that code:
To be the lesser arrangement the above code looks like the below:
#comments-block .avatar-image-container img {
background: #fff url('http://www.example.com/image/background-comment.png') no repeat top left;
width: 35px;
height: 35px;
}
Just change the line in red with any image url that you want to be loaded when someone posts a comment on your blog. Or in another term, it is a picture for others, not you.
8. Next, find the following code: < dl id='comments-block'>.
9. Replace it with the code below.
10. Last step, find the following code: < a expr:name='data:comment.anchorName'/>
11. Replace the above code with the code in box below:
The above code looks like the below:
< b:if cond='data:comment.favicon'>
< img expr:src='data:comment.favicon'/>
< /b:if>
< a expr : name='data:comment.anchorName'/>
< b:if cond='data:blog.enabledCommentProfileImages'>
< div expr:class='data:comment.avatarContainerClass'> < data:comment.authorAvatarImage/>
< /div>
< /b:if>
12. Save your template and you're done. Just post a comment to make sure that the code is working.
See you next time everybody.
0 comments:
Post a Comment