Insert "About the Author" Box Below All Post in Blogger

For a Blogger its very important to tell the his audience who is the author of the blog and "About the Author" is the best & most successful way to make awareness among the users who is the behind the success of this blog.

You have seen many WordPress blog which has About the Author Widget below every post.So I Thought why our Blogger users remains behind therefore today we will Add "About the Author" Box At the End of Each Blogger Post. 

I am certain that you will love to preview About the Author Widget so Here it goes

Preview "About The Author Widget For Blogger"

How To Get Started:

• Go to Blogger.com >> Template >> Edit HTML >> Proceed
• Search For ]]></b:skin> and just above it Place the following CSS styles

.MBL-About-Us {

margin-bottom:10px; height:180px; background:#FFFADF; padding:10px; border:1px solid #FFD324; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-shadow: 2px 2px 2px #CCCCCC;

}

.MBL-About-Us p {

color:#666; text-align:justify;

}

/*.MBL-About-Us p a {

color:#666; text-decoration:underline;

}

.MBL-About-Us p a:hover {

color:#ddd; text-decoration:none;

}*/

Customization:  

I have kept all the Css Editable so you can customize it according to your template style.

• To change background color of the Author Box Replace #FFFADF 
• To change border color Replace #FFD324 

Now Save the Template make sure the template is error free.Now check (Tick) Expand the widget and search for  this line <div class='post-footer-line post-footer-line-1'/> You can search intently with (CTRL+F).After you find the line paste the following code just under the line

<br /><div class="MBL-About-Us"><img align="left" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCSjAxSBMZdcD5FkCo0B17H93QIaGcVnh8ba-al_tPe2xlD71LuuWRO-Y4UDepfvIR2ifRfHcpzHG8hFNvY75IB5bhLOx9cvsvmiLV8vY7gOFnuRuFcZeWYzcYnHLI-wneYxhUENUQrno/s1600/Faizan.jpg" style="border-right-color: rgb(255, 211, 36); border-right-style: solid; border-right-width: 1px; margin-bottom: 20px; margin-left: 0px; margin-right: 10px; margin-top: 10px; padding-bottom: 20px; padding-left: 0px; padding-right: 10px; padding-top: 10px;" /><br /><span style="font-family: Verdana, sans-serif;">Your Authors Details Here</span></div></div>

Customization:  

1.To Insert Your Author's Image simply Replace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCSjAxSBMZdcD5FkCo0B17H93QIaGcVnh8ba-al_tPe2xlD71LuuWRO-Y4UDepfvIR2ifRfHcpzHG8hFNvY75IB5bhLOx9cvsvmiLV8vY7gOFnuRuFcZeWYzcYnHLI-wneYxhUENUQrno/s1600/Faizan.jpg with your image.

2.To Insert Details about the Author Replace Your Authors Detail Here
3.To Change the text style replace Verdana

After Customizing your Author box according to your need simple Save the Template and now you will be able to see "About the Author box" below all blogger posts.

Credits:  

All the credits goes to MybloggerTricks.com and Mustafa Sir he had coded this brilliant style.I have just optimized it for you.If you have any difficulties in this or any other topics feel free to ask till then Peace Blessings and Happy Optimizing  

SHARES

Share

Pin it

Tweet

Share

Share

Share

Buffer

Print

Insert "About the Author" Box Below All Post in Blogger

4/ 5

By Editorial Board

Posted By Editorial Team On March 27, 2012 Comment