Blogger Author Widget with CSS3

Blogger Author Widget with CSS3

Blogger Author Widget with CSS3

Blogger Author Widget with CSS3 - in this tutorial i shared a author widget for blogger. Yeah! its a great tutorial for all bloggers admin. Specially this tutorial my helpful for who run personal blog. A beautiful widget is only for you. Flat, Clean and responsive.

Also Read: Blogger Author Bio box with Social icons

You should add 4 social icons with your links. Twitter, Facebook, Dribble and Google Plus icons. This widget will work with CSS3 transition hover effect. When you mouse hover on this widget, then it open other part. Its social icons part. If you wanna see a demo, look at our first widget.

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 highlighted image link with your profile picture image's link.

Now Save Template.

After saving template go to Layout > Add a gadget > HTML/Javascript and past below code.
 <div class="container">
<div class="author2">
        <h1>Muhammad Subel</h1>
        The Designer
    <div class="author-body">
      <a href="#Twitter-LINK"><span class="entypo-twitter"></span></a><a href="#Facebook-LINK"><span class="entypo-facebook"></span></a><a href="#Dribble-LINK"><span class="entypo-dribbble"></span></a><a href="#GooglePlus-LINK><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>

Note: Change the name and social links with yours. That's it.

Previous Post
Next Post

post written by:

TemplateMark better known as Template Market provides High quality free and premium Blogger templates. If you running a blog with Blogspot platform, then you can choose more than 20+ free blogger templates for your blog. TemplateMark provides free version of every template. You can highly choice TemplateMark for your digital blog.


  1. Muchas gracias amigo me llevo este aporte

    1. Usted es amigo más que bienvenidos. No dejes de visitar nuestro sitio.

  2. 30% working....+ counting code missing

    1. Counter code is just text only. You may change this counting number with your niche.

  3. Bro Update it as soon as possible.It does not work

  4. Admin 1 er odik hola ke use kora jabe?

    1. না। এই উইডগেট এর মাধ্যমে আপনি যেকোন একজন এডমিন এর ছবি সহ বিবরণ দেখাতে পারবেন।

      -ধন্যবাদ মন্তব্য করার
      -আমাদের সাথেই থাকুন।

  5. Replies
    1. Apni valo kore code gulo bosan, asha kori kaj korbe