0 How to Add a Separator To Blogger Comments

The comments are a very much necessary part of any blog/website as in them readers categorically tells their opinions related to the post of a blog/website. So it's necessary to pay a bit of our time to create this part so that it can look additional trendy, accessible and neat.

To put our comments neatly and properly, we should always build every comment simple to identify, so that we can find and easily recognise from wherever it begins and to wherever it ends, otherwise it becomes a jumble of letters and our guests might run away.

Here are some strategies to create some separating lines or borders to separate and differentiate every comment. One of these blogger tips and tricks related to blogger comments is “How to Add a Separator/Border to Blogger Comments.”

Add smileys to blogger comments

By this blogger tutorial which is on HTML based, we can separate each comment by lines or borders.

How to Add a Separator/Border to Blogger Comments?

STEP 1:

Go to Blogger dashboard, and then go to Template

Now click on Edit HTML

Expand the template

 

STEP 2:

Click anywhere inside the Code area and by using Ctrl+F open search box

STEP 3:

By using search box,

Find this code

]]></b:skin>

If in our blog/website, threaded comments system (with the reply option) is being used

Just  above  ]]></b:skin>

, paste the below given code

.comment-block {
border-bottom: 1px solid #000000;
}
.comments .continue {
  border-top: 0px solid #000000;
}

If in our blog/website, previous comments system (with no reply option) is being used

Just  above ]]></b:skin>

, paste the below given code

#comments-block .comment-footer {
border-bottom:1px solid #000000;
}

Customization

Add a different background for Author comments in blogger's threaded comments

Customize settings as:

• 1-   To change the border color replace the value #000000 (use this tool to get new hex code freely)
• 2-   To change the border style change the solid to dashed, dotted, outset, inset etc
• 3-   To change the border thickness edit the 1px value

After completing customization, click on Save.

Congratulations! That’s it…

By using simple HTML coding you have easily applied or Added a Separator/Border to Blogger Comments.

Add recent comments widget in blogger

How to number comments in blogger/blogspot

How to remove blogger threaded comments

Published By:
OperaOrbis
on 04:59

Read More ---

0 Add a Different Background for Author Comments in Blogger’s Threaded Comments

JQuery tricks are very much useful for the designing of blog/website. Today the new blogger tip for designing comments according to your need is also based on jQuery tricks. By using this trick, the authors comments can be highlighted very easily so that the admin’s comments can be differentiate from the readers’ comments.By using this blogger tutorial the border, background color or font color and size etc of admin comment box can be changed and redesign according to your needs. 

Let’s have a complete guide about this blogger widget of “Add a Different Background for Author Comments in Blogger’s Threaded Comments”

How to Add a Different Background for Author Comments in Blogger’s Threaded Comments

Add smileys/emoticons to your blog comments

STEP 1:

Go to Blogger dashboard, and then go to Template

Now click on Edit HTML

STEP 2:

Click inside the Code area and by using Cntrl+F open search box

STEP 3:

By using search box,

Find this code

 </body>

Just above </body> paste the below given code

 <script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(function() {
function highlight(){
$('.user.blog-author').closest('.comment-block')
.css('border', '1px solid #FFA500')
.css('background','#F1F1F2 url("http://www.blogblog.com/1kt/transparent/white80.png")')
.css('color', '#444444')
.css('font-size', '12px')
.css('padding', '10px');
}
$(document).bind('ready scroll click', highlight);
});
</script>

Customization

How to remove blogger threaded comments

According to your needs customize settings as:

• 1-   To change the border thickness edit the 1px value
• 2-   To change the border style change the solid to dashed, dotted, outset, inset etc
• 3-   To change the border color replace the value #FFA500
• 4-   To change the background style replace the URL http://www.blogblog.com/transparent.png, you can also replace this URL with your default image.
• 5-   To change the background color just change the value #F1F1F2 by new hex code (use this tool to get new hex code freely)
• 6-   Change the font color by changing #444444 to new hex code (use this tool to get new hex code freely)
• 7-   Font size can be changed by changing 12px.

Your desired customization is complete now click on Save.

That’s it… Congratulations! You have applied this blogger widget completely by using simple jQuery tricks.

How to number comments in blogger/blogspot

At last

Now you can “Add a Different Background for Author Comments in Blogger’s Threaded Comments” easily quickly. May be you have tried some others widgets like this, but this is working. Keep blogging.

Published By:
OperaOrbis
on 04:27

Read More ---

2 How to number comments in blogger/BlogSpot

A lot of blogger tricks are given about the numbered comments. I am giving you the very easy and cool blogger trick to number the comments of your readers. By this cool widget, your readers can mention or point the comment about which they are concerned or if they have previous discussion to you or any other reader. This numbered bubbled comment system will give your blog a completely professional look.

To work on “How to number comments in blogger/BlogSpot”, you have to use previous blogger commenting system. For this purpose you first have to delete the threaded comment system. For this follow this blogger tutorial "How to remove blogger threaded comments?"

 

How to add number comments in blogger/BlogSpot?

 

Add smiley to your blog comments

STEP 1:

Go to Blogger dashboard, and then go to template

Click on Edit Template

Click inside the template code anywhere

Press ctrl+F, a search box will open like this

STEP 2:

Now find the below given code (paste the below given code in search box and hit enter to find it)

<b:loop values='data:post.comments' var='comment'>

Now after finding this code, paste the below given code just above it

<script type='text/javascript'>var CommentsCounter=0;</script>

STEP 3:

Now find this code

 <data:commentPostedByMsg/>

Now just after/below it, paste the below given code
 

 <!--comments-count-starts-->
<span class='comments-number'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
<!--comments-count-stops-->

STEP 4:

This is just the last step before customization.

Find this now

</head>

Just above </head> paste the below given code.
 

<!-- comments-count-starts-->
<style type="text/css">
.comments-number a:link, .comments-number a:visited {
color: black !important;
text-decoration: none !important;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguFwAqKP-LU38eQufdueaoG_e1BKHxcYZDffqtPbptBSZ8USyP3Fwhqq9jfU5fIKhupm8rgeOg714AcU7sgRbQjIoNr_pqo2aLJWu1-a0JSmjaSQGbycmSz4oP27LzMrVgUdiCkiIK1g2_/s1600/comment+bubble+1.png) no-repeat;
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/
float: right;
display: block;
margin-right: 5px;
margin-top: -15px; /*comments-counter position*/
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comments-number a:hover, .comments-number a:active {
color: #1BA0E1 !important;
text-decoration: none !important;
}
</style>
<!-- comments-count-stops-http://operaorbis.blogspot.com-->

Add recent comments widget to blogger

Customization

• 1-   To change the color of number, change the Yellow text with hex code (get the hex code from Color Code Generator)
• 2-   To change the bubble of comment, change the URL in Pink with your desired image URL.
• 3-   To change the image width and height, replace the values in Green. I will suggest don’t change it the numbers might float outside the bubble.

After customization, click on Save. That’s it. Congratulations! 

You have done all. Happy blogging!

Comment Bubbles

To change the comment bubble and to use the any one of below given comment bubble, just right click on the image and copy “image location/address”

  

 

Admin Words

In this blogger tutorial, I tried my level best to give you the easiest way of “How to add number comments in blogger/BlogSpot”. If you like this tutorial please shares this to your friends and keeps in touch.

Published By:
OperaOrbis
on 09:12

Read More ---

1 How to remove blogger threaded comments

The blog offers the two types of comment system. One system is simple while another is the threaded comment system. In threaded comment system you can reply to two levels. You can also remove this threaded comment system very easily. Here today you will lean step by step to “How to remove blogger threaded comments”

How to remove blogger threaded comments (with reply option)

STEP 1:

First of all make the backup up of your blog. This is necessary so if we make any mistake during removal of threaded comments, we can upload the saved template again.

• Go to blogger dashboard
• select your blog
• go to Template
• on the right click on Restore/backup
• download and save your blog’s backup 

Add smileys/emoticons to your blog comments

STEP 2:

• Now go Template
• click on Edit Template

Click in template area and press CTRL+F, a search box will open.

Add recent comments widget to blogger

STEP 3:

By the search box, Search the first line of the below given code, or search the complete code given below

<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> 

You will find this code 2 times (twice)

STEP 4:

You found the above code two times, Replace/remove that above given code with the below given code twice

<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>

STEP 5:

Click on “Save Template” button. Congratulations! That’s all, you have done.

Closing Words by Admin

So friends this is all about “How to remove blogger threaded comments” .hope it will completely work for you. Keep commenting. Happy blogging!

Published By:
OperaOrbis
on 05:23

Read More ---