CSS3 sosial icon tooltip hover

moonroemoort

css, widget

23 February 2014

Belum ada komentar

CARA PEMASANGAN

1. masuk dashboard
2. klik tata letak
3. tambah gadget
4. HTML/javascript
5. paste kan kode di bawah ini

    <div class="container">
    <ul class="action-bar clearfix">
    <li>
    <a href="http://twitter.com/TWITTERHANDLE" class="like">
    <span class="zocial-twitter"></span>
    <span class="tooltip">Follow</span>
    </a>
    </li>
    <li>
    <a href="https://plus.google.com/GOOGLEPLUSID" class="favourite">
    <span class="zocial-googleplus"></span>
    <span class="tooltip">Circle us</span>
    </a>
    </li>
    <li>
    <a href="https://www.facebook.com/FBID" class="comment">
    <span class="zocial-facebook"></span>
    <span class="tooltip">Like us</span>
    </a>
    </li>
    <li>
    <a href="http://YOURBLOG.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>

KETERANGAN

1. ganti  TWITTERHANDLE dengan username twitter anda
2. ganti  GOOGLEPLUSID dengan id google plus anda
3. ganti FBID dengan id facebook anda
4. ganti YOURBLOG dengan alamt web/blog anda