Pasang Tombol Social Media dengan Tooltip di Blogger/Blogspot

Kode Iklan Di Sini
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... 



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

Dibawah ini merupakan kode CSS yang digunakan untuk membuat efek pada tombol ini. CSS3 yang digunakan untuk memberikan efek tersebut yaitu dengan menggunakan transisi ease-out pada semua element didalam span dengan class ikonz-tooltip . Untuk lebih jelasnya perhatikan kode dibawah.



#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('http://1.bp.blogspot.com/-4O0XdDkxMps/UDDZHwvWCtI/AAAAAAAAEZA/PgP7Epi-x0Q/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

1. Masuk ke akun blogger Anda >> Pilih Tata Letak >> Add Gadget
2. Anda copy kode di bawah ini, pastekan di dalam gadget baru
3. Berikut kodenya:


<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('http://1.bp.blogspot.com/-4O0XdDkxMps/UDDZHwvWCtI/AAAAAAAAEZA/PgP7Epi-x0Q/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 :

1. Silahkan Anda ganti pada bagian yang berwarna hijau " Link....Anda" dengan alamat link FB/Twitter  /Google+ atau yang anda miliki.
2. Silahkan Simpan :)



Sekian artikel  Pasang Tombol Social Media dengan Tooltip di Blogger/Blogspot , Semoga bermamfaat buat sobat blogger. Jumpa lagi di tips blogger berikutnya ya ..da...da...eits...jangan lupa kasi komentarnya.

You Might Also Like:

Disqus Comments