After much trial and error, I finally prepared an Author Bio data Box to display on my post and static pages. There are no shortages of tutorials giving great info on preparing author boxes; however my first priorities were to ensure that the Author Box was fast loading, did not contain any external URL and consume resources. In this post I am giving a step by step tutorial on how to prepare an Author Bio-data box for your Blogger Blog.
In the script given below you have to replace the colored lines with your image URL, Bio-data and Feed burner script. To get you Feed burner script go to – MY FEEDS – PUBLICIZE – EMAIL SUBSCRIPTIONS and replace the script in yellow color with your own script.
<b:if cond=’data:blog.url == data:post.url’>
<div class=’author-box’>
<p><img alt=” class=’avatar avatar-70 photo’ height=’70’ src=’http://lh6.googleusercontent.com/-E7QzXAHVaG8/AAAAAAAAAAI/AAAAAAAAAF0/IxhaZoApz2k/s512-c/photo.jpg ‘ width=’70’/><b>Sujata Virendra</b><br/>
<div style=’text-align: justify; font-family: verdana; color: rgb(0, 0, 0);’> Sujata is the founder of Royalchef.info. She gives simplified recipes on most styles of cooking with a focus on Indian Cuisine to help and guide the new homemaker through her easy to understand and implement method of cooking.
<br/>
<p style=’margin:-8px 0′><br/><center>
<form style=”border:1px solid #ccc;padding:3px;text-align:center;” action=”http://feedburner.google.com/fb/a/mailverify” method=”post” target=”popupwindow” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=Royalchef’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true”><p>For daily recipes enter you Email Address</p><p><input type=”text” style=”width:140px” name=”email”/></p><input type=”hidden” value=”Royalchef” name=”uri”/><input type=”hidden” name=”loc” value=”en_US”/><input type=”submit” value=”Subscribe” /><p></p></form>
</center>
</p></div></p>
</div>
</b:if>
You can change the width by replacing the default value of 140 by your desired value. The same way you can replace the words” For daily recipes enter your email address “ and Subscribe with your desired script.
If you want to display the Box on Posts pages only and not both post and static pages replace the first line-
<b:if cond=’data:blog.url == data:post.url’>
With this line
<b:if cond=’data:blog.pageType == "item"’>This done go to your DASHBOARD – TEMPLATE – EDIT HTML and click from the top menu click on BLOG1 find POSTS INCLUDABLE there you will find this script –
<div class=’post-footer-line post-footer-line-1′>
Copy paste your created code immediately below this line.
The second part is optional, if you want your Author Biodata Box to resemble mine. Copy paste this CSS above the line –
}]]></b:skin>
.author-box {
font: normal normal 12px Ariel;
background: #F7F7F7;
margin: 20px 0 40px 0;
padding: 10px;
border: 2px solid #E6E6E6;
overflow: auto;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 2px solid #E6E6E6;
Save your template and you are done. Remember to save and backup your template before editing it.
