How To Add Author Box In Blogger Without Editing HTML Code ?
One of the main reason for WordPress preference for many bloggers is because of the unlimited plugins available for almost everything that you may need in your blog. One such plugin is “Author Box”, which is available for free in WordPress, but not available in blogger platform. So what? Lets create one !I don’t like the idea of editing the HTML code every time you add a widget or functionality to your blog. Because,
- Not everyone is familiar with editing HTML – highly error prone for non-techies.
- You need to redo all the editing, when you change the template – not flexible with changes.
- Quite impossible to keep track of all the changes done in HTML. Over the period of time, you might have edited the HTML so many times.
I am going to show you the workaround to create “Author Box” in blogger platform without editing the HTML code. With me? Here you go !
- Go to the blogger dashboardand select the blog for which you want to add the “Author Box”.
- Click “Template” the left navigation and then click “Customize” button.
- Go to “Advanced” and select “Add CSS“.
- Copy the below CSS code into “Add custom CSS” box, click “Apply to Blog” button and then click “Back to Blogger” link.
.author-box { background:#F4F4F4; margin:0 0 40px 0; padding:10px; border:1px solid #DDD; overflow:hidden } .author-box img { background:#FFF !important;float:left; margin:0 10px 0 0; padding:4px; border:1px solid #DDD } - Click “Settings” and then “Posts and Comments“.
- Add the below HTML code into “Post Template” box and click “Save Settings” button.
<div class="author-box"> <div> <img height="100" width="100" src="YOUR_PICTURE_URL_PREFERABLY_SQUARE_PIC" /> <strong>About the author</strong><br />DESCRIPTION_ABOUT_YOURSELF_PREFERABLY_WITHIN_4_LINES</div> </div>
- Remember to change the URL to your picture and the description about yourself.
- Click “New post”. You will see that the “Author box” is added be default to your blog post. The Author Box will not look good while composing (CSS styles are not yet applied), but you can see it properly in the Preview or when you publish the post.
- You can change the look and feel of your “Author Box” as you wish (provided resources for learning CSS). Since our HTML code is only in blog posts, please feel to change as much as you like.
- You are done. Enjoy !
Resources for your learning:
CSS stands for Cascading Style Sheets. Its used to beautify the HTML code with different styles. You can learn almost everything about CSS in less than 30 mins. Trust me. Its that easy ! Please check out the CSS tutorials @ w3schools.com. HTML tutorials are also available in w3schools. I personally used this website to learn most of the web technologies. Its short and simple.
This is a guest post by Prem Kumar Masilamani from SmilePrem.com, If you would like to write for The Technology Feed, check our guest posting guidelines.








Its a honor to write in a young entrepreneur’s website. I wish your reader’s count grows exponentially and I am happy to be a part of it

Premkumar recently posted…I Have A Dream ::: Book Review
You’re always welcome here


Thanks a lot for your comment, visit and guest post
Hope to see you here soon.
Keep rocking !
Bala Krishna recently posted…How To Add Author Box In Blogger Without Editing HTML Code ?
I got it but do you know how to add this to existing posts?