Menu Keren di Blog

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. Terus 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/AVvXsEg2ncX-WKZf0SJ12mlnLJzwvy_4acAGImTzbJ9VSKIJFZUfE9Y9dVFNa1jqONRsIRNe-D9ZGKIt7p1dV9tnKxKRDKidBYty3J_u__COavOSjQoCBYjpYhawE7uMy4cIZAwQflpQj_zvNEiq/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/AVvXsEjwiolyQyzB2UQUwuXlAuZDRHehKu7qO-UvVYHRWtGb3b_HkL760GpDKJyN_arnUMvMN5rSR-4jCZLyOstPa4KnbymxMslQyJM38IE0hpuaF4Mew25ibwFbQR1Zsi0ZsJ4HkXPRFCptrXkp/s1600/home.gif) no-repeat center center;}
#MenuBundar li.chat {left:200px; top:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ7qulpg6T_e1NaS0gVtTaNAwsEbXLnpw_klE88o7f_Ong2qeuAXYBlwyT6v-v-oRkx-Elar6drpaV5iYnEc_OlyG-qqbW23SS-z7N38yHJELMoAGo8Z8XbXruPq6HewKiJLMceADk7s-5/s1600/chat.gif) no-repeat center center;}
#MenuBundar li.upload {left:35px; top:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO1knqqJsJ9uvh4Wc99GMWShT3vDwdDqHQb2uti4tVnTd6ItQTSlqWIIALS0z_q1xTPGA2e8WB4WD4jlT7uJg5oXtPVPkmE0bsAF3HTUJf-u96YpPHuKohPlCGqLzcy1WAN7Sd80gv_nDh/s1600/photo.gif) no-repeat center center;}
#MenuBundar li.email {left:230px; top:115px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj690O1lAWCFdqHQS6koIEjFtjoVh31CF5-xEg5rHeMbgZ64Y18nKzl9rgqHJbKPMftVl-nmWG1eA35FehovyoI4Owvkigwb8F5f9mZJWmzcpNAgYeqqCa_UIsnVvMUCUnkDOV57HfbXE0P/s1600/email.gif) no-repeat center center;}
#MenuBundar li.address {left:5px; top:115px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtqTnF1gRK4tFe0nEOu5mKsc3qeQDHCbIthAsbRfgoR_jZcM09crc8VsEmhr5wgoNMJFTkgSZ2QjxquK4dsQT1NcEbv_6Ls6a9FD8Fiy82T7L25lZeVosVWdjAzFpSjXYdxqVbHQ8pUfU8/s1600/address.gif) no-repeat center center;}
#MenuBundar li.shop {left:200px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI9uUrPk75EIGpzsG2Km4HLokg-DzuotpmOXGMK1hTQRsHjxP0hofyHs5E05w3awi8CUUOrj0xoKRH4gFgaNg1QmSkBcl5dbg-y4hkW4MaDzCFmegDzh5ZitE1PXj5VUNjRYc9fusjx8Xg/s1600/shop.gif) no-repeat center center;}
#MenuBundar li.search {left:35px; top:190px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLJpvfuSNUxD8Plc1-WgeXdU4VvxW94BfvoyKkAngSnHHuSe-lwzrKcVtaRM-u-hKlXzE6Llp4s93vUc3YKxVRVr7h5xEpezWDqWgq1H2VgDz_GmpRRcnjp1qNbsqmvIEBTLoie9ABCexo/s1600/search.gif) no-repeat center center;}
#MenuBundar li.delivery {left:120px; top:225px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIvAt0HpjD1Z3pd-Uui-EE3a9-N6iFKKVKGwDtbbQXA1tJKMIQXzHmb1HJAxYqDXC4h99lEunzicWEo1nDquQ1KxASHxRbe33JiVeZAQyPzkRyvUdZ1wlM7BDLzqk2FkVMn3U30sbbBwi0/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/AVvXsEgquNNGBqU3Q2afk-cn4iY4hcS_xcyKQcP4RJ6kW4r311vBaVP7_rHQ_YTosPDpoymbrkZy6dUilYYKOhmqqYTvtPGlJ1wlWJMWyJow5Xn9JTakEurNpJF6r1Sd-IZUkjsMVwpHqe9HXxAE/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 yang digaris bawah 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 yag dicetak tebal Adalah Nama - Nama nya Anda Bisa Ganti dengan kata - kata anda

Scroll to top