Bubble Tooltips untuk Blogger

Dengan CSS Bubble Tooltips anda dapat memberikan satu keterangan singkat mengenai suatu link yang di inginkan dan keterangan tersebut akan muncul apabila pengunjung blog meletakkan cursor mouse pada link yang anda beri efek tooltips.



Teknik Tooltips yang dipakai adalah 100% menggunakan CSS, jadi tentunya tidak akan terlalu membebani loading blog anda.Untuk mencuba boleh ikut tutorial dibawah ini.

Langkah 1

1. Login ke blogger

2. Klik Design.

3. Klik tab Edit HTML

4. Anda disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.

5. Silahkan cari kode ]]></b:skin>

6. Copy lalu paste kode berikut diatas kode ]]></b:skin>

/*---------- bubble tooltip -----------*/

a.tt{

position:relative;

z-index:24;

color:#3CA3FF;

font-weight:bold;

text-decoration:none;

}

a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/

a.tt:hover{ z-index:25; color: #aaaaff; background:;}

a.tt:hover span.tooltip{

display:block;

position:absolute;

top:0px; left:0;

padding: 15px 0 0 0;

width:200px;

color: #993300;

text-align: center;

filter: alpha(opacity:90);

KHTMLOpacity: 0.90;

MozOpacity: 0.90;

opacity: 0.90;

}

a.tt:hover span.top{

display: block;

padding: 30px 8px 0;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAw6_FuqDX665BBkbqftLzlYf1-TviVy6XCNVxowssv99yV-SMStO49oIc17H897ahQqR2xggTWpbu-PJmQKBoXSYkW_6J3SXsmQVaJzO33hUshGR1J7x77iZTz-Soku6g2MfQg4iZ6Y8/) no-repeat top;

}

a.tt:hover span.middle{ /* different middle bg for stretch */

display: block;

padding: 0 8px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCfZEwFJDQJtb9hcJ5q7Nn5FsEVfm-FgphHJMWM294JIpHI773pea_8CEyp07BjlX7wqOS4iQRPHSPhB-zM7rqY3ki8DRGpzGsUAvutF0HryVgKPC3E1mtETc2urezD0XR4gbAwx3Ep0U/) repeat bottom;

}

a.tt:hover span.bottom{

display: block;

padding:3px 8px 10px;

color: #548912;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAw6_FuqDX665BBkbqftLzlYf1-TviVy6XCNVxowssv99yV-SMStO49oIc17H897ahQqR2xggTWpbu-PJmQKBoXSYkW_6J3SXsmQVaJzO33hUshGR1J7x77iZTz-Soku6g2MfQg4iZ6Y8/) no-repeat bottom;

}

8. Akhir sekali simpan template anda.

Langkah 2

Untuk langkah selanjutnya anda hanya perlu menambahkan sedikit kode HTML pada link yang ingin ada efek bubble tooltips nya. Posisi link tentunya boleh dimana saja sesuai dengan keinginan anda, di dalam posting, sidebar, ataupun footer.

Format kode tambahannya seperti ini :

<a href="link_tujuan" class="tt">Teks link yg muncul<span class="tooltip"><span class="top"></span><span class="middle">Pesan yang akan muncul</span><span class="bottom"></span></span></a>

Contoh :

Bagi yang ingin belajar membuat blog di blogspot, jangan lupa lawat <a href="http://jeritanblog.blogspot.com" class="tt">Pro Tutorial Blog<span class="tooltip"><span class="top"></span><span class="middle">panduan lengkap membuat blog di blogspot</span><span class="bottom"></span></span></a>, di jamin puas keranana tutorialnya menarik.