Add Stylish Thread Comments In Blogger

Add new feature of threaded comments in your blog that can make your blog more beautiful. This enables visitors to reply directly in response to comment.reply option is on the left side and it separate every discussion.adding new comment will start new discussion.

why to add thread comment

First let me tell you some feature and distinct facts.It help to communicate with admin more easily and effectively.It makes your comments like discussion in thread system.It show date and number of reply with image thumbnail at the left side.
Also:Add smiley emoticons in blog

How to add thread comments in blogger

Go to setting > other and make sure that allow blog feed is set to full

Settings>Posts and Comments and make sure that comment location is set to embedded.

search for this piece of code

</b:skin>

just above </b:skin> add this code

.comments .comment-block { background: #F9F9F9; color: #555; box-shadow: 0 4px 10px #EEEEEE; position: relative; margin-top: 10px; margin-left: 60px; padding: 10px; border: 4px solid #EEEEEE !important; border-radius:10px; font: 1.190em/1.2 Cambria,Georgia,sans-serif; } .comment-thread li .comment-block:before { position: absolute; display: block; left: -26px; color: #EEEEEE; content: "\25C4"; font-size: 30px; } .comments .avatar-image-container { width: 60px; height: 60px; max-height: 60px; margin:0px 0px 0 -28px; padding: 0px; border: 7px solid #EEEEEE; border-radius:60px; } .comments .avatar-image-container img { overflow:hidden; width: 60px; height: 60px; max-width: 60px; border:0 !important; border-radius:60px; } .comments .comment-thread.inline-thread { background: none; } .comments .continue { border-top: 0px solid transparent; } .comments .comments-content .datetime { float: right; font-size: 11px; } .comments .comments-content .user a{ font-size: 15px; color: #498EC9; } .comments .comments-content .datetime a:hover{ color: #777; text-decoration: none; } .comments .comments-content .comment:first-child { padding-top: 0px; } .comments .comments-content .comment { margin-bottom: 0px; padding-bottom: 0px; } .comments .continue a { padding: 0px; } .comments .comments-content .icon.blog-author { background-image: none; }

 save your template.

Visit your blog  you can view a post comments section and you can see a reply button under existing reply.When you click reply then new text box will appear and this way when you publish more reply it make a thread.I hope you will enjoy this beautiful feature.

{ Read More }

How To Add Smiley Emoticons In Blogger Comment

Emoticons and smileys is good way to attract attention. We use these icons in chat and emails.we can also add in blog comments.We use these smileys to show our feelings, anger, love confused smiling or crying. These small and cute faces of cartoon help us to send our expressions and what we are thinking just in one click.It can make the discussions more interesting.
Also:Add image hover effect

why to add chat emoticons in blogger

These emoticons become popular in blogging . Every person wants to show feelings and they like to express the feeling by cute smileys and emoticons.bloggers can add these emoticons in their blog just editing some changes in their template.many other blogging platform using emoticons but we can also add these emoticons/smileys in blogger but the method is different. You can use the chat icon while commenting or replying.
Add label with hover effect

How to add smiley emoticons in blogger comments

Login to blogger and go to template.

click on Edit template press ctrl+f and search this code.

</head>

above </head> paste the given code.


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Again find the code

</body>

paste the given code above  </body> 

<b:if cond='data:blog.pageType == "item"'><style type='text/css'>.emoWrap{position:relative;padding:10px;margin-bottom:7px;background:#efefef;background-image:-ms-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-moz-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-o-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:-webkit-gradient(linear,right top,left top,color-stop(0,#fff),color-stop(1,#fff9f2));background-image:-webkit-linear-gradient(right,#fff 0,#fff9f2 100%);background-image:linear-gradient(to left,#fff 0,#fff9f2 100%);border:1px solid #ccc;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);font-weight:normal;color:#333}.emoWrap:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #ccc;border-right:20px solid transparent;width:0;height:0;line-height:0}</style> <script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function () {emoticonx({ emoRange:"#comments p, div.emoWrap", putEmoAbove:"iframe#comment-editor", topText:"Click to see the code!", emoMessage:"To insert emoticon you must added at least one space before the code." }) }); //]]></script><script src='http://googledrive.com/host/0B-GuAkK2nj5gbVg2dXladnUzbVU' type='text/javascript'/></b:if>


Save you template.visit your blog and enjoy beautiful emoticons.if you have any question ask me in comment.i would like to hear you.

{ Read More }

How To Make Your Comment Box Dofollow In Blogger

Leaving your blog link on others blog comments is a good idea to generate extra traffic to your blog.In blogger template attributes for links in comment are already defined.Usually we have two attributes, you may already know.Nofollow and dofollow, these are the attributes that search engine bot read while crawling the page.By default blogger set nofollow attribute for comments links.As we know search engine bot give preference to dofollow links, so we will change nofollow comments to dofollow comments.

Why we make changes

Also it gives benefit in search engine ranking.As we know search engine show top ten result for any searched query.we can change the no of results show per page by customizing setting but this not our topic.These top ten result are high rank websites in specified niche.by making nofollow comment to dofollow we can increase our blog traffic, because many other blogger look for dofollow blogs for comments.After changing your blog to dofollow comments,you should share your blog on forums and other blogs comments.

Some newbie post to many comment on each blog and start putting their link inside comment box.This is not good idea and even some non professional bloggers put irrelevant and spammy links.To avoid spammy link you must check your comments and remove irrelevant comments.Do not allow comments with lot of links.

Remove nofollow tag from blogger comments

Step 1 login to blogger account and go to template of blog

Step 2 Click edit html, press ctrl+f  and search this code

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

Step 3 Replace it with below code.

<a expr:href='data:comment.authorUrl' rel='dofollow'><data:comment.author/></a>

Step 4 Save your template, you have done.

Make external links nofollow

Your process is complete you can view your blog.Now all link inside comment become dofollow.I hope it will help you,As you can see related topic above on making external links nofollow.Actually they are dofollow and Some people do not want dofollow external links so follow the instruction.Every person have different thinking but i think it is better to make changes according to your requirement.

{ Read More }

How To Enable Captcha Verification In Blogger comments

Many people post  bad comment and use abusive language this is called spamming.To over come from spam there is no gadget but you can enable captcha verification.I have seem put bad link that may go to bad sites or put bad images.you can delete comment but some blogger are very busy and can not check comment daily.

I always welcome visitors to reply and i try to help.some visitor ask question or give suggestion  and i love to hear their voice and try to help but i can not allow spammers.

Adding verify by captcha  in blog comment

Login to your Blogger blog and choose the blog


Go to settings >> posts and comments

you will see an option for word verification, just enable it
make sure it yes.

Click on save settings.now on your post your visitors have to complete the word verification to publish comment.

I personally find this feature beneficial and i think every blogger should add it on their blog.

{ Read More }

Add Auto Bubble Comment Count In Blogger Post Title

Some visitor do not understand the topic or their problem not solved by your description so they ask for help by comment.It is very good way to communicate and to help each other.today we will learn how to add bubble comment count.It show the number of comment on your post within beautiful bubble.It looks very pretty.It can see it beside post title.

How to add bubble comment count in blogger

Before adding i tell you that i will introduce you two style of this widget.lets start the process

First you have to login to blogger account

Now go to template and edit Html

click inside code area and press ctrl+f you can see search box appear.

Find this code

]]></b:skin>


Add the below code above ]]></b:skin>

For green

.comment-bubble { float : right; width : 48px; height : 48px; background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kLUMUZjc_Vs3NTAGQSzSs2c9Mz1Vaono0gLEw8SZ8Vblr5rxTPcdwHlMzO3sYTKKwt0vNkFbyrE1bA2SnX1tRI4KXKP9HbqksWpWtnBdcjiTNBLyUPKgE1eeoISXayBULO4ISh3FBNfx/s1600/speech+bubble+green.png); background-repeat: no-repeat; font-size : 18px; margin-top : -15px; margin-right : 2px; text-align : center; }

For Blue

.comment-bubble { float : right; width : 48px; height : 48px; background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQMgfudqc2LSQkYD6Hf6E6Wv3Er0P6mzLiYxHCvqoPnM6rThirO5-EKiOl1lJ-9JOR3O3ZXpYGIli-31F-d7awz7LsGMnk9QypklbiEZyjded-qnqTCbRHeC38ZvyS8bwH-_hR6W8AddjT/s1600/bubble+comment.png); background-repeat: no-repeat; font-size : 18px; margin-top : -15px; margin-right : 2px; text-align : center; }

Now find this code

<b:if cond='data:post.title'> <h3 class='post-title entry-title'>

If not found try to find this

<b:if cond='data:post.title'> <h3 class='post-title entry-title' itemprop='name'>

After it paste below code

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='color: #ffffff; font-size: 18px; font-weight: bold;'><data:post.numComments/></a>
</b:if>

Save your template your work has been done.

Note:To change the color of the comments number, replace #ffffff with your hex color code
To change the font size, increase/decrease the 18px value according to your requirement.

{ Read More }

How to Remove comment box in blogger

blog comments

blogger blog has set a design template as a default.comment box is  useful to communicate with visitors Hence it is added and mostly every template had it but some people want to remove  or hide comment box.The main reason is bad quote and replies.people can ask question through commenting and to avoid bad replies there is a option to delete comment but if you not want in your blog due to some reason just few step you have to do.

editing blogger template

before editing you must decide either you wan to hide it or not.I prefer to use delete option.But it your choice.to remove it you can go to comment option at the right side bar of blogger dashboard, now you will see all your comments.just select the reply to want to hide or remove and click on dustbin icon at the top.

step1: Now search for </Head>

paste the given code below it..

<blockquote> <b:if cond='data:blog.pageType == "static_page"'> <style> #comments { display: none; } </style> </b:if> </blockquote>


save your template and you have done....

{ Read More }

Add Recent Comment widget in Blogger

It is very important thing to take part in discussion and to reply visitors comment.commenting box is already added by blogger as default then you can ask why there is need to add this widget, well i tell you,this widget can show most recent and discusses post.but if you want to show recent comment on home on all post and pages you have to install a widget in blog.

how to install add recent comments widget

Adding it is very simple but first i wan to tell you about his widget.
It shows five number of most recent comments and it show beautiful round thumbnail.If some one had not set image in his profile then it show blank avatar.

login to blogger go to layout and

add html/javascript gadget 

Name the title  recent comments

now add the blow code there

<style type="text/css">    ul.latest_recent_comments{list-style:none;margin:0;padding:0;}    .latest_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}    .latest_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}    .latest_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}    .latest_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
    .latest_recent_comments span{display:none;}</style>
<a href="http://5gblogger.blogspot.com/2015/07/add-recent-comment-widget-in-blogger.html" alt="recent comments widget" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>
<script type="text/javascript">//<![CDATA[    // Recent Comments Settings    var    numComments     = 8,    showAvatar     = true,    avatarSize     = 60,    roundAvatar    = true,    characters     = 30,    showMorelink    = true,    moreLinktext    = "More �",    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",    hideCredits    = true;//]]></script><script src="http://yourjavascript.com/12251714239/mybloggerbuzz-com.js"></script><script src="your blog url/feeds/comments/default?alt=json&callback=latest_recent_comments&max-results=5" type="text/javascript"></script>

Find your blog url in above script.
you can see in the bottom.
and replace it with your blog url.

 save it and your process complete.

Note: feel free to ask if you face any problem

{ Read More }

Multi Color Most Commented Post Widget For Blogger

Adding most commented is beneficial for those blogger who update their blog daily and have lot of post so visitor can engage with the posts that have most conversation.First thing about this widget is that it is very easy to install.It is multi color stylish, when you add this widget it show 5 post with most comments but you can change it.

How to add most commented post widget in blogger

First you have to login to blogger.

Now go to  layout and add HTML/javascript gadget

Paste the given below code there and save it

<style>
.comment-count {padding: 3px 10px;background: #000000;color: #ffffff;font-family: 'Oswald', sans-serif;font-size: 80%;float: right;}.odhik-montobbo ul {padding: 0px !important;list-style:none;font-family: 'Oswald', sans-serif;}.odhik-montobbo ul li {list-style: none;padding: 10px;color: #000000;margin-top: -10px;background:none;}.odhik-montobbo ul li a {color: #000000;list-style: none;text-decoration: none;font-size: 90%;}.odhik-montobbo:nth-child(3n+0) {background: #E21323;width: 100%;margin-top:10px;border-bottom-right-radius: 30px;border-top-left-radius: 30px;}.odhik-montobbo:nth-child(4n+0) {background: #E5FF99;width: 100%;border-bottom-right-radius: 30px;border-top-left-radius: 30px;}.odhik-montobbo:nth-child(5n+0) {background: #00E5FF;width: 100%;border-bottom-right-radius: 30px;border-top-left-radius: 30px;}.odhik-montobbo:nth-child(6n+0) {background: #09BCF7;width: 100%;padding-top:-15px;border-bottom-right-radius: 30px;border-top-left-radius: 30px;}.odhik-montobbo:nth-child(7n+0) {background: #09F746;width: 100%;border-bottom-right-radius: 30px;border-top-left-radius: 30px;}<a style="display:none" href="http://5gblogger.blogspot.com"> Widget</a></style><script type="text/javascript">function stripTags(s,n)    {    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")}function mostcommented(feed) { var i; for (i = 0; i < feed.count ; i++) {var postURL = "'" + feed.value.items[i].link + "'";var postTitle = feed.value.items[i].title;var postComments = feed.value.items[i].commentcount;var postList = '<div class="odhik-montobbo"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>'; document.write(postList); } } </script><script src="http://pipes.yahoo.com/pipes/pipe.run? AddUrlHere= you website url&NumberofPosts=5&_id=2cb5eb603ed55a6264ee1484e5fdd45c&_callback=mostcommented&_render=json" type="text/javascript"></script>

Note: look at the bottom of script, you will see you website url
replace you website url with your blog address.

By default it widget show five number of post.if you want to Change Number of Posts replace five with any number you want.

{ Read More }

Add Stylish Background In Author Comments In Blogger

Blog design is very important thing to impress your viewer.Today we will learn how to add stylish background in author comments and make it highlight.May be you have seen stylish highlighted background of admin comment on blog of some on.Yes it is impressive and viewers can focus more easily on admin comments.

why to highlight author

If you are using blogger template, which are very simple but we can make them stylish for changing background by adding some widgets and modifying the template to our requirement.the background of author comment in templates given by blogger is very simple and not highlighted.We have plus point in blogger that we can change author background by editing the template.It makes your blog more stylish.

In the above image you can see the sample of this widget.The author reply is highlighted and background is changed.All the comment of admin author become highlighted and background become replaced with new stylish one.You may have more than one author but this will work properly.The background color is sliver light and blue colored admin is highlighted. 
Also:Add image hover effect in blogger

How to change background of author comment

step 1:First login to blogger account

step 2:Edit template, click inside template are and press ctrl+f 

step 3:New search box appear at the top right corner.

Then find this code

</body>

step 4:Now paste the given code above </body>

<!--author comment background start-->
<script type="text/javascript">    $(function() {      function highlight(){        $(&#39;.user.blog-author,.ssyby&#39;).closest(&#39;.comment-block&#39;)          .css(&#39;border&#39;, &#39;1px solid #e1e1e1&#39;)          .css(&#39;background&#39;,&#39;#f1f1f1 url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWvZ_oAxfxy85KqsP6_WONZw4DfZ6SeFGZQDrk0zfB-Tndg8NOHwgmJr7kILqx3gZ_a_PsRDCuXtc0GTldvjjwXJ3TjuXJGjShF-5QztfopmKhPmZ1kbar2AUjKPpIx2FKVxn2UIbBXEe7/w140-h126-p/admin-comment-button.png&quot;) no-repeat bottom right&#39;)          .css(&#39;padding&#39;, &#39;10px&#39;);          }          $(document).bind(&#39;ready scroll click&#39;, highlight);                       });</script><a style="display:none" href="http://5gblogger.blogspot.com"> Widget</a>
<!--author comment background ends-->

step 5:save the template and go  to you blog post where author comment are present then check that background of comments changed.If you face any problem please inform me.

{ Read More }