Widget Sosial Media Icons Keren Dengan Effect Hover Untuk Blog ~ Ron1st Blog

langsung saja kita mulai

Login Ke Blogger.com
Klik Menu ''Tata Letak'', Di Dasbor Blogger
Klik ''Tambah Gadget''
Pilih Gadget ''HTML/JavaScript'', Dan Masukan kode dibawah ini di dalamnya

<div class="container"> <ul class="action-bar clearfix"> <li> <a href="http://twitter.com/Username" 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/Username" class="comment"> <span class="zocial-facebook"></span> <span class="tooltip">Like us</span> </a> </li> <li> <a href="http://gias-alauddin.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>