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: 

Kinemaster Pro Mod Download with No Watermark + Premium Unlocked 2021

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(http://weloveiconfonts.com/api/?family=entypo);  
 [class*="entypo-"]:before {font-family: 'entypo', 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: ""; display: block; float: left; width: 80px; height: 80px; margin-right: 20px; background: url("http://i.imgur.com/rppvYgh.jpg") 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^="footItem"] { display: inline-block; width: 33.333333%; padding: 15px 0; text-align: center; color: rgba(255,255,255,.8); font-size: 1.1em; }  
 [class^="footItem"] 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>Yasir Ale Ispawoo</h1>  
     The Designer  
   </div>  
   <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>  
  <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>  
 </div>  

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