0 Navigasi Menu Bubble Coda Style Dengan CSS3 [Tooltips]

Untuk Demonya Silahkan Perhatikan Gambar diatas, atau silahkan lihat demonya KLIK DISINI dan perhatikan Tulisan-tulisan yang jika diarahkan Kursor mengeluarkan gelembung tulisan.

Lantas Bagaimana Cara Membuatnya? Silahkan Ikuti Panduan Berikut:

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:

#bubblemenu li {
             display: inline;
             margin-left: 15px;
cursor:pointer;
#bubblemenu li > div {
             width: 150px;
             min-height: 100px;
        position: absolute;
             display: inline;
             margin-left: -120px;
             padding: 5px;
visibility:hidden;
             opacity: 0;
             margin-top: -125px;
background: #ffffff;
font-size:1em;

/* Setting the border-radius property for all Browsers */
-moz-border-radius: 5px; /* Firefox */
-webkit-border-radius: 5px; /* Safari and Chrome */
border-radius: 5px; /* Browsers that Support it like Opera */

/* Setting the box-shadow property for all Browsers */
-moz-box-shadow: 0 0 8px gray; /* Firefox */
-webkit-box-shadow: 0 0 8px gray; /* Safari and Chrome */
filter: progid:DXImageTransform.Microsoft.Shadow
(color='#272229', Direction=135, Strength=3); /* IE */
box-shadow: 0 0 8px gray; /* Browsers that Support it like Opera */

/* Setting the transition property for all Browsers */
-moz-transition: all 0.5s ease-in-out; /* Firefox */
-webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.5s ease-in-out; /* Opera */
transition: all 0.5s ease-in-out; /* Browsers that Support it */
#bubblemenu li:hover > div {
visibility:visible;
              opacity: 1;
              margin-top: -150px;

/* Setting the transition property for all Browsers */
-moz-transition: all 0.5s ease-in-out; /* Firefox */
-webkit-transition: all 0.5s ease-in-out; /* Safari and Chrome */
-o-transition: all 0.5s ease-in-out;  /* Opera */
transition: all 0.5s ease-in-out; /* Browsers that Support it */
}
         }
            }

6. Setelah Itu Beralihlah dan cari kode <body>

Jika Sudah, Letakkan HTML dibawah ini tepat dibawah Kode tersebut atau setelah Kode <body> tersebut:

<ul id="bubblemenu">
<li>
Contoh 1
<div>
Tulisan Didalam Buble Contoh 1
</div>
</li>
<li>
Contoh 2
<div>
Tulisan Didalam Buble Contoh 2
</div>
</li>
<li>
Contoh 3
<div>
Tulisan Didalam Buble Contoh 3
</div>
</li>
<li>
Contoh 4
<div>
Tulisan Didalam Buble Contoh 4
</div>
</li>
</ul>

7. Setelah itu, Save Template Anda Dan Lihat Hasilnya...

KET: Tulisan Contoh 1 Dan seterusnya silahkan Ganti dengan Judul Yang ingin anda tampilkan dan Tulisan Didalam Buble Contoh 1 dan seterusnya silahkan Ganti dengan Isi Buble setelah kursor diarahkan...

Selamat Mencoba