Bagaimana Cara Membuat Bubble Tooltip di Blog/Web

Silahkan bagikan :

۞ السَّــــــلاَمُ عَلَيْــــــكُمْ وَرَحْمَــةُ اللــــهِ وَبَرَكَاتُــــــــــهُ ۞

۞ بســـــــــــــم اللّـــه الرّحمٰن الرّحيـــــــــــــم ۞

-------------------------------------------------------------

1. Login ke Blogger

2. Saat di dasbor pilih edit tampalete/tata letak

3. Lalu pilih Edit HTML

4. Copy aja kode di bawah ini :

/*---------- 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/AVvXsEhJC0v9xHWjjcvE4T9vjXgn2-Gv83d1PWtkwaUNwkFGA7by6M3j1T2t5z7I7odIcllOlf_j8AGgE0fR3YU_J1MRlzhvskHGOrHu5pP8eZoC90XkRJVzCqYiUhoievKmGYCqSHjh7-CnpBs/) 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/AVvXsEjRNiJq7QpaRnccI3rI2sKw32fZHMRlW2m4bkqkL9mLYKT4N46M_MSz6hUV4b3zRwiD2SlfXPnT4YBR1pIL4M7SwXi-2kdmIwg10qXCaWo1ubHBK9_xbaCGQ3tHAq2yoQBzK-UeyC97NGU/) repeat bottom; } a.tt:hover span.bottom{ display: block; padding:3px 8px 10px; color: #548912; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJC0v9xHWjjcvE4T9vjXgn2-Gv83d1PWtkwaUNwkFGA7by6M3j1T2t5z7I7odIcllOlf_j8AGgE0fR3YU_J1MRlzhvskHGOrHu5pP8eZoC90XkRJVzCqYiUhoievKmGYCqSHjh7-CnpBs/) no-repeat bottom; }
2. Simpan (paste) di atas ]]></b:skin>

3. Lalu Save

Selanjutnya Untuk membuat teks yang memiliki bubble tooltip silakan copy kode di bawah ini :

klik<a class='tt' href='Tujuan link yang di inginkan'>di sini<span
class='tooltip'><span class='top'></SPAN><span class='middle'>untuk
konfirmasi</span><span class='bottom'></span></SPAN></a>

klik <a class='tt' href='Tujuan link yang di inginkan'>di sini<span class='tooltip'></span><span class='top'/><span class='middle'>untuk konfirmasi</span><span class='bottom'/></span></a>

Keterangan :

1. Link biru : bisa anda gunakan untuk membuat link ke arah artikel lain, bisa juga di kosongkan jika tidak diperlukan.
2. Link hijau : adalah teks yang akan di buat bubbletip, yang mana bila disorot oleh mouse maka akan muncul keterangan tambahan yang telah anda buat
3. Link warna orange adalah keterangan tambahan yang ingin anda tambahkan.
4. Contohnya seperti ada dipojok kanan blog ini

Ok semoga bermanfaat.

۞ الحمد لله ربّ العٰلمين ۞

-------------------------------------------------------------

• Tweet
• Share
• Share
• Share
• WhatsApp