Widget Sosial Media Icons Keren Dengan Effect Hover Untuk Blog

Pada Artikel yang akan saya bagikan ini di awal bulan September saya akan Bagikan Sebuah Widget Sosial Media keren untuk Sobat, Widget akan Saya bagikan Ini Adalah Widget Sosial Media.

 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://#.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 #.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...

Tweet

Subscribe to receive free email updates: