Decorating Blogger Comment Box

Hi friends, we meet again in the hot topic of blogger and widgets. This time we will discuss about the blogger comment box modification. Of course, in order to become more attractive. Before starting the discussion, we suggest that you learn the css that is in this tutorial, because this tutorial is the application of css on bloggers.

---

History

We'd love to look interesting in the comments box. That users like to do commentary. As we explore the sites of friends, trying to find a good inspiration. Finally we take a decision. Which display a comment box to be more manly. For you are a woman blogger, then you just simply looking for background image. If you want to change the looks to be more interesting please visit css tutorials.

---

To the point

The first step is to put the following css code. I'm sure my friends already know how to install the css code, click the Design tab -> Edit HTML, then the checklist Expand Widget Templates. After that look for code ]]></ b: skin>. In the above code, add the following code (attention: we are using standard template from blogger)

.comment-form { background-color:white; } .comment-form iframe{ background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDAdPHdf77jm_BYnd51_1cXUfqssMIgZPY7W3zuWtLWRjriNtE0HxHJEYmzM08Dq4hBhDntI3R1V9VonouVFH9lNMKsdSNy_Av87q-OS5CQG3DZvOAyQJW6N3l9IVcfBX5WDg27ex-_2I/s128/stone%252520wall.jpg'); padding-left:8px; padding-top:6px; border:6px outset silver; -webkit-border-radius:6px; -moz-border-radius:6px; -o-border-radius:6px; color:black; } .comment-form iframe:hover{ background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDAdPHdf77jm_BYnd51_1cXUfqssMIgZPY7W3zuWtLWRjriNtE0HxHJEYmzM08Dq4hBhDntI3R1V9VonouVFH9lNMKsdSNy_Av87q-OS5CQG3DZvOAyQJW6N3l9IVcfBX5WDg27ex-_2I/s128/stone%252520wall.jpg'); opacity:0.9; filter:alpha(opacity=90); padding-left:8px; padding-top:6px; border:8px outset gold; -webkit-border-radius:8px; -moz-border-radius:8px; -o-border-radius:8px; } .comment-form a{ color:blue; }  

If you want to change the width of the comment box, how easy. Look for the following code snippet

<iframe allowtransparency='true' class='blogger-iframe-colorize

You will get two pieces of code similar to code above, change the width = "100%" with the width = "500 px" or whatever its value, it's up to you. Our advice, change with the em unit, although with the px unit is adequate. Please read our tutorial about the em unit for more details.

Done. Your comment box applies to chrome, internet explorer, opera, safari, and firefox. You have to do afterwards is to simply pass the image url that you want. Easy right.