Professional Magazine Blogger Templates Read More ×

Monday, August 31, 2015

Blogger Author Widget with CSS3

JSC Result 2016

www.nuedubd.com/jsc16

JSC Result 2016 will publish on 31th December 2016 Under Ministry of Education, Bangladesh. Check Your JSC Exam Result 2016 FAST!
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(http://weloveiconfonts.com/api/?family=entypo);
[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;http://i.imgur.com/rppvYgh.jpg&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>
    <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.

SHARE THIS
Subcribe for our all latest news and updates

Subscribe Now

Previous Post
Next Post
Monetize your website traffic with yX Media
True Mag

11 comments:

  1. Muchas gracias amigo me llevo este aporte

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

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

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

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

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

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

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

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

      Delete