How To Add Multiple Author Info Box Widget In Blogger Posts

Professional Author Box For Blogger

If you are looking for a professional multiple author info box widget for blogger, then today i come up with the author box widget that you must have in addition to increase your blog design and authority. it will looks very attractive at the end of your blog posts. This author box displays the author name, Short description and three social media icons.

After finished reading article, many readers even i am try to find out who is the author of behind this article and what are the other articles written by that author. 

They want to connect and interact with you or they want to follow you on various social media networking sites to get instant updates from your blog.  therefore i have coded this simple and professional author box for blogger.

This widget automatically fetch your Google Plus info like profile image, introduction so you don't have to add additional info for you and your guest author.

In the tutorial you are going to learn how to add multiple author box widget in blogger below every blog post.

Professional Multiple Author Box Features

 

  • Multiple Authors Support
  • Auto From Google Plus
  • Professional Look
  • Responsive Design 
  • Short Code (doesn't affect on your blog loading speed)
  • Simple CSS Design
  • Very Easy To Install & Customization
  • Suits To Your Template

 

Adding Multiple Author Info Box Widget In Blogger

 

 Note:  To be on the safe side, Please back up your Blogger template before making any changes.

Step 1: Go to your blogger dashboard >> Template >> Edit HTML:

Step 2: Search for ]]></b:skin> the following code by pressing Ctrl+F  

Step 3: Now just before/above this code add following CSS code.

 [/* Multiple Author Box CSS Code*/
.authorboxwrap{background:#fff;margin:10px auto 20px;padding:20px;overflow:hidden;border-top:4px solid #bdc3c7;}
.avatar-container{float:left;padding:10px;margin:0 20px 0 0;background:rgba(0,0,0,0.07);border-radius:100%}
.avatar-container img{width:90px;height:auto;max-width:100%!important;border-radius:100%;transition:all .3s;}
.avatar-container img:hover{transform:rotate(-15deg)}
.author_description_container h4{font-size:18px;font-weight:600;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#333}
.author_description_container p{margin:0;color:#333;font-size:16px;margin-bottom:8px;line-height:25px;font-weight:400}
.social-links li{list-style:none!important;float:left}
.social-links a{border-bottom:none}
.social-links a:after,.social-links a:before{content:none!important}
.social-links li a{background:rgba(0,0,0,0.5);color:#fff;font-size:13px;text-align:center;display:inline-block;padding:0;margin:0 10px 0 0;width:30px;height:30px;line-height:30px;border-radius:100%}
.social-links li:nth-child(1) a{background:#516ca4;}
.social-links li:nth-child(2) a{background:#00c3f3;}
.social-links li:nth-child(3) a{background:#f20000;}
.social-links li a:hover{opacity:.9;color:#fff}
/* Multiple Author Box CSS Code*/]

Step 4: Now find <div class='post-footer'> and just above it paste the following piece of HTML code.

[<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='90' width='90'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a>
<i class='fa fa-check-circle' style='color:rgb(17,143,249);font-size:14px;' title='Verified Author'/></h4>
<p><data:post.authorAboutMe/><b/>
</p>
<div class='social-links'>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>]

Step 5:  Add Facebook, Twitter and Google Plus links in above code and finally save template.

Customizing Google Plus Profile  


1) Go to your Google Plus Profile About>>Click edit on story Section and add your short introduction as shown in below image.


2) Click on "Save" button. 

3) Now we need to activate  "Show Author profile widget". Go to Blogger >> Layout >> Blog Posts >> Edit and now scroll down and tick mark the "Show Author Profile below post" option as shown in below image. 


4) Now save this widget.and see the result.

Try It Yourself


I hope this tutorial will make easy for you to add multiple author info box widget in blogger. Try this widget  on your blog and let me know how it works.

If you are facing any type of problem while installing this widget feel free and drop your questions in below comment section. I would like to help you out. Happy Blogging :)

COMMENTS

BLOGGER: 6
Loading...


Name

404 Alexa Alexa Ranking Backlink Blockquote Blogger Blogger Templates Blogger Tricks Blogger Tutorials Blogger Widgets Blogging Mistakes Blogging Tips CSS Download How To Image Optimization Infographics Internet Make Money Online Plagiarism Plagiarism Checker Privacy Policy redirection SEO SEO Tips Social Media Tools Traffic Tips WordPress YouTube
false
ltr
item
Shoutersclub : How To Add Multiple Author Info Box Widget In Blogger Posts
How To Add Multiple Author Info Box Widget In Blogger Posts
If you are looking for a professional multiple author info box widget for blogger, then today i come up with the author box widget that you must have in addition to increase your blog design and authority.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEZF3zzZXyVud2Ym-0E6LFThPlOuCgUf_BefT43xo9VY6gVIEvoW8-_FJqAssChu_WQnuc_6fUrOqZ3zEU9FRA7FHZt48GC90GNtsKAIFBtEDkadc3J7UqP0IGMKOHRyNIA8cnxUS3xLKu/s1600/Professional+Author+Box+For+Blogger.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEZF3zzZXyVud2Ym-0E6LFThPlOuCgUf_BefT43xo9VY6gVIEvoW8-_FJqAssChu_WQnuc_6fUrOqZ3zEU9FRA7FHZt48GC90GNtsKAIFBtEDkadc3J7UqP0IGMKOHRyNIA8cnxUS3xLKu/s72-c/Professional+Author+Box+For+Blogger.jpg
Shoutersclub
https://shoutersclub.blogspot.com/2016/07/multiple-author-info-box-for-blogger.html
https://shoutersclub.blogspot.com/
https://shoutersclub.blogspot.com/
https://shoutersclub.blogspot.com/2016/07/multiple-author-info-box-for-blogger.html
true
8381117760632491081
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy