Navigasi Menu Buble Coda Style Dengan CSS3[Tooltips]
Nha setelah membuat Simple CSS3 Horizontal Menu Dan Transparany Chunky Pure CSS3 Menu, kali ini saya ingin mengajak anda membuat Buble Coda Style Dengan CSS3 atau biasa disebut Tooltips. Bentuknya 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:
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>
Setelah itu, Save Template Anda Dan Lihat Hasilnya...
Ps: 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...
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 */
}
}
}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>
Setelah itu, Save Template Anda Dan Lihat Hasilnya...
Ps: 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...
Posting Komentar
Posting Komentar