Best Blogger Author Bio Box widget - Seoclive

Recent Posts

Best Blogger Author Bio Box widget


Best Blogger Author Bio Box

To begin with, what do I mean by an author bio box Widget field? A author bio field is an space on the backside of your post that describes who the author of the content is. They sometimes comprise a profile image, you username, and an outline about you. To maintain issues easy on this tutorial, we’re not going to incorporate social media hyperlinks or tabs. Lets make the bellow Author Bio Box Together.

Best Blogger Author Bio Box bellow post
 The Author bio Box Above has a responsive look. To have a bio box is a requirement for SEO. You may have increase in ranking by involving guest writer since search engines know that the content is generated form many sources.  The bellow are the various step to step procedure to add the author bio box to your blogger template. Improve your page franking today.

How To Add Blogger Author Bio Widget.

Step #1. Go to your Blogger Dashboard and Choose a blog.
Step #2. Now Go To The Lay out section and choose Edit For The post Widget-
Step #3. Once you click the edit button, a new windows will pop up where you’ll be allowed to tick on various option, scroll down and tick the”Show Author’s Profile After the post” option.
Step #4. If you are using a default Blogger template or a modified version of the default template, then you won’t have any problems in getting the author box, just go check any of your posts and you’ll see the Author Box.
Step #5. but, if you are using a custom Blogger template, you’ll have to add some codes to your Blogger template. Go to Template>Edit HTML, then find (use CTRL+F) –
This will pop-up the search box in the upper right corner of your HTML edit box.
You Will Add The CSS and the HTML bellow Using the Steps Below the code.

The Author Bio Box CSS

That is the CSS that makes your creator field all fairly. I’ve set the background of the field to be a lightweight gray, however if you wish to change that, simply search for the #efefef (first line) and alter that worth to a color you need. I’ve additionally included CSS beneath the primary CSS field if you need your creator field to have rounded corners. For those who’re unsure find out how to add CSS.

Step By Step in Adding CSS For Author Bio Box To Your Template.

Step #1. Go to your Blogger Dashboard and Choose a blog.
Step #2. Now Go To The Lay out section and choose Edit For The post Widget-
Step #3. Once you click the edit button, a new windows will pop up where you’ll be allowed to tick on various option, scroll down and tick the”Show Author’s Profile After the post” option.
Step #4. If you are using a default Blogger template or a modified version of the default template, then you won’t have any problems in getting the author box, just go check any of your posts and you’ll see the Author Box.
Step #5. but, if you are using a custom Blogger template, you’ll have to add some codes to your Blogger template. Go to Template>Edit HTML, then find (use CTRL+F) –
This will pop-up the search box in the upper right corner of your HTML edit box.
Search for the bellow code.

 [ ]]></b:skin> ]

Just right before the ABOVE code , copy and paste your CSS code.
 

[ .authorbox {
    background-color: #efefef;
    color: #555;
    padding: 10px 12px;
    min-height: 80px;
    overflow: hidden;
    width: 100%;
    clear: both;
    margin: 20px 0 10px;
}
.authorbox h4{
    font-size: 20px;
    margin: 0 0 2px 0;
}
.authorbox .authorimg {
    display: block;
    float: left;
    width: 100px;
    margin-top: 10px;
}
 
.authorbox .authorimg&gt;img {
    width: 100px;
    max-width: 100% !important;
    border: 0;
    text-shadow: none;
    padding: 0;
}
.authorbox .wraptext {
    margin-left: 116px;
    line-height: 1.5;
} ]

Mayb your blogger blog has rounded features, i got you covered too. Enter the bellow code too to make the Author Bio widget rounded.


.authorbox {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
} ]

The Author Bio Box HTML 

 HTML is the body of the code. The auther profile has style after adding CSS but now lets add some HTML. That is the step the place we’ll add your profile image, name, and outline to the HTML under. I’ve written in all caps the place you need to place your textual content. Don’t delete any of the larger than or lower than indicators and be sure you don’t delete any of the double or single quotes.'

Items to include in the below HTML field:
1. Profile image link
2. your name
3. The description about you

Step By Step in Adding HTML For Author Bio Box To Your Template.

Step #1. Go to your Blogger Dashboard and Choose a blog.
Step #2. Now Go To The Lay out section and choose Edit For The post Widget-
Step #3. Once you click the edit button, a new windows will pop up where you’ll be allowed to tick on various option, scroll down and tick the”Show Author’s Profile After the post” option.
Step #4. If you are using a default Blogger template or a modified version of the default template, then you won’t have any problems in getting the author box, just go check any of your posts and you’ll see the Author Box.
Step #5. but, if you are using a custom Blogger template, you’ll have to add some codes to your Blogger template. Go to Template>Edit HTML, then find (use CTRL+F) –
This will pop-up the search box in the upper right corner of your HTML edit box.
Search for the bellow code.

<div class='post-footer'> ]
If you search for the above code and don't find it then your template uses two question marks as below so copy the bellow code instead and press enter.
[ <div class="post-footer"> ]

Press on the enter button twice so it can take you to the next post footer code. The step is well illustrated by the image bellow . 
Simply place your cursor proper BEFORE that post-footer tag and paste in your writer field HTML. Right here is how my code modified after inserting within the writer field

Step By Step in Adding CSS For Author Bio Box To Your Template.

[ <b:if cond='data:blog.pageType == "item"'>
<div class="authorbox">
<div class="authorimg">
<img src="LINK" alt="author image" />
</div>
<div class="wraptext">
<h4>NAME</h4>
<div class="authordesc">
DESCRIPTION (AROUND 50 WORDS)
</div></div></div>
</b:if> ]

Author Bio Box Widget Setup For Guest Bloggers In Blogger.

You may be having  a website that you don't just write alone. You will need to include the bio box of each and every guest writer so it can appear below every post content that the writer has written. By so doing , you will need to have a code that can generate the bio box when a guest writer publishes the content. lets go to the setup of adding the separate entity writing author bio box widget configuration for blogger blog.
Items to to include in the below guest writing HTML :
1. username
2. image link
3. your name
4. description about you

[ <b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "USERNAME"'>
<div class="authorbox">
<div class="authorimg">
<img src="LINK" alt="author image" />
</div>
<div class="wraptext">
<h4>NAME</h4>
<div class="authordesc">
DESCRIPTION (AROUND 50 WORDS)
</div></div></div>
</b:if></b:if> ]

Thank You for being Part of this good article. Use the Author box provided today and tell me about the experience. I hope that i have impacted some good SEO information that can help you Design your Blogger Blog Best for ranking. In-case you face any difficulty while implementing the following fields please reach me by Commenting bellow Or Contact Me.

No comments

Powered by Blogger.