Icon Social Share dengan Tooltip

Icon Social Share dengan Tooltip - Malam ini saya akan berbagi kepada sobat bagaimana sobat dapat menambahkan satu lagi Icon Social Share untuk blog sobat. Icon Social Share ini sedikit berbeda karena memiliki efek hover tooltip di dalamnya. Widget ini terbuat dari CSS murni tanpa menggunakan gambar atau JavaScript.

Konsep di balik widget ini cukup sederhana. Ada empat Icon Social Share di mana sobat dapat menambahkan URL yang sobat inginkan sendiri. Orang dapat melihat tooltip muncul dengan bantuan transisi dan transformasi CSS. Ikon-ikon ini benar-benar eye-catching dan memiliki tampilan yang menarik.


Icon Social Share dengan Tooltip

  • Demo

Menambahkan HTML / CSS di Template sobat.


Untuk menambahkan widget ini terlebih dahulu masuk ke Blogger → Tata Letak → Tambah Widget → HTML / JavaScript dan paste kode dalam kotak di bawah.
<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/USERNAME" 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://BLOG-SOBAT.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 pada code html dengan URL yang sobat inginkan dan BLOG-SOBAT dengan URL blog yang di tuju

Selamat Mencoba

2 Responses to "Icon Social Share dengan Tooltip"

  1. JUAL OBAT PEMBESAR PENIS AMPUH
    VIMAX ASLI CANADA adalah salah satu obat pembesar penis pria paling ampuh dan manjur. Vimax Asli Canada Di Indonesia kami agen resmi OBAT VIMAX ASLI yang berpusat di jakarta ( Vimax Center Jakarta ) Obat pembesar penis ini produk unggulan kami yang banyak di cari dengan kategori Obat Pembesar Penis Pria dan ada juga produk wanita Obat Pembesar Payudara Cepat vacum pembesar payudara permanen.

    Bagi pria yang mengalami gangguan reproduksi kami juga menjual Obat Herbal Untuk Kemandulan Pria. Sudah berobat kemana-mana dan hasilnya nihil sama sekali sampai sekarang belum di kasih momongan cobalah minum OBAT MANDUL PRIA ini ----> Semenax Asli Canada Obat Penyubur Sperma Pria hasilnya di jamin terbukti ampuh dan puas. Apa yang anda harap cepat mendapatkan momongan/anak di dalam keluarga Anda.

    SEDIA :
    Celana hernia magnetik,Obat pembesar bokong dan paha, Obat hernia, Pelangsing badan, Obat penumbuh rambut, Vacum pembesar payudara permanen, Obat pembesar payudara cepat, Alat pembesar penis, Vacum pembesar penis, Obat pelangsing badan, Obat pelangsing tubuh, Obat asam urat, Obat penghilang tato, Obat ambeien wasir, Obat peninggi badan, Obat mata minus plus, Pemerah bibir


    Salam
    TOKO OBAT MURAH
    www.toko-obat-murah.com

    ReplyDelete

Komentar yang menyertakan iklan, atau titip link, akan dimasukan ke Folder SPAM.

Untuk pertanyaan di luar Topik Artikel silahkan kik OOT (apabila dipertanyakan di sini, mohon maaf apabila tidak dibalas).