Author Information Widget for Blogger ~ Easy HTML Tricks for Blogging

We all had seen author info widget below each post on Wordpress blogs, but actually its not much seen in Blogger. Basically Blogger is not a platform for beginners, its a kinda platform to blog. There are endless possibilities to makes your Blogger blog look like a Wordpress blog. So to make that note true, today I am going to teach you how to add author info widget, below every blog post.

Updated script with author image inside the widget

Step 1: Login to your Blogger dashboard and navigate to Layout > Edit HTML and check the box of expand widget templates. Now search for the code ]]></b:skin> once you find it, replace the code with the below code

`01`	`.author_info {`

`02`	`float:` `left;`

`03`	`width:` `573px;`

`04`	`padding:` `10px;`

`05`	`border:` `1px` `solid` `#ccc;`

`06`	`margin-bottom:` `15px;`

`07`	`margin-top:` `15px;`

`08`	`background:` `#eee;`

09 }

`10`	`.author_info h3` `{`

`11`	`margin-bottom:` `10px;`

12 }

`13`	`.author_photo {`

`14`	`float:` `right;`

`15`	`margin:` `0` `0` `0` `10px;`

16 }

`17`	`.author_photo img {`

`18`	`border:` `1px` `solid` `#666;`

19 }

`20`	`]]></b:skin>`

Step 2: Now we are going to add the div part of the author info widget. To do that search for the code <div class=’post-footer-line post-footer-line-1′>and paste the below code after <div class=’post-footer-line post-footer-line-1′>

`01`	`<b:if cond='data:blog.pageType == "item"'>`

`02`	`<div class='author_info'>`

`03`	`<div class='author_photo'>`

`04`	`<img alt='author'` `src='http://i50.tinypic.com/iw7lec.jpg'/></div>`

`05`	`<h3>This post was written by:</h3>`

06

`07`	`<p><a href='http://franklin.bloggermint.com'` `title='Posts by Franklin'>Franklin Manuel</a> - who has written` `66` `posts on <a href='http://bloggermint.com/'>Bloggermint</a>.</p>`

08

`09`	`<p>Franklin Manuel is a professional blogger and web developer. Follow him on <a href='http://twitter.com/bloggermint'>Twitter</a> or <a href='mailto:bloggermint@gmail.com'>email him</a><br style='clear:both;'/></p>`

10 </div>

11

12 </b:if>

Edit your information according to your needs and you all set done, check your blog to see the changes.