Cara Membuat Tooltip di Blogspot

Posted by : G.T.K.C NOCTURNAL Kamis, 07 Juni 2012

Selamat Sore semuanya, kali ini H.G.C Syndicate akan berbagi trick cara membuat Tooltip di Blog, oke Langsung ke TKP.

Berikut cara memasangnya :

Login ke Blogger
Pilih Rancangan > Edit HTML
Centang "Expand Template Widget"
Lalu cari kode dibawah ini :

]]></b:skin>

Kalo sudah ketemu maka letakan kode dibawah ini tepat diatas kode ]]></b:skin>

li.sfhover .tooltips, li:hover .tooltips {
display:block;
}
.tooltips {
margin:6px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:250px; >
display:none;
background:url(http://i1128.photobucket.com/albums/m493/wonglampung1/hitam.jpg ) bottom repeat-x;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
border:1px solid #FFFFFF;
-moz-border-radius:10px;
}
.tooltips {
margin-top:-50px;
margin-left:-290px;
}
.tooltips:hover {
display:none!important;
}
.tooltips p {
font-size:12px;
font-family:Rockwell;
font-weight:bold;
color: #0060C8;
text-align:center;
margin:0 15px 0 0;
}

Jika sudah cara diatas maka Simpan Template

Keterangan :

Tooltip tersebut bisa digunakan di Menu, Postingan, dan lainnya
Untuk menggunakan Tooltip di Menu copypaste kode dibawah ini :

<li><a href="http://.....URL yang berkaitan dengan ToolTips...." > Judul URL yang berkaitan dengan ToolTips </a><div class="tooltips"><p> Kata-kata untuk ditampilkan pada Pop-up ToolTips</p></div></li>