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

Advertisements
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


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="http://1.bp.blogspot.com/-qYrjQEFk7WU/T3BIfrE5ASI/AAAAAAAABCM/QfbICDlDHAA/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 http://1.bp.blogspot.com/-qYrjQEFk7WU/T3BIfrE5ASI/AAAAAAAABCM/QfbICDlDHAA/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  
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

9 comments

March 27, 2012 at 6:52 AM

Bro can i have a link of your template?

March 27, 2012 at 6:54 AM

Sorry it is for personal use only :)

April 13, 2012 at 5:58 AM

How do you post your codes in a display box? Can you give me code for a similar one please?

April 13, 2012 at 11:26 AM

@Parigyan Tamuly

Go To Blogger.com >> Template >> Edit Html >> Proceed
Search For ]]></b:skin>
When You Find it Just Above it Paste the Following Code

.post blockquote {
background: #F2F1F1 url(http://1.bp.blogspot.com/-MYMdvPfVSJA/Tw6DgiNU_eI/AAAAAAAAAus/HwHL3EPqoH8/s1600/1.gif);
background-position:top left;
background-repeat:repeat-y;
margin: 0 20px;
padding: 10px 20px 10px 45px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
font-size: 0.9em;
}

.post blockquote p {
margin: 0;
padding: 0 0 15px;
}

Now When You are creating a new post just use the quote button to insert the html codes and the preview would be same as we have in here at MyBloggerLab.com

July 4, 2012 at 12:12 AM

Hello brother,
I need your help.I paste the second code
then see a error report..

Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "b:includable" must be terminated by the matching end-tag "".

Error 500

Please help me bro....

Editorial Team MOD
July 4, 2012 at 6:21 AM

@Sarath S Pillai
Brother, you are either not following the process or you are pasting the Second code not at the right Place this is the reason why you are getting Error i.e. "b:includable" this is happens when b:includable is not end with its ending tag. Try to Follow the Steps correctly. However, if you face the same error Send your Template @ contact.mybloggerlab.com we will Edit it for you. Peace

July 6, 2012 at 7:36 AM

Brother,
thanks for reply. I add this code correctly. Thanks for your help and tutorial.
I have a doubt, how to apply CSS transition effect to drop down menu. I mean, your drop down menu style. Please help and support...

thanks
Sarath

July 8, 2012 at 11:22 PM

Hello brother,
Please reply. How to apply css transition effect in drop down menu.
pls reply

sarath
sarathparavur007@gmail.com

Editorial Team MOD
July 9, 2012 at 12:43 AM

@Sarath S Pillai
Brother we have already Shared a CSS3 Drop Down Menu Check it out. http://www.mybloggerlab.com/2012/05/animated-css3-multi-drop-down-menu-for.html

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2014. MBL Networks, All Rights are Strictly Reserved.