Customized comment box can increase the attraction of your blog. It's special Hover effects make's it more attractive. Adding this custom comment box design to blogger is very easy. It can be integrated into your blog in just few minutes. You can also easily customize this design according to your blog`s design. It will match your blog`s color scheme perfectly.Check Below images before proceeding to the installation.
Now, let's start step by step guide to customize comment box
Step 1: If you are using Google+ comment box disable it first. For that go to Setting>Posts,comments and sharing>Google+ comments.
Step 2: Now Go to Theme (Template) > Edit HTML. Click any where in the codes and press Ctrl + F.
Step 3: Search for below code, Search codes will appear two times modify both.
Customization
BEFORE CLICK OR HOVER |
AFTER CLICK OR HOVER |
Now, let's start step by step guide to customize comment box
Step 1: If you are using Google+ comment box disable it first. For that go to Setting>Posts,comments and sharing>Google+ comments.
Step 2: Now Go to Theme (Template) > Edit HTML. Click any where in the codes and press Ctrl + F.
Step 3: Search for below code, Search codes will appear two times modify both.
<div class='comment-form'>Step 4: Replace above codes with:
<div id='livethreads'>Step 5: Now Search for ]]>< and above it paste the below codes.
Step 6: Save Theme (Template), That's it.#livethreads iframe{background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwZBjJU0oZNHSaQn_OOCWa61aFKJUE3JAi1Koi95FXRgnuRzUe3sRikGPOJVFzLesN9zb0fhCAXAp8RvNciBga0lLlMgexWv3T107modVakco6KIQnkhZyx17V5-2cBkb5X_ROeWnl_vsE/s1600/email-29853_960_720.png) no-repeat bottom center;border:4px solid #000000;padding:0px; font:normal 12pt "Times New Roman", Arial; color:#02d4f9; margin:auto; }#livethreads iframe:hover{background:#def8f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ8eME0C1L3HnC9VNSuiwPjC4mxAvMHF9QjtiU2pAq2XRv5tlvW0gCGyjzWEmpy3pzYcor4b3PEC04gyXfYNCM1DAL6UTQvYNul92TTpO-d2DRTe72WmhFVoUOwzQVRbQSzCkX6mKysOc2/s1600/email-29853_960_720.png) no-repeat bottom right; border:4px solid #02d4f9;}#livethreads a{color:#02d4f9;}
Customization
- Change blue background text with your desired border Hex Code.
- Change Red background text to change before and after background colors.
- Change yellow background text to change position of image.
- Change green background text with your image url. Only if you want a different image.
- Change orange background text with your desired hover color.