Add responsive writer box on Blogger post

Add elementary low-cal bluish writer box on Blogger post

Hello Bloggers! Welcome dorsum on HowToLearnBlog. Here, I am going to part a elementary low-cal bluish writer box blogger widget to setup your author box, below to the every post service of your blog. As nosotros know that author box plays really of import portion to promote your identity as well as your contents on your blog. So let's larn to gear upward a elementary as well as responsive Author box for your blogger blog.

Follow these instructions to setup elementary as well as responsive low-cal bluish writer box widget below every posts of Blogger

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

Select HTML/JAVASCRIPT

Modify the below codes.

/* CSS Author Box past times 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 past times 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 venture 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 past times WWW.HOWTOLEARNBLOG.COM */

Replace yellowish marked ikon URL alongside your ikon URL.
Replace yellowish marked Author Name with your name.
Replace yellowish marked writer description details alongside your details.
After replacing codes. Put the concluding code on html/javascript box.

After pasting your codes. Click on Save button.

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

I promise everything is clear. If you lot bring whatever sort of work regarding to setup writer box on Blogger's blog. Then, Please write your work below on comment box.