1. Login ke Blogger
2. Klik Design/Rancangan-->>edit html
3. Centang Expand Widget Template
4. Cari kode]]></b:skin>
5. letakkan Kode CSS dibawah ini tepat diatas kode]]></b:skin>
#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 */
}
}
}
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. letakkan HTML dibawah ini setelah Kode <body>
<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>
<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. simpan templet dan lihat hasilnya
