Get A Real Wordpress Comment System In Blogger With Intensedebate

This isn't one of those copy pasted blog posts. 

It took me several days to actually break through something I literally have no basic knowledge of except for the minor addition and subtractions I could do.

The good news is, I was able to come up with something intriguing and the bad news is, you may not be able to use this on your blogger blog if you already have tons of comments in it, except you are willing to lose those comments or leave the default blogger comment system in some posts.

I've always wished blogger had a better comment system that isn't as shabby looking as the default system which of course most of us have to put up with. A good percentage of bloggers using blogspot hunger for the WordPress style commenting system and that's why I guess they created intensedebate which really didn't satisfy that hunger but here I am, adding some more to boost your satisfaction.

That's that...

Check out a Demo here.

Here is how to get a WordPress style comment system In Blogger.

Your comment area will look exactly like this after implementation.

Before you begin, Download your current blogger theme (template).

1). Login to your intensedebate account. If you don't have an account, sign up for one (while signing up, select the option that says "I want to use Intensedebate on my Website/Blog".

2). To add your blog, (if you haven't added it yet) submit its URL. Then choose your blogging platform (this is where Intensedebate will be installed which for you is BlogSpot).

3). Choose where you want intensedebate installed as recommended in their site, choose the first option if you already have comments on your blog (intensedebate does not synchronize with previous blogger comments, rather it overrides them). Choose the second option if you don't have any comment on your blog yet. Upload your blogger theme (I assume you've already downloaded it).

4). After uploading, you will be asked to copy your template (the intensedebate comment system has been installed).

5). Now head over to your blogger dashboard, and paste the copied theme into the HTML editor making sure it is well pasted (you should likely clear the HTML field first).

Save your template and yippee! You are done with the first part!

Visit your blog and see for yourself how intensedebate looks on it. If you are satisfied with the looks then there is no need going further below.

Step 2.

1). Copy the CSS code below

#idc-container-parent #idc-container {
background: #ffffff !important;
border-top: 1px #333;
}

#idc-container-parent #idc-container .idc-c, .idc-thread {
background: #ffffff !important;
border: none !important;
}

#idc-container-parent #idc-container .idc-c .idc-admin {
color : #9c3 !important;
}

#IDCommentPopup, #IDCommentPopupInner, #idc-bottom span {
background: #333 !important;
}

#idc-container- parent #idc-container .idc-c. idc-c- highlighted {
background: none;
}

#idc-container-parent #idc-container .idc-foot {
border: none ;
}

#idc-container- parent #idc-container .idc-head .idc-user {
background: none;
}

#idc-container-parent #idc-container .idc-c-h
.idc-i {
text-transform: uppercase !important;
font-size: bold 19px !important;
font-weight: 400;
}

#idc-container-parent #idc-container .idc-c .idc-c-h img {
width: 50px !important;
height: 45px !important;
} 

.idc-foot { 
display: block !important; 
}

#IDCommentsNewThread {
width: 350px !important;
max-width: 90% !important;
position: relative !important;
padding-top: 20px !important;
padding: 10px !important;
margin-right: 10px;
}

#IDCommentReplyForm1{
position: relative !important;
padding-top: 20px !important;
}

.idc-postnav-label, .idc-postnav-list,span#mylastpost img:first-of-type, #idc-container-parent #idc-container .idc-c .idc-collapselink, #IDCColumnNameLabel, #IDCColumnEmailLabel, 
#IDCColumnURLLabel label {
display: none !important;
}

#idc-container-parent #idc-container .idc-c .idc-c-h {
background-image: none !important;
background-color: #eee !important;
max-height: 45px;
overflow: hidden;
}

#IDCColumnName:before {
  content: "Name *";
}
 #IDCColumnURL:before {
  content: "Website";
}
 #IDCColumnEmailReply:before {
  content: "Email *";
}

#IDCommentNewThreadText {
color: rgb(53, 53, 53) !important; 
min-height: 150px !important;
width: 350px !important;
max-width: 90% !important;
margin-bottom: 0.625em !important; 
font-size: 14px !important; 
padding: 15px !important;
border-color: rgba(0, 0, 0, 0.117647) !important;
border: 1px solid rgba(0, 0, 0, 0.117647) !important;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 4px 1px inset !important; 
-webkit-appearance: none !important; 
margin-right: 15px !important;
transition: all 0.25s ease-in-out !important;
background-image: initial;
background-attachment: initial;
background-size: initial; 
background-origin: initial; 
background-clip: initial; 
background-position: initial;
background-repeat: initial;
}

#IDCColumnName, #IDCColumnURL, #IDCColumnEmailReply {
color: rgb(53, 53, 53) !important; 
line-height: 1.1 !important; 
margin-right: 0px; 
margin-bottom: 15px; 
margin-left: 0px; 
width: 250px !important;
max-width: 85% !important;
clear: both !important;
}

#txtNameNewThread, #txtEmailNewThread, #txtURLNewThread .idc-text {
width: 250px !important;
max-width: 85% !important;
margin-bottom: 0.625em !important; 
font-size: 14px !important; 
padding: 15px !important;
 border: 1px solid rgba(0, 0, 0, 0.117647) !important;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 4px 1px inset !important; 
-webkit-appearance: none !important; 
margin-right: 15px !important;
 transition: all 0.25s ease-in-out !important;
background-image: initial;
background-attachment: initial;
background-size: initial; 
background-origin: initial; 
background-clip: initial; 
background-position: initial;
 background-repeat: initial;
}

#txtURLNewThread {
width: 250px !important;
max-width: 85% !important;
margin-bottom: 0.625em !important; 
font-size: 14px !important; 
padding: 15px !important;
 border: 1px solid rgba(0, 0, 0, 0.117647) !important;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 4px 1px inset !important; 
-webkit-appearance: none !important; 
margin-right: 15px !important;
 transition: all 0.25s ease-in-out !important;
background-image: initial;
 background-attachment: initial;
background-size: initial; 
background-origin: initial; 
background-clip: initial; 
background-position: initial;
 background-repeat: initial;
}

#idc-container-parent #idc-container h3 {
font-weight: 400;
text-transform: capitalize;
font-size: 19px;
padding-top: 5px
padding-bottom: 7px;
margin-bottom: 19px;
color: rgb(17, 17, 17);
font-variant-ligatures: normal;
line-height: 26px;
orphans: 2;
widows: 2;
background-color: rgb(255, 255, 255);
}

Head back to intensedebate, click on “configure this IntenseDebate account”, click on custom CSS and paste the CSS code you just copied in the text field and save.








2). Now go to layout, and select the options as seen in the image below.

3) Go to comments and make your selections as seen in the image below (for best results).

4). Go to moderation (under plugin) and click to enable Akismet spam filtering.

Now, once you are done, visit your blog and get awed... Striking resemblance with the default WordPress comment system.

Intensedebate comment system is a very good way to get comments on your blog as users would not get discouraged since they don't need to sign up nor select commenting profiles.

For an Admin, you can manage comments directly from your blog posts as well as disable commenting on any post if you can't keep up with the comments coming in.

Though you've got what you always wanted, but I should warn you that the third party comment system isn't so cool with blogger because once you change your mind about them and decide to switch to the default blogger comment, you'll lose all your comments... You can't import (unlike discus)  nor export comments in intensedebate.