It's all about sharing information online | Site learning: Media social share blogger dengan Tooltip

Menambahkan Tooltip pada Subcription Box

Contoh Social Share dengan Tooltip

Percantik Tampilan media subcription Box social share anda dengan menambahkan tooltip yang menarik dengan tampilan yang lebih menarik dan Elegan.

Untuk membuat nya, Ikuti Langkah berikut Ini :

• Masuk ke akun Blogger anda
• Rancangan/Design
• Kemudian Klik Edit HTML
• Simpan Terlebih dahulu template anda.
• Cari Kode Berikut ]]></b:skin>
• Letakan Kode dibawah ini tepat diatasnya.

#dhtmltooltip {
background-color: #484848;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9wVv-lcBGWsevjY1mJz-zjxSNGgzihd_YKE7-69Wi-eEg7OEsWRSi2R8t5ndEpX0v-H0NC4wtnn-D3xrePUl5I772Uo6kHR7kpIcehQI2gGVGEiaAaLLOwJfVBcWVNS4uqAGRVMP_Vz8/s800/mouse-hover-bg.png");
background-repeat: repeat-x;
border: 1px solid #AAAAAA;
color: #F2F2F2;
font-size: 12px;
font-weight: bold;
height: 27px;
line-height: 20px;
padding: 10px 20px;
position: absolute;
text-align: center;
z-index: 100;
visibility:hidden;
}
#dhtmlpointer{
position: absolute;
z-index: 101;
visibility:hidden;
}
.social-subscribe ul {
list-style: none outside none;
}
.social-subscribe li {
float: left;
}
.social-subscribe li a.rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqfHMW-_fgtARfU5PJ3LexYxd3uX0u7S724K6Mf4XSuc9IK3NKTc-vtZrLVhdilvgWgMx_NboAC60XYp3DgaZ2Z8aJWF1Rea4rcAZqc9odrLf1eJCE40jOsapS7KarNbCsAwrJiGiYJfU/s800/icon-rss.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}
.social-subscribe li a.facebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQCpesKNA96ZhwcfgdP-cqQQUCo1aUNA77ywtrvE72XvUHR6uPinde0K45UcgTPjopwhv0_QMM3b3pBA7wm_5izUFEC47MIKtgFZHBdz1BEcNLNOaadgcOCaSSKnPYsM8mfmhTgyPMC8/s800/icon-facebook.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}
.social-subscribe li a.twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEZC8dyBQ3mEiQMYiHawCgAlPejXB8HoPlaqxCx6Fpic531Xb3x0_D5QQOuDshZThjKWHTJqKhJrvBW0xa9-x03jLpmOuO4e7kr0ZKmKJfd94Zk31h7OikRA3e4ke1QjPH-5zBopNjZt0/s800/icon-twitter.gif") no-repeat scroll 0 0 transparent;
padding: 0 2px 0 0;
}
.social-subscribe li a {
display: inline-block;
height: 52px;
width: 57px;
}

• Simpan Template anda. Save.
• Kemudian.Klik Design/Rancangan
• Page Elements > Tambah Gadget > HTML/JavaScript

<script src="https://sites.google.com/site/everythingaboutblogging/Home/custom.js" type="text/javascript"></script>
<div id="dhtmltooltip"></div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQzkBOOxqyTX5o4EBCtU61P3htL95K7iJMcG_idiI8iz28HbRhyphenhyphen3l4YBjPDS0L3-CsGc8nW1fiDV_DJJvqu50UgAo4rD3XdhXeYoAG9NbM5TQyxfEO6k4gBBM426BJyT67DcpIe9jrARg/s800/arrow.png" id="dhtmlpointer"/>                               
<ul class="social-subscribe">
<li><a onmouseout="hideddrivetip()" onmouseover="ddrivetip('Subscribe via Feed',150,'#ED8A01')" target="_blank" class="rss" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','feeds.feedburner.com/FEEDNAME']);" href="http://feeds.feedburner.com/FEEDANDA"></a></li>
<li><a onmouseout="hideddrivetip()" onmouseover="ddrivetip('Join us on Facebook',150,'#2E4B8F')" rel="nofollow" target="_blank" class="facebook" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','FAN-PAGE-URL']);" href="URL Facebook Anda"></a></li>
<li><a onmouseout="hideddrivetip()" onmouseover="ddrivetip('Subscribe on Twitter',150,'#1D70B3')" target="_blank" class="twitter" rel="nofollow" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','twitter.com/TWITTER-USERNAME']);" href="http://twitter.com/TWITTER-USERNAME"></a></li>
</ul>

• Ubah Tulisan yang berwarna Merah dengan Url Anda.
• Simpan.

Selamat Mencoba. Salam Admin.

Link Keposting Ini : Membuat Tooltip | Social Share Bookmarking | Media Sharing dengan Tooltip