Sedikit Info Seputar
Modifikasi Widget AddThis
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Modifikasi Widget AddThis, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel Widget Blog, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Modifikasi Widget AddThis
Terbaru
link: Modifikasi Widget AddThis
Berbagi Modifikasi Widget AddThis Terbaru dan Terlengkap 2017
Tip sederhana untuk menambahkan tooltip pada widget berbagi AddThis. Saya iseng membuatnya beberapa menit yang lalu :p
Jika Anda adalah pengguna widget AddThis seperti Saya, pasti Anda memiliki markup yang 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 -->Tepat di dalam elemen .addthis_toolbox tambahkan elemen <span class="addthis-tooltip">Teks Anda</span> seperti ini:
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style'>
<span class="addthis-tooltip">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 -->Sekarang masuklah ke halaman editor HTML blogmu kemudian tambahkan kode CSS ini tepat di atas kode ]]></b:skin> atau </style>:
/* Modifikasi widget AddThis */
.addthis_toolbox {
width:150px;
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 */Klik Simpan template.