How To Add Multiple Author Info Box Widget In Blogger Posts
Posted by Title : How To Add Multiple Author Info Box Widget In Blogger Posts
link : 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. 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 2: Search for ]]></b:skin> the following code by pressing Ctrl+F
[/* 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 == "item"'>
<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 :)
Thus the article How To Add Multiple Author Info Box Widget In Blogger Posts
That's the article How To Add Multiple Author Info Box Widget In Blogger Posts this time, hopefully it can be of benefit to all of you. well, see you in another article post.
You are now reading the article How To Add Multiple Author Info Box Widget In Blogger Posts with the link address https://poccoll.blogspot.com/2016/07/how-to-add-multiple-author-info-box.html
No comments: