Change Blogger Comment Form Background - Customize Comment Form

Earlier, we have been talking about how to make our blog look more attractive and professional. Changing comment form size and removing white space that appears below the comment form, were two useful tricks to make your blog's comment section look more better. Now, its time to play more with comment form of blogspot. Lets try how to change blogger comment form background to image or a particular color, and how we can customize blogger comment form.

Comment Form Background Changed !

 

Comment Form with a hover effect

Drag Your Mouse Cursor at this comment form for 3-4 seconds to see the effect

Changing blogger comment form background to an image can add for fun to your blogger and this will make your comment form more attractive. You can also add hover effect which will change comment form background when some one drags the mouse on comment form. Its really very easy to do.

How to Customize Blogger Comment Form?

• Go to your Blogger Account > Dashboard > Design > Edit HTML
• Check "Expand Widget Templates" box

• Search for this code (tip: press CTRL and F at once from your keyboard)

<div class='comment-form'>

• Change this code to;

<div id='folsol-form'>

• Good, Now search for this code;

]]></b:skin>

• Paste below given code just before the searched code.

#folsol-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYCErbYy6Ry1FHZz6LNABGcKPHLWZNfeMYQBBfvc3njAjwmmJgidf6uABue0eYMBIWFNdeVxM8BizWub1n7QjDUQCyUfTsZAl1MntvB1j9y5yijjPJBeT2UnewbXa6TrM7iQTQlG5zia_s/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#7EB2AC;
width:450px;
}
#folsol-form iframe:hover{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtHz1T_0jsy4RfSAgGnMz3PXK8qjdbWGEiYH3QLQDZyieB0KQqwMO0p_pXd6Z0sm-ABgr-lJPYNyC9uyF_6ajts0Dkox3AgPtfq0JexGI3oTDepOOGzO_T6J_4hxHlAQKldRpFPlhVB5Bd/s400/plz-do-not-spam2.gif) no-repeat bottom right;
border:7px solid #7EB2AC;
}
#folsol-form a{
color:#7EB2AC;
}

• Save Your template and its done!

Note: You can change the highlighted parameters as per your need.