Widget ini Kalau Kursor bergerak ke salah Satu Sosial Media, akan ada petenjuk sesuai sosial Masing Masing, Kegunaan Sosial Media Adalah Untuk Membantu Pengunjung untuk berkomunikasi di jejaring sosial dan bisa juga untuk
menambah traffic blog kita, begitulah langsung saja, Kita akan mencoba membuatnya dan Tutorialnya Seperti ini :
Widget Sosial Media Icons Keren Dengan Effect Hover Untuk Blog
---------------------------------------------------------------------------------
- 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>
- Ganti Username Dengan Username Twitter anda
- Ganti GOOGLEPLUSID Dengan ID Google+ anda
- Ganti Username Dengan Username Facebook anda
- Ganti gias-alauddin.blogspot.com Dengan Url Blog anda
- Setelah Semua Di Ganti, Sekarang Klik ''Simpan''
Dan Demikianah Artikel ini semoga Artikel ini Bermanfaat Dan Mudah Untuk Di Pratekkan, Maaf Kalau ada salah salah kata, Kalau sobat masih binggung silakan berkomentar atau sobat punya pendapat tentang artikel ini, Silakan berkomentar di kolom komentar dibawah ini, Terima Kasih...
