Menambahkan Tooltip pada widget share

July 21, 2013

Apabila anda memiliki Widget Share atau add share seperti yang saya pakai bisa anda perindah dengan efek tooltip yang hanya membutuhkan sedikit modifikasi kode, tutorial ini saya dapatkan dari saudara dte.web.id .Untuk Demonya bisa anda lihat sendiri di widget share yang saya pakai

Tutorial

Dari Dashboard blog anda menuju Template kemudian Edit HTML
cari kode seperti yang di bawah ini

Biasanya kodenya mirip-mirip seperti ini :

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'>
    <a class='addthis_button_preferred_1'></a>
    <a class='addthis_button_preferred_2'></a>
    <a class='addthis_button_preferred_3'></a>
    <a class='addthis_button_preferred_4'></a>
    <a class='addthis_button_compact'></a>
    <a class='addthis_counter addthis_bubble_style'></a>
</div>
<!-- AddThis Button END -->

Jika anda sudah menemukan kodenya Tepat di dalam elemen .addthis_toolbox

tinggal tambahkan elemen <span class="addthis-tooltip">Teks Anda</span> seperti di bawah ini:

<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'>
    <span class="addthis-tooltip">share/bagikan kepada teman!</span>
    <a class='addthis_button_preferred_1'></a>
    <a class='addthis_button_preferred_2'></a>
    <a class='addthis_button_preferred_3'></a>
    <a class='addthis_button_preferred_4'></a>
    <a class='addthis_button_compact'></a>
    <a class='addthis_counter addthis_bubble_style'></a>
</div>
<!-- AddThis Button END –>

Selanjutnya anda tambahkan kode css di bawah ini diatas ]]></b:skin>

/* Modifikasi widget AddThis */

.addthis_toolbox {
  width:98%;
  position:relative;
  background-color:darkgreen;
  padding:10px 15px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;    
}

.addthis_toolbox .addthis-tooltip {
  display:block;
  width:140px;
  padding:10px 15px;
  position:absolute;
  bottom:100%;
  left:30px;
  z-index:77;
  margin-bottom:40px;
  background-color:black;
  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;
}

.addthis_toolbox .addthis-tooltip:before {
  content:"";
  width:0px;
  height:0px;
  border:7px solid transparent;
  border-top-color:black;
  position:absolute;
  top:100%;
  left:15px;
}

.addthis_toolbox:hover .addthis-tooltip {
  visibility:visible;
  opacity:1;
  margin-bottom:20px;
}

/* Akhir modifikasi widget AddThis */

Terakhir save template anda dan lihat hasilnya :c:

KET :
Untuk mengatur lebar dan mengganti warna background tinggal anda sesuaikan pada kode di atas yang sudah saya tandai dengan warna hijau , jika anda tidak ingin menampilkan background caranya tinggal anda tulis warna backgroundnya dengan “none”

Last note

Memberikan efek tooltip di widget share ,membuat widget tersebut menjadi tidak biasa..kreasikan imajinasi anda dalam mengedit kode – kode di atas dan jangan lupa untuk selalu berbagi :c:

Search This Blog

Fshare