Hi bloggy readers,
Do you know that, we can change the default interface of blogger comment box which already provided by Blogger. There are many reasons i found why bloggers want to change the blogger comment box, mostly, that's because they want to extend or reduce the width size of that default blogger comment box. Interested? Then let's start the tutorial! But dont forget, if it works, share it to your friends with the Digg button beside this post, i will be thankful to you guys.
1. Log in to Blogger
To begin this tutorial, now go to Blogger.com and log in to your account.
2. Go to Edit HTML
In the Dashboard page, now go to Layout/Design > Page Element > Edit HTML.
3. Expand Widget Templates
In the Edit HTML Page, there is one small box called "Expand Widget Templates" next to it, now press that small box.
I strongly suggest you to save your current template, if later you made a mistake on your blog template, you can revert it back by using the existing one. Now click at the link Download Full Template.
4. Find the code
Now in order to modify the blogger comment box, you must firstly enter the Find mode on your browser. Now, by press Ctrl + F at the same time, you will enter the search mode. Now find the code below:
5. Replace the Code
After locating the code on number 4, now block all of those codes and then replace it using the code below. The CSS below indicates that the new column layout of your blogger comment box will be installed to your blog.
6. Find the Code again
After replacing the old column code with the new one, now by using pressing Ctrl + F, now find these code:
7. Replacing the Code
And finding the code on number 6, now block again those codes, replace it with the following code:
8. Saving the current changes
Now you are about to finish the tutorial. By pressing the Save Template button in Edit HTML page, now save the current changes you've just made. It's done guys! Now, the new customized blogger comment box has been successfully embedded to your blog.
As many of my other tutorial articles, in the end of it, there will be the configurations that can be applied to the new embedded element. Now, in this embedded blogger comment box, i want to show you how to customize the blogger comment box.
Firstly, the code i've already shown you above is customizable. Now look at the code on number 5 of this tutorial and find the code below
As you can see on the code above. The percentage value 100% indicates the width size of the new comment box. By reducing or extending the number into any value, you will be able to adjust the suitable size with your own template. You can also try reducing the size of blogger comment box with the value 400px. And for the property width:90% in the #commentblock section, you must also adjust it with the value from the #bg_commentblock section. So, if you change the first value from 100% to 80%, you must also replace the value 90% with 70%, and so on.
Okay, that's it for now. Any trouble applying this tutorial on your blog, just ask me, leave your question here, and who knows, i can give a better solution for that.
Good luck Bloggers!