How To Insert "About the Author" Box Below All Post in Blogger
Are you are a blogger and you wish to display about you, as the the Author of the blog, below all your post in Blogger, then this tutorial will show you the simple way to do it. As a Blogger it’s 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.
That all........
Maybe you have seeing it in many Blogger or WordPress blog which has About the Author Widget below every post.
How To Get Started:
1. Go to Blogger.com >> Login with your Username and password >> Navigate to Template >> Click Edit HTML >> Proceed2. Use CTRL F to Search For ]]></b:skin> and just above it Place the following CSS styles
.About the Author {
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;
}
.About the Author p {
color:#666; text-align:justify;
}
/*.About the Author p a {
color:#666; text-decoration:underline;
}
.About the Author p a:hover {
color:#ddd; text-decoration:none;
}*/
Customizing the above CSS code:
You can customize CSS code according to your template style.
To change background color of the Author Box Replace #FFFADF to your colour choice.
To change border color Replace #FFD324 to your colour choice.
3. Now Save the Template .
4. Again use CTRL+F to search for this line <div class='post-footer-line post-footer-line-1'/> After you find the line paste the following code just under the line
<br /><div class="About the Author"><img align="left" src="https://lh3.googleusercontent.com/-xAIafhcIE78/AAAAAAAAAAI/AAAAAAAAAF8/6MsBK4HmQVU/s120-c/photo.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://lh3.googleusercontent.com/-xAIafhcIE78/AAAAAAAAAAI/AAAAAAAAAF8/6MsBK4HmQVU/s120-c/photo.jpg with your image.
2. To Insert Details about the Author Replace Your Authors Detail Here
3. To Change the text style replace Verdana
4. Now 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.
Get more info about blogger here.
That all........
I hope this tutorial have helped you in learning how to Insert "About the Author" Box Below All Post in Blogger. If anyone find any difficulty then don't be shy to make use of the comment box below.
If you liked this guide, please share it with your friends and family.
Post a Comment