Aug 1, 2016

Responsive Multi-Author Bio Box Widget! Add to Blogger Posts

Responsive & Stylish Multi-Author Bio (Info) Box Widget for Blogger
Wondering How To Add A Multi-Author Bio (Info) Box Widget to Blogger? Your Blogger Blog Needs Multiple Author Bio Box Widget? So today we are going to share a Multi-Author Info Box Widget for blogspot users. The author bio box allows you to display relevant information about the post author. Author boxes are great for connecting with your readers and providing a sense of credibility to your site.

Multi-Author Bio (Info) Box Widget for Blogger Post! Responsive & Stylish Version

Multi Author box will be visible just & at the end of the article/posts or you can say just above the post footer. Now days there are lot's of trick to install multiple author gadget plugin in blogger template but we have tried our best to make it as much simple as possible hope you guys will like it.

Benefits of This Author Info Box

  1. Blogger's Default Author Info Box.
  2. Make it Responsive and Stylish.
  3. Include Social Following Buttons.
  4. Showing Automatically Multiple Authors Bio on their posts.
  5. Neat & Clean.
  6. Fast Loading.

Why We Need A Multi-Author Bio Box in Blogger?

The author boxes are the best way to tell users that who is actually behind this content and it is the best way for readers to interact with authors. It also helps authors to gain reputation from users and also helps in achieving personal success.

This is Multi-Author Bio Box widget, so if you have multiple authors writing content on your blog, then this widget/code will display their author box automatically in their posts. It means the author will not have to add his/her code manually into their HTML section of the blog post.

You can see live demo of this widget going through below demo button.

Now, If you want to add it on your blogger blog then follow all steps which is given below.

How To Add Multi-Author Bio Box Widget in Blogger?

  • Go To Blogger >> Blog Posts >> Edit and you will see a list of different options as it is shown in the screenshot below.
Layout setting for Blogger Post Author Box

  • Now Scroll down to "Show Author Profile Below Post" and tick the check box right next to it and after this simply click on save button to save this setting.
Show author profile below post setting in blogger

  • Now, Go TO Blogger Template >> Edit HTML >> search for  ]]></b:skin> tag and just above of it paste following CSS Code.
 /***Multi-Author Bio (Info) Box Widget By :***/
.author-profile-bottom .left { width:32%; font-family:Poppins, Roboto, Arial, sans-serif; letter-spacing:-1px; color:#111; float:left; } .author-profile-bottom a { text-decoration:none; color:#ff0066; } .author-profile-bottom .right { width:50%; font-family:roboto; font-size:17px; line-height:22px; color:#7d7d7d; float:left; margin-top:30px; margin-left:-18%; } .author-profile-bottom { float:left; width:100%; background:#f0f0f0; margin:0 0 25px; padding:10px; border:2px solid #ff0066; border-radius:30px; } .author-profile-bottom .left li { display:block; width:auto; font-size:20px; line-height:21px; font-weight:600; margin-bottom:1px; color:#3a3a3a; } .author-profile-bottom .left img { float:right; margin-right:150px; width:80px; border-radius:50%; margin-top:5px; } .social_profiles1:before{content: " Follow Us "; color:#fff; font-weight:bold; font-size:20px; z-index: 10; top: -30px; right: 80px; position: relative; overflow: hidden; } .social_profiles1 { line-height: 1.2em; display: table; float: right; margin: 0px auto; text-align: center; min-width: 160px; padding: 5px 0px; border-top:30px solid #ff0066; position:relative; } .social_profiles1 a:hover { color: #FFF; background-color: #444; border-color: #FFF; } .social_profiles1 a { color: #fff; margin: 0px 5px; text-align: center; float: left; display: table; padding: 15px 5px; background-color: #ff0066; border-radius: 50px 0px 50px 0px; border: 2px solid #fff; width: 20px; height: 20px; line-height: 0; font-size: 20px; margin-top:10px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } @media screen and (max-width:768px){ .author-profile-bottom .left { width:35%;} .author-profile-bottom .right { width:48%; margin-left:-145px;} .author-profile-bottom .left img {margin-right:150px;} } @media screen and (max-width:500px){ .author-profile-bottom .left { width:85%;} .author-profile-bottom .right { width:77%; margin-left:-255px;} .author-profile-bottom .left img {margin-right:270px;} .social_profiles1 { float: left; margin-top:10px; margin-left:100px; }} @media screen and (max-width:480px){ .author-profile-bottom .left { width:85%;} .author-profile-bottom .right { width:75%; margin-left:-235px;} .author-profile-bottom .left img {margin-right:240px;} .social_profiles1 { margin-left:100px; }} @media screen and (max-width:420px){ .author-profile-bottom .left { width:85%;} .author-profile-bottom .right { width:75%; margin-left:-205px;} .author-profile-bottom .left img {margin-right:210px;} .social_profiles1 { margin-left:50px; }} @media screen and (max-width:360px){ .author-profile-bottom .left { width:95%;} .author-profile-bottom .right { width:100%; margin-top:-.1px;margin-left:-.1px;} .author-profile-bottom .left img {margin-right:175px; } .social_profiles1 { margin-left:10px;} }}
  • Now again search for <div class='post-footer'> and just above it paste the following HTML code. 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.authorAboutMe'>
<div class='author-profile-bottom' itemprop='author' itemscope='itemscope' itemtype=''>
 <div class='left'>
<li>Written by: <a class='g-profile' expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' title='author profile'>
 <span itemprop='name'><></span>
<b:if cond='data:post.authorPhoto.url'>
 <img expr:src='data:post.authorPhoto.url' itemprop='image'/>
<div class='right'>
<span itemprop='description'><data:post.authorAboutMe/></span>
<div class='social_profiles1'>
<a href='' rel='nofollow' target='_blank' title='Join on Facebook'><i class='fa fa-facebook'/></a>
<a href='' rel='nofollow' target='_blank' title='Follow on Twitter'><i class='fa fa-twitter'/></a>
<a href='' rel='nofollow' target='_blank' title='Follow on Google+'><i class='fa fa-google-plus'/></a>
<a href='' rel='nofollow' target='_blank' title='Follow on Pinterest'><i class='fa fa-pinterest'/></a>

Note: Make sure to add this HTML code above each <div class='post-footer'> tag you find in Blogger Template editor.

Required Editing and above HTML Code

  1. Change All Social Profile Links with your Social Profile links.
  • Now, once again search for <head> tag and paste below FontAwesome stylesheet code just below of <head>, because we are using FontAwesome icons in this author box's following social icons.
 <link href='' rel='stylesheet'/>
  • Now, simply save the template.
Note: This widget takes the information from your Blogger Profile or Google Plus Profile so it is important for you to completely setup your blogger profile. For setup follow below steps.

Blogger Profile Setup

  • Login to Blogger >> Click On This Link.
  • Upload A Profile photo, write a small introduction about yourself and make your profile visible to the public.
  • Now Click on Save button which is located at the bottom of the page.
  • That's it. Now, open your blog and see it live on your blog.

Blogger Profile Editing for Multi Author Bio Box

Recommended Blogger Guides & Widgets

  1. How To Add AdSense Page-level Ads in Blogger for Mobile View
  2. How To Add Materialized Ripple Effect on Blogger Elements
  3. How To Add Sitelinks to Google Search Result for your Blog/Website
  4. Stylish Contact Form For Blogger! Add to Static Page, Responsive & Pro Version.
  5. Cute & Stylish Email Popup Subscription Widget.


So above guide is about How To Add A Multi-Author Info Box Widget to Blogger Blog? We hope by this guide you have added this to your blogger blog. If anyhow problem persist after following all steps then drop a comment below by using comment box. Do Share.
Thank You! Stay Blessed!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.