Blogger Author Widget with CSS3 Creative Design

 Blogger Author Widget with CSS3
This happens many times to some bloggers, their readers want to know who is the person behind this blog and this gives them a pleasure to interact with them more frankly. So i decided why not i share this widget with those who are looking for this.

If you are looking for a fully responsive author bio box for your blog, Simple Author Box could be the one for you. This lightweight piece of code will add an attractive author box at the end of your every blog posts. The author box displays the author name, description and links to various social media accounts. Including an author box in your blog posts makes sure that your visitors can find more information about the author in the same page. Contrary to popular belief, adding author box after post is very simple. If you wish to give your blog a professional look, then here i will show you excellent trick which let you add author Bio box within no time.

You can also choose to display links to all posts by the author and link the author name and avatar. It is also possible to apply custom CSS styles to make the widget look more attractive according to your need.

Step 1. 
Now lets start. Go to Blogger Dashboard  > Template  > Edit HTML  > and past below
CSS before </style>
@import url(; [class*=&quot;entypo-&quot;]:before {font-family: &#39;entypo&#39;, sans-serif;} *{ box-sizing: border-box; } a { text-decoration: none; transition: all .4s; } .container { margin: 0 auto; } .container:hover .author-body { height: 70px; } .author-body a {color:#fff} .author2 { overflow: auto; padding: 20px; background: #fff; border-radius: 5px 5px 0 0; font-size:12px; color: #b9becd; } .author2:before { content: &quot;&quot;; display: block; float: left; width: 80px; height: 80px; margin-right: 20px; background: url(&quot;;) no-repeat; background-size: 80px; border-radius: 100%; } .author2 h1 { margin: 15px 0 5px; font-weight: 100; font-size:20px; color: #5e6d81; } .author-body { height: 0; background: #323a45; color: #fff; vertical-align: middle; transition: all .3s; } .author-body a { display: inline-block; width: 25%; height: 100%; padding: 20px; border-right: 1px solid rgba(255,255,255,.25); text-align: center; color: #fff; font-size: 2.5em} .author-body a:hover { background: #515761; } .author-body a:last-child { border-right: none; } .foot { /*height: 100px;*/ } [class^=&quot;footItem&quot;] { display: inline-block; width: 33.333333%; padding: 15px 0; text-align: center; color: rgba(255,255,255,.8); font-size: 1.1em; } [class^=&quot;footItem&quot;] span { display: block; font-size: 1.6em; margin-bottom: 5px; color: #fff; } .footItem1 { background: #14b9d6; color: white!important;} .footItem1:hover { background: #5bcee2; } .footItem2 { background: #f27935; color: white!important; } .footItem2:hover { background: #f6a172; } .footItem3 { background: #1fbba6; color: white!important;} .footItem3:hover { background: #63d0c1; } .widget-content { box-shadow: 0 0 0 1px #D3D3D3;} .section:first-child .widget:first-child {margin-bottom:15px}

Note: Change the highlighted image link with you image URL that you want to display And finally hit Save template.

Step 2.
Now go to your blogger Layout  >Add a Gadget  >HTML/JavaScript and paste the following piece of code:
<div class="container">
<div class="author2">
<h1>Author-Name-Here</h1> The Author </div>
<div class="author-body">
<a href="Twitter-URL"><span class="entypo-twitter"></span></a>
<a href="Facebook-URL"><span class="entypo-facebook"></span></a>
<a href="Dribble-URL"><span class="entypo-dribbble"></span></a>
<a href="Google + RRL"><span class="entypo-gplus"></span></a>
<div class="foot">
<a href="#" class="footItem1">
<span class="entypo-heart"></span>102</a>
<a href="#" class="footItem2">
<span class="entypo-user"></span>4,587</a><a href="#" class="footItem3">
<span class="entypo-plus"></span>84,023</a> </div>

Change the blue words with your URLs. 
Subcribe to Our Newsletter For Free

Subscribe Now

Recommended For You

Speak Your Mind