August 13, 2011

How To Add Author info Widget in Blogger

How To Add Author info Widget in Blogger

1.Log in to your dashboard-->Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this: ]]></b:skin> Tag.

4.Copy below code and put it before ]]></b:skin>

.author_info {
float: left;
width: 533px;                 /* Set Width of Widget As you want */
padding: 10px;
border: 1px solid #a1cb26;    /* Border of Widget */
margin-bottom: 15px;
margin-top: 15px;
background: #F0FDC6;          /* Background Color of Widget*/
.author_info h3 {
color:#001530;                /* Text color of "This Post is Written" by */
margin-bottom: 5px;
.author_photo {
float: left;
margin: 0 10px 0 5px;
.author_photo img {
border: 3px solid #ccc;       /* Border color of Image*/
 height: 100px; width:100px;  /*Height and Width of Avatar of Author */

5.Now Scroll down to where you see this: <data:post.body/>

6.Add Following code after <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author_info'>
<div class='author_photo'>
<img alt='author' src=''/></div>
<h3>This post is written by:<a href=''>Sameera</a> </h3>

<p>I am Sameera and write trick and tips on blogger, wordpress and different hacks. <a href=''>Click Here</a> to Know more about Author.</p><p>If you like This post, you can follow on <a href=''><b>Twitter</b></a> or Be fan on <a href='' target='_blank'><b>Facebook</b></a>.</p>


Note: Change Read color to with your content and change green color to your prefered Text.

7. Click Save Template and you are almost done.


No comments:

Post a Comment