Monday, March 6

Customize blogger comment box with hover effects

Customize blogger comment box with hover effects

04:17
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.

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.
#livethreads iframe{ 
background:#ffffff url(https://2.bp.blogspot.com/-2WBYxLCI0Z8/WL1Ca40Wg-I/AAAAAAAABAQ/az8Q0GdO3hsoD_3kKuzDPcdP3d6dGypXACLcB/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://1.bp.blogspot.com/-vOLLVfHl9WE/WL1Cd9fuyjI/AAAAAAAABAc/sgpZ6KTfPKcGMWMykix6ffCHfx8XrxiZQCLcB/s1600/email-29853_960_720.png) no-repeat bottom right; border:4px solid #02d4f9; 
} 
#livethreads a{ 
color:#02d4f9; 
}
Step 6: Save Theme (Template), That's it.

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.