Hai SObat BLogger.......Semua Lamaaaaaaa BAngget
Gak Nulis Tutorial.......Aku Udah Rindu BAnget..Pengen Nulis
sebuah Tutorial Lagi.......Pengen Nulis Tutorial, 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 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/AVvXsEgcrZ7g23oRKuHQq6t8SyJh9fA1Ou7XbMEHS6TaRhAM7-y5K-e3GPpfAT0DEZPdYbaMtyxpue4ux9r2BsAKHApPc5fkF7mUwEzgHzJwaiodbVa3ayRwOmmPJxMt9arWPIPw9YY0Aqoi-Qkj/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/AVvXsEgi09DsnXdTjkvOY3EYaEvIasR56jZrzJl221JkoW-q_1iX-bHy82JLMKhvuJGsQFMQBywaa5HspljkMgOiU7jsJV6uWjqnfCvwoFvbnO2IeRG0p2ZTf-kgWRnNQV_FdoUxTQ6eBmFG0DeY/s1600/home.gif) no-repeat center center;}
#MenuBundar li.chat {left:200px; top:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt6LFGXPrvGvbA-ZlzPohExPldElV9YcYCYNpBH4CGHwDkedSGhdl-CXY17wLYbCOtrVd2vSHrFuU-BRjoP0fLk5SRZJKgpYAb9B2CFFtlG5pR97nocHbiL-XMQm3rLcFvs3ZjBuanLsZu/s1600/chat.gif) no-repeat center center;}
#MenuBundar li.upload {left:35px; top:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRRhvwk4YLjX1goYL9_fMpTwGbFItJB9oPLgAU_rTNpWCbbRREX3QzQ39keQqFKg_ZQf3-GPAFauZIv0005nk-nflKjd_PaWAGzcOISF002pukx7ZD0X2wBAKoyC2_B_YQ0tDrdFE2zFRZ/s1600/photo.gif) no-repeat center center;}
#MenuBundar li.email {left:230px; top:115px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA4Or4B-xBvYMZW5pFYbrojvH57E4FLjiDCz-LkU5NBS67kSp5SPXSUcYKzYPr3n7RwOUF51HnfcoyDOf8LeoxrPD3turCRQNylsFgn19cJHmjgIUFO-SCYZLFEQ0wOParpbwJWrs70QhA/s1600/email.gif) no-repeat center center;}
#MenuBundar li.address {left:5px; top:115px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlMfFCBYU5-LNJFjrv-I0lHp2ZgRWNychnDrZjCIgilBsSR96n9gTogGKajw9dWpc2LljGmz5gjP5xB9mbQ6OvwsRv6I27ahfR7H8tuuW2pDM8k5x0-GTjGjwwlVr8k9pW9uB4SIs3_hs4/s1600/address.gif) no-repeat center center;}
#MenuBundar li.shop {left:200px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMf27IElAIKgEkYJZhfTJh3uAczSszVYbdZwdKEx7UTvWN0uFFE-BO2uiZIge3uX7Hkc99C4BMJEEU4q7OlKPxtljXu32v4GYfV-gp1puo_BLDQ9RhmFOEcKShgsFtQTbu8OP-VrooAMhg/s1600/shop.gif) no-repeat center center;}
#MenuBundar li.search {left:35px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmMv_HEngv2miioqw1DlDMkzTrjDpx3ejzwvkUpdw9lTdiW5jl39EXYQwd-BDaHm_xal3yd3Rg3hJK5JAIQoaI5_MItJ3RefheIPaxRsdZcx_OPqI0v7f1e3RWFq1LMb9kH1JRhta00DdP/s1600/search.gif) no-repeat center center;}
#MenuBundar li.delivery {left:120px; top:225px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLGPas5ah51k8_eVqOH1IxX4jOIVpSEBhTpz5RfuCRJ8VLBkVvkp0HvVgsaGNhK2F7hKdzi4CSl0FdiINB3MOwIHT6Y8e44jr1WfvtDHX65snMqxgOeAZ_W70Hot-NrdraWbdN5Jgat18b/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/AVvXsEhvPlCSejZ-f1rirrh0yAV7YP0mwgjoJDdnqdmNYvzkIETDJP7DBpamvhGsm3OGr21VkBxrpRbckwu6D462Qt7R9b2lH7971qwUpY3NLw5VPCLB01u5ciPOpXzAeaY7xaprbGu7PpnSX24Z/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 kuning 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.......
