What Is The Hereafter Reach Of Online Advertising?

Add uncomplicated calorie-free blueish writer box on Blogger post

Hello Bloggers! Welcome dorsum on HowToLearnBlog. Here, I am going to portion a uncomplicated calorie-free blueish writer box blogger widget to setup your author box, below to the every postal service of your blog. As nosotros know that author box plays really of import business office to promote your identity together with your contents on your blog. So let's become to railroad train a uncomplicated together with responsive Author box for your blogger blog.

Follow these instructions to setup uncomplicated together with responsive calorie-free blueish writer box widget below every posts of Blogger

• Log on www.blogger.com 
• Click on Layout 
• Click on "Add a Gadget" merely below of postal service (main) block.

• Select HTML/JAVASCRIPT

• Modify the below codes.

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

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

• After pasting your codes. Click on Save button.

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

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