,Okeh dikesempatan kali ini saya akan share cara membuat menu berbenti Circle atau Lingkaran. Caranya cukup mudah kok, tinggal menambahkan Gadget HTML / Javascript saja. Bagi yang pande main blog pasti tau dimana diletakkan menu ini hehee.
Kodenya :
Silahkan ganti nama menu dan link menunya sob =)<ul id="MenuBundar">
<li class="home"><a href="/"><b>Back To Home</b></a></li>
<li class="chat"><a href="http://loker-blogger.blogspot.com/2013/06/ngobrol-sesama-blogger-indonesia.html"><b>Chattingan Dengan Sobat Blogger</b></a></li>
<li class="email"><a href="http://facebook.com/iboy.alfredo"><b>Kirim E-mail Ke saya</b></a></li>
<li class="shop"><a href="http://loker-blogger.blogspot.com/search/label/Download"><b>Download Template</b></a></li>
<li class="delivery"><a href="http://loker-blogger.blogspot.com/search/label/Media%20Sosial"><b>Info Media Sosial</b></a></li>
<li class="search"><a href="http://loker-blogger.blogspot.com/search/label/Software"><b>Software</b></a></li>
<li class="address"><a href="http://loker-blogger.blogspot.com/search/label/Info%20Umum"><b>Info Umum </b></a></li>
<li class="upload"><a href="/"><b>Contac Us</b></a></li>
</ul>
<style type='text/css'>
#MenuBundar {
padding: 0;
margin: 0 auto;
list-style: none;
position: relative;
width: 300px;
height: 300px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkpfkszNRJEaGC7_SCu0cN3grOL1QgQhTW081oSrtnbCN6Zzphdrr2SAzcFHPp0Rd1ZifwgXz5RSv3_JRBPriRpq_aVBZqg2BO6qzDODCZAUCuwKEplvjQ4vb6tD4CqI8sYONLwbRFE4PP/s1600/background.gif) no-repeat
}
#MenuBundar li {
display: block;
width: 60px;
height: 60px;
position: absolute
}
#MenuBundar li.home {
left: 120px;
top: 4px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivhxHMJc_Dn0l0bTAx-BDeELsQpaHn6YrZVpLrmLQoslBF1Qjv5DoRQNf9mzMuB80y5GGcL8Xu20mZmZfi1EqdcetbbsXaGHcISKf3MO5iZfJm5sJZ06bzOY-VTySUJlRQ37MDfU1wpu0O/s1600/home.gif) no-repeat center center
}
#MenuBundar li.chat {
left: 200px;
top: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQT9FwaIKUWq4d3ND_l0xzYt6dhPIf75lGu85uMt0rIZXdyuTQBlMmgUHiCzqZJL_RnbedLROrYo8gDgQud9w_69KzJUrnsINsBQd7lL8hMttIcVnnWJOXjtYmTR7kVnqlVK7YNuTcL82R/s1600/chat.gif) no-repeat center center
}
#MenuBundar li.upload {
left: 35px;
top: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQy4Cqw3Ivjko-8Nu_7vH2nCK5AJC2nJlCoCZ0u3vnxwJ4sAFFxCqQOQD5c_lPE4Ye6MYqNGNYgsLPwu2agfL2OVnugpsx01J3RrqluCudTnt529fwX_RGRjuG1b08wC17DMGhyphenhyphentRqINHU/s1600/photo.gif) no-repeat center center
}
#MenuBundar li.email {
left: 230px;
top: 115px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYvtVJEhTAQHLG0QAK0gJVoiwau2yblWhTG_UBbHFZC54yDb_-ShpitVbPmGW97wB6DI_AeEceNTM29fCDKTreIRkuaK9jxDt5B7VggEaLx3Ghd7zyJMzwqn_O1cKVKhJPRKKGlCiLWVJ3/s1600/email.gif) no-repeat center center
}
#MenuBundar li.address {
left: 5px;
top: 115px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo1csJ0OYa6R-o86thMTo1XYNP5ko3SsJ38VZgNkPSvIWRq4mkkhuPaE3mNYmq_ILfSWHl5MmmDc4nPg3pSPovLKUFgl6G0B9JHhzp13PntZ4rDj_M35lw2l7gTb0R6gUyib0EwGV0Cij9/s1600/address.gif) no-repeat center center
}
#MenuBundar li.shop {
left: 200px;
top: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxDob6gZ3m0vSrZfyXJwzsQ4cgY0nys5SnHeTgp6xwJd8w0fpWi4v9TdfxyM3CckL75w8e_KUtt9Yy0MGm5UQWQJjv4dIY8isMd0fSBl2kivz7LmgVgBRZWoc6tZG77BJmH2kSkhiypPZP/s1600/shop.gif) no-repeat center center
}
#MenuBundar li.search {
left: 35px;
top: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoU8RjMl_cF_4IaqHQpo7KZPIPkqkqPZCgCE8AVMhambjWhrIE2_2hDLpXn4cdxOKDgJZgv4kR13Qfj7t7wSh_AcWLWUr4aeTsF8NmQqDDXzup0lNwb3ei0Ex0-OeCrG_Fk9LGewIUSENx/s1600/search.gif) no-repeat center center
}
#MenuBundar li.delivery {
left: 120px;
top: 225px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBYSzBoGQtC5FnaZOM0RdhpSLF2JpcuCuUjm86L3mY943Dqj25wP3s6786hEoe9Jl_aL4Q8KqLfNBXatJ4-R0CmDLubN7lwgVQFOa7FtH0hnoEVfWdmxkUBjZajmCtcFOp_EqawhhIjjUU/s1600/delivery.gif) no-repeat center center
}
#MenuBundar li a b {
display: none
}
#MenuBundar li a {
display: block;
width: 60px;
height: 60px;
text-align: center
}
#MenuBundar li a:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXWsB1Fc0M5dz88cZMFihWjnjBwrnqZfRYTeTDWxeBxvkP2cKhGhqSvVPPKIC_l0DyQD3Hfiz1_k471EneHlNc7QiAnCWHVX2xPl3VD2ks39J_zUGfflFtPDcRq_aIySc4OjfJbRN76Zuo/s320/circle.gif);
text-decoration: none;
font-family: georgia, serif
}
#MenuBundar li a:hover b {
position: absolute;
display: block;
width: 100px;
height: 100px;
font-size: 14px;
color: #63352c;
background: #FFF
}
#MenuBundar li a:hover b span {
display: block;
font-size: 12px;
color: #888;
font-weight: normal;
margin-top: 15px
}
#MenuBundar li.home a:hover b {
left: -22px;
top: 100px
}
#MenuBundar li.chat a:hover b {
left: -102px;
top: 64px
}
#MenuBundar li.upload a:hover b {
left: 63px;
top: 64px
}
#MenuBundar li.email a:hover b {
left: -132px;
top: -11px
}
#MenuBundar li.address a:hover b {
left: 93px;
top: -11px
}
#MenuBundar li.shop a:hover b {
left: -102px;
top: -87px
}
#MenuBundar li.search a:hover b {
left: 63px;
top: -87px
}
#MenuBundar li.delivery a:hover b {
left: -22px;
top: -121px
}
</style>
<center><small><a href="http://loker-blogger.blogspot.com/2013/06/cara-membuat-menu-berbentuk-lingkaran.html" target="_blank">[ = Get Widget = ]</a></small></center>
