Note For Indian Visitors

Due to the ban on adf.ly in india, Indian users will not be able to view the links directly. To access the links, kindly put https:// before the adf.ly urls OR replace adf.ly with v1.adf.ly to open download links in my site.

Add About The Author Box Below Blog Post

Add About The Author Box Below Blog Post
Hi friends, having an author bio is a cool way to tell the visitors abut the author of the blog posts. There are so many ways to add the author box below the blog posts, and you can make the box more attractive by using CSS codes with it. So many bloggers keep this widget to tell the visitors about themselves. Having an author box is very important, because people love to know about the person behind the blog. It will also help those bloggers who have more than one authors writing for their blogs. An author box can include information such as the author's name, a short biography about the author and a small thumbnail picture of the author. Remember that author box will not show on home page with post summery. It will only shows up at the bottom of full blog post which is really nice. So, in this article I’m going to show you how to add "Author Box" for your Blogger Blog. Follow the steps below:
> Login to your blogger account.
> Now go to Template > Edit HTML > Proceed > Expand Widget Templates.
> Now, search for ]]></b:skin> code in your blogger template. (You can find by pressing ctrl+F keys)
> Just above the ]]></b:skin>, paste this code:
.thenextgeneration-jr img {
margin:0;
border:0;
}
.thenextgeneration-jr-about {
font-size:12px;
margin:0 auto;
padding:10px;
width:auto;
background:#E4E4E4;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-webkit-box-shadow:inset #222 0 2px 8px;-moz-box-shadow:inset #222 0 2px 7px;width:auto;text-shadow:1px 0 0 #fff;margin:0 0 5px;padding:10px
border:#BBBBBB solid 1px;
min-height:130px;
}
.thenextgeneration-jr {
padding-top:10px;
margin:0;
font-size:12px;
float:left;
width:17%;
text-align:center;
border-right:#063584 solid 1px;
}
.thenextgeneration-jr-text {
float:right;
width: 80%;
padding:5px;
text-align:left;
font:12px arial,sans-serif;
text-align:justify;
margin:0;
padding:0;
}
> After pasting this CSS Code, click SAVE TEMPLATE.

You are done with the CSS code. Now let's see how to use the box manually with the blog posts:
As the title suggested, everytime you will post, you will manually insert the author box. Here are the steps you must follow in order to succesfully put the author box.
> While editing your blog posts, switch to html editing mode.
> Now copy and paste this code below your blog post:
<!-- /Display "About the Author" Box below Blogger Post by: www.ashutoshthehacker.blogspot.com -->
<div class='thenextgeneration-jr-about'>
<div class='thenextgeneration-jr'>
<img height='80' src='GUEST-AUTHOR-IMAGE-LINK' width='80'/> <span style='font-family: Arial,Helvetica,sans-serif;'><b>GUEST-AUTHOR-NAME</b> (Author) </span></div>
<div class='thenextgeneration-jr-text'>
<span style='font-size: large;'><b><span style='font-family: Arial,Helvetica,sans-serif;'>About Guest Author: </span></b></span><br/><br />ADD-DESCRIPTION-ABOUT-AUTHOR-INFO-HERE</p>
</div>
</div>
> Now, replace the highlighted text with your own text.
> Click PUBLISH and check your published post.

If you want About The Author box to be published automatically with each blog post, then use the method below:
> Login to your blogger account.
> Now go to Template > Edit HTML > Proceed > Expand Widget Templates.
> Now, search for <data:post.body/> code in your blogger template. (You can find by pressing ctrl+F keys)
> Just after the <data:post.body/>, paste this code:
<!-- /Display "About the Author" Box below Blogger Post by: www.ashutoshthehacker.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<div class='thenextgeneration-jr-about'>
<div class='thenextgeneration-jr'>
<img height='80' src='GUEST-AUTHOR-IMAGE-LINK' width='80'/> <span style='font-family: Arial,Helvetica,sans-serif;'><b>GUEST-AUTHOR-NAME</b> (Author) </span></div>
<div class='thenextgeneration-jr-text'>
<span style='font-size: large;'><b><span style='font-family: Arial,Helvetica,sans-serif;'>About Guest Author: </span></b></span><br/><br />ADD-DESCRIPTION-ABOUT-AUTHOR-INFO-HERE</p>
  </div>
</div>
</b:if>
<!-- /End "About the Author" Box below Blogger Post by: www.ashutoshthehacker.blogspot.com -->
> Replace the highlighted text with your own text and then click SAVE TEMPLATE.
> Now you are done.
Keep visiting for more tips and tricks. Subscribe to my updates by entering your mail id in the box below.

0 comments:

Post a Comment

Download Our Android App

download our android app

Online Reputation

ashutoshthehacker.com Webutation

Site Protected..!! Don't Copy

Contact Form

Name

Email *

Message *