If you lot are looking for a professional multiple writer information box widget for blogger, in addition to so today i come upwards up amongst the writer box widget that you lot must convey inward improver to growth your weblog blueprint in addition to authority. it volition looks really attractive at the halt of your weblog posts. This writer box displays the writer name, Short description in addition to 3 social media icons.
After finished reading article, many readers fifty-fifty i am seek to abide by out who is the writer of behind this article in addition to what are the other articles written past times that author.
They desire to connect in addition to interact amongst you lot or they desire to follow you lot on diverse social media networking sites to acquire 2nd updates from your blog. thus i convey coded this elementary in addition to professional writer box for blogger.
This widget automatically fetch your Google Plus information similar profile image, introduction so you lot don't convey to add together additional information for you lot in addition to your invitee author.
In the tutorial you lot are going to larn how to add together multiple writer box widget inward blogger below every weblog post.
Professional Multiple Author Box Features
- Multiple Authors Support
- Auto From Google Plus
- Professional Look
- Responsive Design
- Short Code (doesn't touching on on your weblog loading speed)
- Simple CSS Design
- Very Easy To Install & Customization
- Suits To Your Template
Adding Multiple Author Info Box Widget In Blogger
Note: To live on the condom side, Please dorsum upwards your Blogger template earlier making whatever changes.
Step 1: Go to your blogger dashboard >> Template >> Edit HTML:
Step 2: Search for ]]></b:skin> the next code past times pressing Ctrl+F
Step 2: Search for ]]></b:skin> the next code past times pressing Ctrl+F
[/* Multiple Author Box CSS Code*/
.authorboxwrap{background:#fff;margin:10px car 20px;padding:20px;overflow:hidden;border-top:4px enterprise #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 abide by <div class='post-footer'> in addition to but higher upwards it glue the next slice 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 in addition to Google Plus links inward higher upwards code in addition to lastly relieve template.
Customizing Google Plus Profile
1) Go to your Google Plus Profile About>>Click edit on storey Section in addition to add together your brusk introduction every bit shown inward below image.
2) Click on "Save" button.
3) Now nosotros bespeak to activate "Show Author profile widget". Go to Blogger >> Layout >> Blog Posts >> Edit in addition to immediately scroll downwards in addition to tick score the "Show Author Profile below post" selection every bit shown inward below image.
4) Now relieve this widget.and encounter the result.
Try It Yourself
I promise this tutorial volition brand slow for you lot to add together multiple writer information box widget inward blogger. Try this widget on your weblog in addition to allow me know how it works.
If you lot are facing whatever type of work land installing this widget experience gratis in addition to drib your questions inward below comment section. I would similar to aid you lot out. Happy Blogging :)
Comments