Pasang Tombol Social Media dengan Tooltip di Blogger/Blogspot

Pasang Tombol Social Media dengan Tooltip di Blogger/Blogspot,  - Sobat blogger berikut ini saya share cara Pasang Tombol Social Media dengan Tooltip di Blogger/Blogspot terbaru. Nah sobat pasti sudah tau kan fungsi dari tombol social media, jadi dengan tombol ini kita bisa mengshare artikel kita ke media lain.
Pada Tombol Social Media dengan Tooltip yang saya buat kali ini berorientasi horizontal seperti pada umumnya tombol social media yang diletakkan pada bagian atas. Nah untuk lebih jelasnya bisa dilihat pada contoh halaman demo dibawah... 

• Demo Widget Disini

HTML

Struktur HTML dari tombol ini. Saya membaginya dalam li untuk memudahkan dalam menambah/mengurangi tombol yang anda inginkan silahkan hapus pada bagian <li><a href="#" class="ikonz ab"><span class="ikonz-tooltip">..........</span></a></li>. Misalnya untuk menggurangi tombol Delicious silahkan hapus <li><a href="#" class="ikonz delcis"><span class="ikonz-tooltip">Delicious</span></a></li>

 <div id="followq">
<ul>
<li><a href="#" class="ikonz fb"><span class="ikonz-tooltip">Facebook</span></a></li>
<li><a href="#" class="ikonz twitter"><span class="ikonz-tooltip">Twitter</span></a></li>
<li><a href="#" class="ikonz google"><span class="ikonz-tooltip">Google+</span></a></li>
<li><a href="#" class="ikonz delcis"><span class="ikonz-tooltip">Delicious</span></a></li>
<li><a href="#" class="ikonz stumble"><span class="ikonz-tooltip">StumbleUpon</span></a></li>
<li><a href="#" class="ikonz mail"><span class="ikonz-tooltip">Mail</span></a></li>
<li><a href="#" class="ikonz rss"><span class="ikonz-tooltip">RSS</span></a></li>
</ul>
</div>

CSS dan CSS3 Transitions

#followq {clear: both;width: 300px;height: 40px;margin: 10px auto;}
#followq ul { margin: 0px;padding: 0px;}
#followq ul li {position: relative;list-style-type: none;display: inline-block;}
.ikonz .ikonz-tooltip {display: block;padding: 5px 10px;position: absolute;bottom: 100%;
left: 0px;z-index: 77;margin-bottom: 40px;background-color: #141414;font: bold 12px "Trebuchet MS",Arial,Sans-Serif;
color: white;text-align: center;-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
-webkit-border-radius: 5px;-moz-border-radius: 5px;
border-radius: 5px;opacity: 0;
visibility: hidden;-webkit-transition: all 0.26s ease-out;
-moz-transition: all 0.26s ease-out;
-ms-transition: all 0.26s ease-out;
-o-transition: all 0.26s ease-out;
transition: all 0.26s ease-out;}
.ikonz .ikonz-tooltip:before {content: "";width: 0px;height: 0px;border: 7px solid transparent;border-top-color: #141414;position: absolute;top: 100%;left: 13px;}
.ikonz:hover .ikonz-tooltip {visibility:visible;opacity:1;margin-bottom:10px;z-index:99999;}
#followq .ikonz {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHq9moiyyKi1I6unvPFro95j1s87dRAEjZpeFrdxB8DrkmdFjr2xp6D6DxB1IkWGt9LYIh0KrA4u1Pj88pL17SjQvpAKEuev5ER1XKY2mYYMjt3fmGSXtulpVVRBOQcpfqgTz4N3ckKKY/s1600/social3d.png') 0 0 no-repeat;display: block;
color: #141414;float: none;height: 39px;width: 39px;line-height: 39px;position: relative;z-index: 5;}
#followq .ikonz:active {bottom: -2px;}
#followq .fb {background-position: 0px 0px;}
#followq .twitter {background-position: -40px 0px;}
#followq .google {background-position: -80px 0px;}
#followq .delcis {background-position: -120px 0px;}
#followq .stumble {background-position: -200px 0px;}
#followq .mail {background-position: -280px 0px;}
#followq .rss {background-position: -360px 0px;}

LANGKAH PEMASANGAN

<style type="text/css" >
#followq {clear: both;width: 300px;height: 40px;margin: 10px auto;}
#followq ul { margin: 0px;padding: 0px;}
#followq ul li {position: relative;list-style-type: none;display: inline-block;}
.ikonz .ikonz-tooltip {display: block;padding: 5px 10px;position: absolute;bottom: 100%;
left: 0px;z-index: 77;margin-bottom: 40px;background-color: #141414;font: bold 12px "Trebuchet MS",Arial,Sans-Serif;
color: white;text-align: center;-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
-webkit-border-radius: 5px;-moz-border-radius: 5px;
border-radius: 5px;opacity: 0;
visibility: hidden;-webkit-transition: all 0.26s ease-out;
-moz-transition: all 0.26s ease-out;
-ms-transition: all 0.26s ease-out;
-o-transition: all 0.26s ease-out;
transition: all 0.26s ease-out;}
.ikonz .ikonz-tooltip:before {content: "";width: 0px;height: 0px;border: 7px solid transparent;border-top-color: #141414;position: absolute;top: 100%;left: 13px;}
.ikonz:hover .ikonz-tooltip {visibility:visible;opacity:1;margin-bottom:10px;z-index:99999;}
#followq .ikonz {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHq9moiyyKi1I6unvPFro95j1s87dRAEjZpeFrdxB8DrkmdFjr2xp6D6DxB1IkWGt9LYIh0KrA4u1Pj88pL17SjQvpAKEuev5ER1XKY2mYYMjt3fmGSXtulpVVRBOQcpfqgTz4N3ckKKY/s1600/social3d.png') 0 0 no-repeat;display: block;
color: #141414;float: none;height: 39px;width: 39px;line-height: 39px;position: relative;z-index: 5;}
#followq .ikonz:active {bottom: -2px;}
#followq .fb {background-position: 0px 0px;}
#followq .twitter {background-position: -40px 0px;}
#followq .google {background-position: -80px 0px;}
#followq .delcis {background-position: -120px 0px;}
#followq .stumble {background-position: -200px 0px;}
#followq .mail {background-position: -280px 0px;}
#followq .rss {background-position: -360px 0px;}
</style>
<div id="followq">
<ul>
<li><a href="Link Facebook Anda" class="ikonz fb"><span class="ikonz-tooltip">Facebook</span></a></li>
<li><a href="Link Twitter Anda" class="ikonz twitter"><span class="ikonz-tooltip">Twitter</span></a></li>
<li><a href="Link Google+ Anda" class="ikonz google"><span class="ikonz-tooltip">Google+</span></a></li>
<li><a href="Link Delicious Anda" class="ikonz delcis"><span class="ikonz-tooltip">Delicious</span></a></li>
<li><a href="Link StumbleUpon Anda" class="ikonz stumble"><span class="ikonz-tooltip">StumbleUpon</span></a></li>
<li><a href="Link Email Anda" class="ikonz mail"><span class="ikonz-tooltip">Mail</span></a></li>
<li><a href="Link RSS Anda" class="ikonz rss"><span class="ikonz-tooltip">RSS</span></a></li>
</ul>
</div>
 

KETERANGAN :