Why you should make your blog comments "dofollow"

Comments are the heart of the blog.Without comments inside a post,the user will think negative about your post and blog.I bet you,Making your comment dofollow will definetely increase the comments and trafic in your blog.Many blogger are insearch of dofollow blog to leave their backlink in comments.They will also try to comment atleast in all post.So,This will also help in blog traffic.Lets see the detail information about dofollow comments in blogger.

In Blogger / Blogspot, a default setting called “no-follow” defines that links inside comments and backlinks are not to be followed by incoming search engine crawler bots, thus reducing the commenters’ and backlinkers' chance in getting any increase in their page ranks from the links they left. It prevents commenting and backlinking atmosphere in blogs from being as conducive as it should. That is why removing no-follow in blog comments and backlinks is a good advice; it applies to Blogger / Blogspot as well.

The counterpart of no-follow, do-follow, will provide a positive stimulus for your visitors to engage better in comments and backlinks section. It will also generate mutual value for blog owners and commenter, by giving feedback to the host and followed links to the visitors. In overall, it will be helpful in developing a healthy atmosphere around a blog. Battle spam, not blogs.
 

How to Make comments "dofollow"

To remove the no-follow in Blogger / Blogspot comments, a tag that is located inside the template codes need to be adjusted a little bit. To find it, access “edit HTML” from “layout” section of your dashboard first. Please note that you need to check “expand widget template” since the codes we are looking for are located inside one of the widgets. Then find this tag, which is responsible in authorize the crawler bots whether to follow the links or not.

<a href='data:comment.authorUrl' rel=’nofollow’><data:comment.author/></a>

For faster result, you can use your browser searching tool and find the word “nofollow”. You will find that there are two word “nofollow” in the codes, the first one are located inside comments-block codes, and the second are located inside backlinks codes. We are talking about removing the first one, which is related to comments section.

Then, to adjust the codes not to enable “nofollow”, please simply delete these bold codes:

<a href='data:comment.authorUrl' rel=’nofollow’><data:comment.author/></a>

Therefore, the result will look something like this:

<a href='data:comment.authorUrl’><data:comment.author/></a>

Please save the template then, and now your blog will be officially do-follow. Do not forget to inform it to your readers, or otherwise they will not know it and your effort will be meaningless.

DoFollow on Backlinks

For backlinks, the default settings of blogger also applies the same “no-follow” rule, and you can disable it using the same method if you wish. However, unlike comments, you have no control nor can moderate any of them. They are generated automatically based on pings and trackbacks. I personally prefer disabling backlinks from the dashboard settings, since their appearance makes my blog looks messy.

This tag needs to be adjusted in order to disable no-follow in backlinks. Just delete the bold codes, my friend.

<a href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>

To re-enable the "no-follow" in comments or backlinks, just put the deleted codes back in their original position.

Note

Making comment dofollow may decrease your pagerank and risk of attacked by spammers. Do not Forget to comment in this dofollow blog!

Read More

How to Replace "Post A Comment" Text with image in Blogger

You can see "Post A Comment" text above your comment form in blogger? but it simple but i think not elegant. Right? So now in this post i will show you how to replace the 'Post A Comment' text we see above the comment form with a cool image. This is a very simple hack you don't need to add any JavaScript or any other codes just replace a piece of code with your own image or text. Here I am giving few image which you can use or you can add your own images.

So if you want to change the "Post A Comment" text into a cool image, just follow the steps below.

Steps To Replace "Post A Comment" in Blogger Blog

• Login to your Blogger Dashboard.
• Click the drop-down menu and select Template.
• Backup your Template before making any changes.
• Click Edit HTML ---> Proceed ---> Expand Widget Templates
• Click Ctrl+F and search the code below:

<data:postCommentMsg/>

Note: If you will find this code twice time or more than, then you have to replace all <data:postCommentMsg/>.

• Now replace the code into your own message such as... 

"Leave a Comment"

"We love your comment"

"Say something about this" etc.

or 

You can also replace the code with a beautiful color image if you don't like plain text message. To do this just replace the <data:postCommentMsg/> code with an image URL code as shown below.

Pick an image code below and Replace the <data:postCommentMsg/>

Here is a list of images you can use : 

 

   

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl6P91a28ce00IysEw3tL39hgZTvt_YOrx0T1N-wYC4r8VVN90XRXqOIp5xLbzeVCYHeadpq_YLvEc5rY-hhWRe7KfKI9yRaLX4FQL6ibqOOhaPGHhbNGPcGZEryPEs0IZ_estsBId4GU/s1600/PostAComment.png" /> 

   

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbBKlqmFku0w1TAxvz2LxzcXwh_ZMR0fTdXHs8hn3y-c7lQEVIM4UogR1SXYkidWyqgcjYG9I10fGbJwgj5GnJTmoXvULKTwTvvWzRhP13ZeOwgTSZKINkqh_UgHXttRx0X8-YBdSxmuc/s1600/PostAComment+%25282%2529.png" /> 

   

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq6zPAEy2pMPpg7IKLeeKLSZME7jElTRcFebfTWG03KYhF4PpJV5_cexsurIF6nwJikVhXWwG1QQJJv5V0DBxUHqhswP_R6st4ItadjDtseWUPdHd9b3NPS8UTAQWQWov-bG5faGZkm_g/s1600/PostAComment.gif" /> 

   

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTpVIk5WTcYdCc-wBlfV10qayemCGJus9PpFlGskQnrURnwPnMmp4HLFT_wC6s51HddvhY2KUhiqPgnrl3wwxkTCim-4pHuFkAwQS54Yebo9qHZphgQrujCPGWjXWH2KUnlgO_9oY63GI/s1600/PostAComment+%286%29.png" />

   

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9HqlpDaurFhOQU1YXXJLTu9iaRJPkjtdno3JVeTGnsQVJc7ZX2UIK0KEjF6kQn6OvIrwv4p_qG0DtqROqHbj6nDuyAtDtAgnrPm6KjwNsi6HzsEzstHBRmK7iMshr9OPtg0M3N9OZHkE/s1600/PostAComment+%284%29.png" />

   

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr5puoEwNarYqdAhvDr6UF4UMNo8iAtvY1WMkVJ8EAEXowfjyNvqdHws6hAc1aaI-wEQQ1HIken0PAMujWqdj0K2HBxq0GrC8Fd6Czx6LBCAEHfJkEwtDnxteU8k3Wz8BMvlLzyG20d1M/s1600/PostAComment+%282%29.gif" />

• After replacing click Save and then your Done!

I hope this post will help you. If you have problem, Please let me know so that I can help you. Happy Blogging...:-)
Find Best Bigrock Coupons:
Bigrock Coupon , Bigrock Discount Coupon, Bigrock 99 coupon, Bigrock coupon code for september, Bigrock hosting coupon

Read More

Spiceupyourblog like comment design in blogger

Spiceupyourblog is a beautiful blog with unique design.Paul crowe is owner of that blog.I also shared spiceupyourblog template in previous post. In this tutorial you will learn how to make your blogger comment system design like on Spiceup your blog.
SYB is well designed by Paul Crowe. But the comment system design is one of the best thing we find in SYB, the design and it's look makes the comments easier to understand. 

 

You can also see the Demo here

DEMO 

To make this type of comment system is very simple.Just you have to do 2 steps

• Enable threaded comment in your blog
• Applying CSS in your template

Enable threaded comment in your blog:

1. Blogger Dashboard > Select the Blog that you want to enable the Threaded Comments
2. Go to Settings > Posts and Comments
3. Comment Location option set to Embedded
   
4. Go to Settings > Other 
5. Allow Blog Feed option set to Full
   

Still not getting Threaded Comments?

Backup your Template before going to change any thing.

Method 1:

You will lost all Changes in Blog Posts and Widgets. like, Adsense Ads inside Post,Post Footer changes, Share Buttons, Signatures etc,.!!

1. Go to Design > Edit HTML
2. Click on Revert widget templates to default link

This will Discard the all Changes Widget and revert to Default. This is Best suitable for non Custom Templates.

For Custom Template Follow the Method 2

Method 2:

1. Go to Template > Edit HTML
2. Click on Expand Widget Templates Check box
3. Find the Following code.
   

   <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:include data='post' name='comments'/> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:include data='post' name='comments'/> </b:if>

4. You will get Two results. one is belongs to mobile template and other is belongs to web Template.
   Replace it with the Below Section of Code on both mobile and web template.  
   
   

   <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if>

5. Save the Template!

Applying CSS in your template :

It can be done easily with CSS. You can make changes to the CSS if you understand what you are doing or you may just ignore making any changes. Follow these Instruction to add this long CSS

1. Go to Blogger Dashboard 
2. Now click on the Template tab
3. Click on the Customize button
4. Select the Advance tab > scroll down and Add CSS 
5. Now you will see a textarea on right side, this is where you have to paste the HTML
   

   @font-face { font-family: 'Philosopher'; font-style: normal; font-weight: 400; src: local('Philosopher'), url(http://themes.googleusercontent.com/static/fonts/philosopher/v4/OttjxgcoEsufOGSINYBGLYbN6UDyHWBl620a-IRfuBk.woff) format('woff'); } .comment .avatar-image-container { border: 1px solid #B6B6B6; max-height: 70px !important; margin-top: -5px; width: 70px !important; position: relative; z-index: 50; } .comment .comment-block { margin-left: 75px !important; } .comment .comment-header { background: none repeat scroll 0 0 #A9F5D0; color: #333; font-size: 15px; font-weight: bold; margin-left: 60px; } .comment .comment-header a { color: white !important; text-decoration: none; } .comment .comment-content { background: none repeat scroll 0 0 #FEFFF9; border-bottom: 2px solid #E6E6E6; font-size: 14px; margin: 0 0 30px; padding: 5px 5px 10px 10px; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD; color: #333; display: inline-block; line-height: 1; margin: 0 3px; padding: 3px 6px !important; text-decoration: none; } .comment-header cite { background: none repeat scroll 0 0 #DF7401; border: 1px solid white; color: white; padding: 2px 20px; position: relative; z-index: 99; margin-left: -20px; } cite.blog-author { background: none repeat scroll 0 0 #8181F7 !important; } .icon.blog-author { display: none !important; background: url("") no-repeat scroll 0 0; margin-left: 90px; width: 60px !important; height: 60px !important; position: absolute; right: 5px; bottom: 5px; top: 10px; } .comment .comment-header { color: #333; font-size: 15px; font-weight: bold; } .comment .avatar-image-container img { border: medium none !important; height: 70px !important; width: 70px !important; max-height: 70px !important; max-width: 70px !important; } .comment .comment-actions a { background: none repeat scroll 0 0 #DDD !important; color: #333 !important; display: inline-block !important; line-height: 1 !important; margin: 0 3px !important; padding: 3px 6px !important; text-decoration: none !important; font-size:16px; } .comment .comment-actions a:hover { background: #CCC !important; text-decoration: none !important; } .comments { font-family: 'Philosopher', arial, serif !important; font-size: 1em; color: black; } .comments .continue a { display: block !important; font-weight: bold !important; padding: .5em !important; color:#E34600; font-size:16px; } .comments .continue a:hover {color:#4D3123;text-decoration:none;} .item-control { display: none !important; } .comments .continue { border-top: 2px solid transparent !important; }

Then open your blog and see the comment system.If it does not works for you,please comment below.

Read More

How to change Comments Avatar Image size in blogger

This is a Quick Trick to Show the Blogger Comment Avatar Image Properly. I saw in many blogs Comments avatars. those are Improper in size. This is because of the CSS of both Default Comments System and Threaded Comments. which are present in your template and showing the avatar image improperly. here is the Quick Tip with css to Reset the Avatar image and Style the Image.

 

How to Fix The Improper Blogger Comments Avatar Image?

This is Reset CSS for Comment Avatar Image and is works for both Default Comment System and Threaded Comments System.

1. Login to Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
2. Select the Template > Click on Edit HTML > Proceed
3. Search for ]]></b:skin> and place the below code before it! 

.avatar-image-container,
.avatar-image-container img{
 max-width:50px !important;
 width:50px !important;
 max-height:50px !important;
 height:50px !important;
 padding: 0 !important;
 border:0px;
}

Note: Default size it set to 50px. if you want Change the avatar size then simply modify the above CSS.

How to Rounding the Blogger Comment Avatar Image?

In comment someone asked me to Rounding the Avatar image in blogger comments. here is the CSS for it!

this css will reset the avatar size to normal and rounds the Image.(so don’t use the above CSS)
Search for ]]></b:skin> and place the below code before it!

.avatar-image-container,
.avatar-image-container img {
 max-width: 50px !important;
 width: 50px !important;
 max-height: 50px !important;
 height: 50px !important;
 padding: 0 !important;
 border: 0px;
 -webkit-border-radius: 999px;
 -moz-border-radius: 999px;
 border-radius: 999px;
}

.avatar-image-container{
 border:3px solid #fff !important;
 -webkit-box-shadow: 0 1px 2px #BBB;
 -moz-box-shadow: 0 1px 2px #BBB;
 box-shadow: 0 1px 2px #BBB;
}

Note: Default size it set to 50px. if you want Change the avatar size then simply modify the above CSS.

If this post is helpful to you? then please share it! Thanks!.
Leave your comments. →

Read More

Adding bubble comment in blogger

Well its pretty clear in the title that this tutorial helps you on adding a comment count bubble next to your blogger post titles as you can see the live demo of it on the homepage of my blog. Showing comments count on your blogger blog posts really helps you in building more number of commentators and active community on your blog. So nothing is left to talk about blogger comment section. Let's jump to the tutorial on adding bubble comment count to blogger post titles.

DEMO

 How to add this to the blogger:

1. Go to blogger dashboard --> Template --> Edit Html(Tick expand widget template option).

2. Search(Ctrl+F) for ]]></b:skin> and paste the following peace of code just above it.

.comment-bubble {
float : right;
width : 48px;
height : 48px;
background : url(http://2.bp.blogspot.com/-7FFIKA34Kvw/T4x9E0RmA0I/
AAAAAAAAALI/03AG305CesI/s1600/speech+bubble+green.png);
background-repeat: no-repeat;
font-size : 18px;
position:absolute;
margin-top : -15px;
margin-right : 2px;
text-align : center;
}

Bubble icon choose

I have listed some of the nice looking bubble icons below. right click on your desired icon and click on copy image URL and replace the above highlighted Url with your copied Url.

Bubble Comment count script

3. Now find for this code

 class='post-title entry-title'

4. Add the following peace of code just below it.

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>

5. Save your Template and view your blog.

For further assistance kindly leave your question in the comment section below and I would be pleased to help you on it.

Read More