Cara membuat tooltip di blog ~ Rahmat With Blog

Home » Trik Blog » Cara membuat tooltip di blog

Senin, 03 Desember 2012

Cara membuat tooltip di blog

Tooltip merupakan antarmuka pengguna grafis elemen. Hal ini digunakan dalam hubungannya dengan kursor.
Saat pengguna mengarahkan cursor ke item tersebut tanpa mengklik maka tooltip akan muncul sebuah balon kecil "kotak melayang-layang" dengan informasi tentang item yang sedang melayang di atas.

Berikut Caranya

Login ke Blogger.
Masuk ke Template
Edit HTML >> Cati kode <body> (pake CTRL + F)
Dan letakkan kode dibawah ini tepat di bawah code <body> .

<script src='http://javascript-share.googlecode.com/files/wb.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'>Warung Internet</a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:1px solid #000;background: #000;-webkit-border-radius: 5px;border-radius: 5px;-moz-border-radius: 5px;-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;}#ttcont{background: rgba(0, 0, 0, 0.2);color:#fff;-webkit-border-radius: 5px;border-radius:5px;-moz-border-radius: 5px;-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;}"
};
//]]></script><script src='http://javascript-share.googlecode.com/files/wb_tooltips.js'/>
<script src='http://downloadallinfo.googlecode.com/files/DAI-Tooltip.js'/>

<div id='warungbebasautotooltip'>

5. Selanjutnya cari code </body>

6. Dan letakan code dibawah ini tepat di atas code </body>

Posted in: Trik Blog

1 komentar:

25 Februari 2013 pukul 17.32

Wah pengen ngetes ni. Makasih kode tooltipnya sob. Kalo ada waktu ditunggu kujungannya

Posting Komentar