Tombol Social Media dengan Tooltip ini menggunakan CSS3 untuk mempercantik efeknya sehingga pada saat diarahkan ke salah satu icon akan muncul tulisan

Tombol Social Media dengan Tooltip - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Tombol Social Media dengan Tooltip ini menggunakan CSS3 untuk mempercantik efeknya sehingga pada saat diarahkan ke salah satu icon akan muncul tulisan

Tombol Social Media dengan Tooltip


Pada artikel yang terdahulu yaitu "Tombol Follow Me dengan Transisi pada Background dan Width". Pada tombol tersebut saya buat vertikal kebawah. Sedangkan 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;}

PEMASANGAN PADA BLOGSPOT

Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu Tata Letak:

Tata letak Blogger
Masuk ke halaman Tata Letak

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:
<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>


Silahkan ganti pada bagian yang warna kuning "Link ...... Anda" dengan link FB/Twitter/Google+ atau yang anda miliki..
Nah sekian dulu..
semoga bermanfaat bagi teman-teman yang mambaca dan dapat meningkatkan follower/jumlah Like fan page FB anda..
SatankMKR
Satank Mkr Beri Komentar
Bagikan kepada teman!
Garis

5 comments:

  1. sangat bermanfaat dan cerdas,,

    BalasHapus
  2. (h)
    Tapi......untuk menggeser posisinya agak ke bawah gimana nih caranya?

    BalasHapus
  3. "Link Email Anda"
    malem mas, mohon penjelasannya untuk "Link Email Anda" maksudnya link email yg gmana ya mas ? mohon banget penjelasannya, (p) (p) (p)
    ditunggu jawabannya

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP