Hai sobat blogger, Semua Lamaaaaaaa BAnget Gak Nulis Tutorial, Aku Udah Rindu BAnget, Pengen Nulis sebuah Tutorial Lagi, Tapi Semua Udah, Ada Di Blog Masing- masing dan Hampir semua Blogger Udah Punya, Walau Ada sebagian Yang Belum Punya, Nah Di Kesempatan Kali ini Saya Akan Mencoba, Cara Membuat Menu Berbentuk Circle Atau Bundar, Seperti Apa Sih Bentuk nya Nah Jika Anda Penasaran, Nih Ada ScreenShot nya Di bawah ini
Gimana Sobat....Apa Ada Yang Mau.......?? Kalau MAu Buat Menu Seperti Itu, Caranya Cukup Mudah Anda Hanya Tinggal Menambahkan Gadget Html/Javascript Kalau Bagi yang udah kenal Blogger Pasti tau dimana Letak nya, Kalau Yang Belum Tau Silahkan baca: Cara memasukan kode html di blog
<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/AVvXsEhnzO-fGVt4bRJxr2fC_eBhaoDpEPQBG38xocComOq_T84DGrmtcd7JA_x_r0Zx0JbvQQjCFjU_10AAI5waDhbFfjs-kbLozERlVMmzTDFKfNDIVEoio0VmFQSdXvFPfKYKYDvUIi5zQEdV/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/AVvXsEgwG62l4I-ittjx0e9NZUJsctht9IJ4JVV5aWst_b1kpoy4bHgR9fm7aoQsZOJ84aeUugqzVopc97PfRSfymH-AhWZes_MX1hdrhsCMcuL6qKwW3Q1_HOAYdN1Jpc4Cx2AJyrHHxPN-fC4s/s1600/home.gif) no-repeat center center
}
#MenuBundar li.chat {
left: 200px;
top: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjonzZf6CMelDrLuX2sRoX4xqjLoYAhjNYQFX6G1t6LSDt5gPdnuBnGbN4NvENNlei5RCa9zWkOG95l4WNG3P4_lBl6x-12bahBFPL55zVJ6R2LpqFLhAy5IuB8x7Lywh6TgXxymPlA-SiI/s1600/chat.gif) no-repeat center center
}
#MenuBundar li.upload {
left: 35px;
top: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_9vYFzexaghLyqRZfyynoj0xjikz5lljKUQnX3MWNJ5PNaboCk1ybRWBHFidgUL9ZAfKVCk8ueNYA8W1o5oX47rJpAaSf6pQJonQ90XyUtth2B3RBHky9noQQqTz5JAei-LkybSuYqq4i/s1600/photo.gif) no-repeat center center
}
#MenuBundar li.email {
left: 230px;
top: 115px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSJSWIbFwQ8WbDAum_EFlBwaFg77YaTqVD0v578ah80iAAiAB4igSZuUmMvJIprOLbW26trk3VSo-FIlA58hfOPeaUA3SGh-Oa4RKDVqI5DdoX70SjD2plABTs7c7BsMeMfWNFhJjvn3wy/s1600/email.gif) no-repeat center center
}
#MenuBundar li.address {
left: 5px;
top: 115px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioDT6xXJlOijj-J9B8oXxpEfaITFwDTVUvehg-q4Qw_lBgKCGuXCY0KsjFIcZJ8y4CSB82957n2xjb9M1vicTf5Qbw01FYyHFoSxpYKLGWwpn6eQlgGFDmaRt4yuL06XyLLbBZTQDv_hl1/s1600/address.gif) no-repeat center center
}
#MenuBundar li.shop {
left: 200px;
top: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDsPpM0Fh-o-_wEig-12Y_4XvFEF8zkzBviHf06YnmTj4-XBSKqsKkNjRrCrYQ6XVB0BUXYDlAd_3FnEG9lO42Uv6WpTNpZxbzRp4bSB65RIPwbKFAblMhVbjzhfMa8m-6VMLEj973I21A/s1600/shop.gif) no-repeat center center
}
#MenuBundar li.search {
left: 35px;
top: 190px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifveYX9-PYBnr4O-kdnNIO2mJqg-LC_tRlNXqIJHjy5Cleoqg1w1H8V667Xjj0F5IgBSgJ-WwAapHpRBJw0OJc3sHk4IwKOqGxw2_v4asiP0GomeSK3zONOZ_OBmAj8XlPOtdK_Y5EFeaf/s1600/search.gif) no-repeat center center
}
#MenuBundar li.delivery {
left: 120px;
top: 225px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGuD7_yjMl2D79KkfXLlztAaR15FE4Nzo5T8KC8yGNmNdoRjy-1_nDQFTpdPCbxI7zzqmABFEVtX_wBUftkK-8PPeK5NCZjErKWfhgV6FolMmGzNB32NDwduPcpezsRD69NEYR44J3VDvO/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/AVvXsEhODBkiFFYlvzi330rRj0HvAsjpljMyCaiija-INfJ8Rbmbwl9_r6iJp0YcZsF0tjepRPuLiHpO-T3avSjj5VGu-5fd__4dbC4r8B0DoARRJiG27eWSRBUQiIS5Qcf6IIon0T4DACWjGB6Z/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>6. Klik SIMIPAN.
