Cara Membuat Menu Berbentuk Lingkaran

Sabtu, 30 Juni 2012

,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.
menu keren 2011

Kodenya :
<ul id="MenuBundar">
<li class="home"><a href="#"><b>Udah Tidur Belom Nih</b></a></li>
<li class="chat"><a href="#"><b>Chattingan Dengan Sobat Blogger</b></a></li>
<li class="email"><a href="#"><b>Kirim E-mail Ke saya</b></a></li>
<li class="shop"><a href="#"><b>Toko Online Gan</b></a></li>
<li class="delivery"><a href="#"><b>Mobil Tukang NAgih Utang Nih....??</b></a></li>
<li class="search"><a href="#"><b>Kaca Pembesar Buat Nyari Artikel</b></a></li>
<li class="address"><a href="#"><b>Catatan Hutang </b></a></li>
<li class="upload"><a href="#"><b>Photo - Photo Blogger</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/AVvXsEh1G51trujeACZD4TbTgR3JumgAmY4ZuQtFOei-_JSpFvVQtcPAf_jPffQdGV0Ah6LNVeX2SKGn6XWAAh-cDFUKP_4CU7Q9JImQRZL7WzptJPdWHdSNFHjE8-CxAw90JjO2RZLhXdEU7fBl/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/AVvXsEin5YhE2ahxJmPnjxTTripMDilWVb3IxNcNb_Q51lQ3YNVSWliJAcTE2kiALP8LtikiW0A9D-ON2fU5C4QDMeJE4z1WnVzel_-v3K0QWWhLbeyp2HvSDS46Qd_mebaXAYLcScF42V-ZO7PI/s1600/home.gif) no-repeat center center
}
#MenuBundar li.chat {
left: 200px;
top: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE7dXqpF1t0GgIlIf2uRBQFgDEjNwzAypN-_cxvko5IqsQLqaAbr9sjC5RkqITxwOGA_3BHf7NcQ0mfVxolIqG5jUPqk4rSL5rtprDjv_2z-178zfts3UiDNIZn1Plv2HPgjFqmenJWXeM/s1600/chat.gif) no-repeat center center
}
#MenuBundar li.upload {
left: 35px;
top: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmCwJ9YYArbZh-gQ5I9S45TAjHXskCwBDavCWJ_gBLELuvPPprKhLNrgYp9MgWiCPdJIs53JhtbBbwK-bAzDqLdQ1n7suNct9u2o42maXFCyMFCrvBmZwmC30Tm7kZ4qyBzKC5Q7K1f0Rw/s1600/photo.gif) no-repeat center center
}
#MenuBundar li.email {
left: 230px;
top: 115px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNwdCqQxK3bUwrkPkuOFkv1F-5BpJWAeVhGgKoo7VG-txTu7lcWV4GJYWQPNLSeJhd7t8eZonBkJzRoYeo_xwAMPJ9fOGBcpuLFjSDjcFYSocOEq1s0Tv0tSkINgI8Ylq51c6lwnRJ4a3t/s1600/email.gif) no-repeat center center
}
#MenuBundar li.address {
left: 5px;
top: 115px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-BE7nnbsB9JWNOdS5zkxTKJsrBXjeeO3llXbS1Nu247GBVk7n2_8z4XVtDhJUXy92wB7OIhIZoVDzbQXdAru3KilTIDiQjnnG7g0gIRnk66NndkDOexNBQuqNZxmex611p4w16ilTqqhI/s1600/address.gif) no-repeat center center
}
#MenuBundar li.shop {
left: 200px;
top: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXDduYk97LC5jDzBqMSIVBR1xVROB7dWHLEfwMCd06wQ5jaNWXLJTk6zeZx3JmmoqjCjggyTZMLPRuZMDJS91QkI5sGwh3zBaL4I5Ilnlzve6JwHpcnViUa8e2I-ptKYUusC8Wn1C6Giqj/s1600/shop.gif) no-repeat center center
}
#MenuBundar li.search {
left: 35px;
top: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4JaW-CfUd4LOedr1Cs2IEDY0Pv2CcWQp8IIFOuXQpHFKX6wwKs-Aj0VKuaIDuLWVTqR2W9HbR8lQLxO1RAQ_LRAFcFQc2bVy1f73EFdtmV-5K4BQ0uWtK0iKmvKmlkGC8Yu8PQPU0K8si/s1600/search.gif) no-repeat center center
}
#MenuBundar li.delivery {
left: 120px;
top: 225px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMDdpsFewweXpikdbzMKjkjrGP6007VqxXIkkzrJgXpqqpd8EkVtJ9gE3K19UsWUYtoqY7bDrZciaG5OXXa254cFIHAtyl2L2WdNWar-o01aPlhpTfw1aCt8X5gh8GgqyX3isqeFVTPhTd/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/AVvXsEhqWMPV5op8SwvP2UtHmwAJzlaKh6MRFsVKyhRlmRsYPd_WzDWE_fuBodWbu_RxZI-0vCETDStIfQk81prY25dQpV7KKyOFx8DT36O6KObbHf3qqBsqKP3gRvw1kkB5vHyMFwI-zW86DjYF/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>
Silahkan ganti nama menu dan link menunya sob =)

Leave a Reply

Jika ingin copy paste artikel ini, jangan lupa sertakan sumbernya ya, hargai usaha admin ^^, Kalau mau komentar jangan yang bersifat menghina maupun mengejek. Tidak sopan tau hahaa. Terima kasih sudah berkunjung ke blog ku. Jangan lupa di follow dan pasang banner ku ya \^^,/

Subscribe to Posts | Subscribe to Comments

Join this site [>>Get More Frame<<]

Arsip Blog

Ayat Alkitab

Friend's Banner

Copyright © 2013 David As'Chri ChieLietonga 06 | Robotic Notes | Powered by Blogger

Designed by : Johanes Djogan | Redesignde by : David As'Chri ChieLietonga 06: Cara Membuat Menu Berbentuk Lingkaran