CSS Bubble Tooltips

Ingin blog anda lebih variatif? mungkin anda bisa menggunakan teknik CSS Bubble Tooltips. Dengan CSS Bubble Tooltips anda dapat memberikan syatu keterangn singkat suatu link yang di inginkan dan keterangan ersebut akan muncul apabila pengunjung blog menyorotkan cursor mouse pada link yang anda beri efek tooltips.

 

< (((((((( \\\\\\\\\\\\\\\\\\\\      LIve Demo      ///////////////////// )))))))) >

 

Silahkan arahkan mouse komputer anda pada link yang ada pada halaman tersebut, dan seharusnya ada akan melihat efek bubble tooltips.

 

Teknik Tooltips yang dipakai adalah 100% menggunakan CSS, jadi tentunya tidak akan terlalu membebani loading blog anda. Cara untuk mengimplementasikan CSS Bubble Tooltips terbilang sangat mudah, berikut caranya.

 

Langkah #1

 

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik Tab Edit HTML.
4. Jangan lupa untuk Membackup template anda terlebih dahulu, klik link 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/AVvXsEjJ2UnC57SDkg77lxCROcjlOTizfDrWQf8E1lXZRVBvwkZUGuRhMDb7i_0IjYWbF8MdItyXodtcCYt8n7TSlSC98_o4rIj-oO4CN3meF99GYXxzEe3JxqqpbxmblPm8SPsQ4_5l8-i68x8/) 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/AVvXsEgs52vpbGk4rWtriD4ZntAiR99F6dDSDjNlIsruHB_4PYeKsoNE5Hb1qhUNBiGW5Fs23sHhzOlf91z-VqShGDyAxpm2oGgPkRq9xIIiPS5ImEIG4Dimy4-J5w3q7swEeV2hmmQeAP9pFqQ/) repeat bottom;
   }
   a.tt:hover span.bottom{
       display: block;
       padding:3px 8px 10px;
       color: #548912;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ2UnC57SDkg77lxCROcjlOTizfDrWQf8E1lXZRVBvwkZUGuRhMDb7i_0IjYWbF8MdItyXodtcCYt8n7TSlSC98_o4rIj-oO4CN3meF99GYXxzEe3JxqqpbxmblPm8SPsQ4_5l8-i68x8/) no-repeat bottom;
   }

7. Klik tombol SIMPAN TEMPLATE.
8. Langkah pertama selesai.

Untuk langkah selanjutnya anda hanya perlu menambahkan sedikit kode HTML pada link yang ingin ada efek bubble tooltips nya. Posisi link tentunya bisa dimana saja sesuai dengan keingina, bisa 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, coba kunjungi deh <a href="http://kolom-tutorial.blogspot.com" class="tt">Kolom Tutorial<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 karena tutorialnya gratisss.

 

Langkah #2

Untuk mencoba memasang di bagian sidebar, berikut caranya :

 

1. Silahkan login ke blogger dengan ID anda.



2. Klik Tata Letak.



3. Klik tab Elemen Halaman.



4. Klik Tambah Gadget.



5. Klik tanda plus (+) untuk HTML / Javascript



6. Masukan kode link yang anda inginkan ( lihat kode diatas).



7. Klik SIMPAN.



8. Selesai.

Jika anda ingin memasukkan didalam posting, pilih terlebih dahulu mode Edit HTL bukan pada mode Compose, kemudian masukan kode tambahan link tooltipnya, setelah itu anda dapat kembali ke mode compose jika mau.

Silahkan mencoba!

 

Credit : trentrichardson