Google

2

This is a tutorial on how you can add social icons to your blogger blog. This widget is made from pure CSS without the use of any image or JavaScript which makes it a bit different with a cool tooltip hover effect.

The concept behind this widget is quite simple. This widget has four social icons which you can easily edit with your own URLs, name and you can also customize the tooltip to your taste. These icons are really eye-catching and have a attractive look.

Hovering over these buttons displays the  tooltip with the help of transition and transform CSS.

NOTE: This widget comes in a suite (The CSS and the Java Script) are together. You don't need to Edith your template to add the CSS codes. All you need is just add the code to your blog layout. 

Need a demo? It is right there on our blog sidebar.

Adding the HTML/CSS in Layout


To add this widget to your blog:
1.  Go to Blog Title>>Layout >>Add Widget >> HTML/JavaScript and paste the code in the box below.

<div class="container">
    <ul class="action-bar clearfix">
    <li>
    <a href="http://twitter.com/StefnSylvester" class="like">
    <span class="zocial-twitter"></span>
    <span class="tooltip">Follow</span>
    </a>
    </li>
    <li>
    <a href="https://plus.google.com/u/0/107685680097673187378/" class="favourite">
    <span class="zocial-googleplus"></span>
    <span class="tooltip">Circle us</span>
    </a>
    </li>
    <li>
    <a href="https://www.facebook.com/Stefn772" class="comment">
    <span class="zocial-facebook"></span>
    <span class="tooltip">Like us</span>
    </a>
    </li>
    <li>
    <a href="http://xclusivetechblog.blogspot.com/feeds/posts/default" class="share">
    <span class="zocial-rss"></span>
    <span class="tooltip">Subscribe</span>
    </a>
    </li>
    </ul>
    </div>
    <style>
    @charset "utf-8";
    @import url(http://weloveiconfonts.com/api/?family=zocial);
    /* zocial */
    [class*="zocial-"]:before {
      font-family: 'zocial', sans-serif;
    }
    /* ---------- GENERAL ---------- */

    a { text-decoration: none; }
    ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .clearfix { *zoom: 1; }
    .clearfix:before, .clearfix:after {
    content: "";
    display: table; }
    .clearfix:after { clear: both; }
    .container {
    display: block;
    height: 64px;
    position: relative;
    width: 256px;
    }
    /* ---------- Action Bar ---------- */
    .action-bar li {
    float: left;
    }
    .action-bar a {
    -webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
    box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
    color: #e7e7e7;
    display: block;
    font-size: 32px;
    height: 64px;
    line-height: 64px;
    position: relative;
    text-align: center;
    -webkit-transition: background .3s;
    -moz-transition: background .3s;
    -ms-transition: background .3s;
    -o-transition: background .3s;
    transition: background .3s;
    width: 64px;
    }
    .action-bar a:hover .tooltip {
    margin-top: 16px;
    opacity: 1;
    }
    .tooltip {
    border-radius: 3px;
    font-size: 14px;
    height: 28px;
    left: 50%;
    line-height: 28px;
    margin: 0 0 0 -50px;
    opacity: 0;
    position: absolute;
    top: 100%;
    -webkit-transition: margin-top .3s, opacity .3s;
    -moz-transition: margin-top .3s, opacity .3s;
    -ms-transition: margin-top .3s, opacity .3s;
    -o-transition: margin-top .3s, opacity .3s;
    transition: margin-top .3s, opacity .3s;
    width: 100px;
    }
    .tooltip:before {
    content: "";
    height: 8px;
    left: 50%;
    margin: -4px 0 0 -4px;
    position: absolute;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 8px;
    }
    .like,
    .like .tooltip,
    .like .tooltip:before { background: #65B1F8; }
    .like:hover { background: #65B1F8; }
    .favourite,
    .favourite .tooltip,
    .favourite .tooltip:before { background: #c93037; }
    .favourite:hover { background: #b02b32; }
    .comment,
    .comment .tooltip,
    .comment .tooltip:before { background: #43438e; }
    .comment:hover { background: #393978; }
    .share,
    .share .tooltip,
    .share .tooltip:before { background: #FF8000; }
    .share:hover { background: #FF8000; }
    </style>

How to Customize It


  1. Change the text in BOLD GREEN with your desired URLs. 
  2. Change the text in BOLD RED with your desired URLs. 

That's all, save your template and view the Cool Social Share Widget Adoring your Blog.

Got any difficulty or suggestions? Please drop them in the comment box.

Post a Comment

  1. Thanks fοr the mаrvelous posting! Ι seriously enjoyed reading it, you саn be
    a great author. I will make surе to bookmark yοur blog anԁ will eventuаlly сome back later іn life.
    website design

    ReplyDelete

 
Top