Membuat Menu Berbentuk circle/Bundar

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 SObat Anda Hanya Tinggal Menambahkan

Gadget Html/Javascript

Kalau Bagi yang udah kenal Blogger Pasti tau dimana Letak nya....

Kalau Yang Belum Tau SIlahkan Ikuti Lnagkah2 nya...Mudah Kok...

1. Log in Ke Blog Anda

2. Klik Rancangan Atau dalam bahasa inggris nya..biasa di sebut Layout

3. Klik Tambah Gadget

4. Klik deh Html / Javascript

5. Trus Copy Paste Deh Kode di bawah ini....Disitu...

<style>
#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/AVvXsEiigHThyRyRZQlOX9OXBVuJIBRTNLUf6zToRKh0jWVPl1ohbAwtxlx-QnPVokjU7mWBVaP-Z_iMNaz6uLXFNq8oPOvyd76npbryx8CaDtC4XvY-D2s3iWl-enHbwPckGjdwn6bR6hAoiKC0/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/AVvXsEhGZzvMwjSY3HkoPkufmKCYtg1VmDMyiP1PTnLXaAiFloysTzpdzFsQCkSyGy6aapaQ-diFjoVKp1uZfdsFJ0c2xSoMaRc9j60a56E9al6NI3OoQqNH-ubgd_QJHHRexK5giaxzBogoMd2G/s1600/home.gif) no-repeat center center;}
#MenuBundar li.chat {left:200px; top:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUl2okxqx7V-yIirV_H90ssEjbN6y1-hKL5OrmjLzN72E8tuO1HjzvQQ7fquNwdEba5cL4-KgTUPlsYpBXk841BrjfQcjOL-Z5_rt0o9gZmadD1WbzOR8EP5Vt9-Go0B1bnDtttu7yIcuc/s1600/chat.gif) no-repeat center center;}
#MenuBundar li.upload {left:35px; top:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Di2gSYozeP1SyB34wgFCDHCHtFyS1JAJSpyONIvZ63TyaphwhgX7T-a2Ed82Bu60yOlvh7EJ_cvOsbXHARQXVzG7PJC-3eWztOJZObFXZSGV3Tm0gPQibdR4q6xg9UPKeDqkY8gfB5gh/s1600/photo.gif) no-repeat center center;}
#MenuBundar li.email {left:230px; top:115px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9JFdUB2wIY8ZrAm7kAD_EfWjCfJhQOaJwWEKszAHOWI_y-Gwyi8UEbPFTdJjoVKwb3Ggpizs3IRhoKJX-UE80FHUJJrqYQ5CmcSt0KrWHZS4jtg-2yJzz54HHnALonXJN0OC5RgcgQ8Ex/s1600/email.gif) no-repeat center center;}
#MenuBundar li.address {left:5px; top:115px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQBCgRJIuskMIW-RkA7KlT4VbYoFHrBbxTyqrjEGiMAnFnpTKBgbICNvfC-cmn_5KEyo0L5Xp8UTa5gXRv4vRKJrCY4vufadNTAjgrtvh6vShCJU42TckNLDsvrp4Fa8iXGExeazRgd3D5/s1600/address.gif) no-repeat center center;}
#MenuBundar li.shop {left:200px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCq1lQtDB4EunFAs7wpbiibedkn3gBJAiYEdo7v97VYRwJOy5z6mIy25K2UxN4I8mFF6Z97jHluonO123S9APJOhd78uMvR6p3K1E0nGzKDbEObchV-er3e-Cqxf_Qvm7zF7v36BnYZ1l8/s1600/shop.gif) no-repeat center center;}
#MenuBundar li.search {left:35px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOyGfcow07a6uhLZsoz3w_X8hP92ZF0apjZv7mHTq-5Nj66fvSPECRLqTLw9aujUiYEtmb9h3_RTqR2X55XIaKbKOExFp0yuJMQSCr0AY0Y4CxHn50hx7v0b8uLxXZm7TRN9PxnrTyLoU2/s1600/search.gif) no-repeat center center;}
#MenuBundar li.delivery {left:120px; top:225px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoizzXKXEfZA4P-N7AwaV56iX303HPfWrSnwjb1s8MVHjel1hB21iIyMxiZVo-JrIch4Gd1FPDIr0cvaflgtUkW4QLvVMuM3HFX9z8MywgXHlDcmPLt-TJXi7wfp6xIXNqZcOyXG-_qqB1/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/AVvXsEgHxrrpOLVj1YJwPYTnCtIXCj6rPwMJpQD-sRvqZFxFwTp9YZFPDK68SnTcPM3bNeUQsA0IfS-y18NmcwWG_74dwwzDFSHTNvRJ6ih8_wVd2gvN3kQ0WXaDvsuN_jPC_f__pMCPhzu-5WYw/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>






<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>



Keterangan Kode

• Kode berwarna orange Adalah Kode Icon Gambarnya Anda Bisa cari Gambar Icon nya sendiri atau kalau tidak mau pusing anda langsung saja kesini  icon kemudian cari icon yg kecil -kecil, Atau kalau g mau di ganti icon nya juga gak apa-apa......dari pada pusing
• Kode # adalah Link nya....Jadi Anda Ganti kode # dengan Link Anda..
• Kode berwarna Merah Adalah Nama - Nama nya Anda Bisa Ganti dengan kata - kata anda

Setelah Anda Edit Semua Kode - Kode nya.....Lalu Silahkan Anda simpan 

setelah Itu Lihat Hasilnya.......