30 May 2017

Add responsive author box on Blogger post

Add simple light blue author box on Blogger post

How to add simple author box widget below on Blogger's post? Author box widget for Blogger. Blogspot author box widget codes. Best responsive and simple author box widget for Blogger's blog.
Hello Bloggers! Welcome back on HowToLearnBlog. Here, I am going to share a simple light blue author box blogger widget to setup your author box, below to the every post of your blog. As we know that author box plays very important role to promote your identity and your contents on your blog. So let's go to set up a simple and responsive Author box for your blogger blog.

Follow these instructions to setup simple and responsive light blue author box widget below every posts of Blogger

  • Log on www.blogger.com 
  • Click on Layout 
  • Click on "Add a Gadget" just below of post (main) block.

  • Select HTML/JAVASCRIPT

  • Modify the below codes.
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
    <style type="text/css">
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */
.authorboxwrap{margin:auto;padding:20px;overflow:hidden}
.avatar-container{background:rgba(0,0,0,.03);float:left;padding:7px;margin:0 20px 0 0;border:1px solid rgba(0,0,0,0.05)}
.avatar-container amp-img{width:90px;height:auto;max-width:100%!important;transition:all .3s}
.author_description_container h4{font-size:18px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#30373c}
.author_description_container p{margin:0;font-size:14px;margin-bottom:8px;line-height:22px;font-weight:400}
.author_description_container p a{color:#3498db;}.author_description_container p a:hover{color:#30373c;text-decoration:underline}
.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:#3498db;color:#fff;font-size:12px;text-align:center;display:inline-block;padding:10px 5px;margin:0 10px 0 0;width:32px;border-radius:5px}
.social-links li a:hover{background:#34495e;color:#fff;}</style>

<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img alt='Author Name' class='author_avatar' height='90' src='http://2.bp.blogspot.com/-_0qyTMr2uYI/VIuQL9jbCDI/AAAAAAAAH2U/vPhwdobq9NE/s1600/Userava.png' title='Author Name' width='90'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'>Author Name</a>
<i class='fa fa-check-circle' style='color:#3498db;font-size:16px;margin:0 0 0 3px' title='Verified Author'></i></h4>
<p>
Blog ini dibuat atas ketertarikan dan minat kami dengan website dan juga sebagai media sosial berbagi Info Menarik serta Hiburan lainnya.<b></b>
</p>
<span class='social-links'>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'></i></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'></i></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'></i></a></li>
<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram'></i></a></li>
</span>
</div>
</div>
</div>
/* CSS Author Box by WWW.HOWTOLEARNBLOG.COM */
  • Replace yellow marked image URL with your image URL.
  • Replace yellow marked Author Name with your name.
  • Replace yellow marked author description details with your details.
  • After replacing codes. Put the final code on html/javascript box.

  • After pasting your codes. Click on Save button.

Final touch for setting Author box on Blogger's blog.

I hope everything is clear. If you have any kind of problem regarding to setup author box on Blogger's blog. Then, Please write your problem below on comment box.

No comments:

Post a Comment

Please note before commenting on this page.
1. Don't comment as for advertisement purpose.
2. Don't hyperlink your website inside comment box.
3. Abuses are strictly prohibited.
4. If necessary, you can post the only URL without any text hyperlink.