The begin with, what do I mean by an author bio box Widget field? An author biofield is a space on the backside of your post that describes who the author of the content is. They sometimes comprise a profile image, your username, and an outline about you. To maintain issues easy on this tutorial, we’re not going to incorporate social media hyperlinks or tabs. Let’s make the below Author Bio Box Together.
The Author bio Box Above has a responsive look. To have a bio box is a requirement for SEO. You may have increased in the ranking by involving guest writers since search engines know that the content is generated from many sources. The below 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 Layout section and choose Edit For The post Widget-
Step #3. Once you click the edit button, a new window 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 below 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 Layout section and choose Edit For The post Widget-
Step #3. Once you click the edit button, a new window 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 below 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>img { width: 100px; max-width: 100% !important; border: 0; text-shadow: none; padding: 0; } .authorbox .wraptext { margin-left: 116px; line-height: 1.5; } Maybe 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 author 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 #1. Go to your Blogger Dashboard and Choose a blog.
Step #2. Now Go To The Layout section and choose Edit For The post Widget-
Step #3. Once you click the edit button, a new window 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 below 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 below.
Simply place your cursor properly BEFORE that post-footer tag and paste it into your writer field HTML. Right here is how my code modified after inserting within the writer field
<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 Blogger
You may be having a website that you don’t just write about 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. let’s go to the setup of adding the separate entity writing author bio box widget configuration for blogger blog.
Items to include in the below guest writing HTML :
1. username
2. image link
3. your name
4. description of 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.