Latest Updates

Menu Keren di Blog

BLOGNYA SI IMIN::Menu Keren di Blog

lihat postingan sebelumnya::Icon di samping Judul Widget


Mau buat menu kayak diatas?? nih gampang kok caranya.....baca tutorial lengkapnya di bawah ini!!!

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(http://2.bp.blogspot.com/_XQm2Bew_4mE/TI4aX0nuNvI/AAAAAAAADAo/rnGUq9ndWl0/s1600/background.gif) no-repeat;}
#MenuBundar li {display:block; width:60px; height:60px; position:absolute;}
#MenuBundar li.home {left:120px; top:4px; background:url(http://3.bp.blogspot.com/_XQm2Bew_4mE/TI4aRIG2mpI/AAAAAAAADAQ/kQltcdkKUdY/s1600/home.gif) no-repeat center center;}
#MenuBundar li.chat {left:200px; top:40px; background:url(http://2.bp.blogspot.com/_XQm2Bew_4mE/TI4aMkfvQ1I/AAAAAAAAC_4/os03y7_CEgQ/s1600/chat.gif) no-repeat center center;}
#MenuBundar li.upload {left:35px; top:40px; background:url(http://4.bp.blogspot.com/_XQm2Bew_4mE/TI4aUF6H0rI/AAAAAAAADAg/l2_3lkiWEJs/s1600/photo.gif) no-repeat center center;}
#MenuBundar li.email {left:230px; top:115px; background:url(http://2.bp.blogspot.com/_XQm2Bew_4mE/TI4aQCDZCHI/AAAAAAAADAI/VB8VTBwSOAE/s1600/email.gif) no-repeat center center;}
#MenuBundar li.address {left:5px; top:115px; background:url(http://1.bp.blogspot.com/_XQm2Bew_4mE/TI4aK0QBwBI/AAAAAAAAC_w/ywlaM-QjIWY/s1600/address.gif) no-repeat center center;}
#MenuBundar li.shop {left:200px; top:190px; background:url(http://4.bp.blogspot.com/_XQm2Bew_4mE/TI4aSEof_xI/AAAAAAAADAY/ZUC07XqqgGU/s1600/shop.gif) no-repeat center center;}
#MenuBundar li.search {left:35px; top:190px; background:url(http://3.bp.blogspot.com/_XQm2Bew_4mE/TI4bO1ojRjI/AAAAAAAADAw/CwAHWSSDlMg/s1600/search.gif) no-repeat center center;}
#MenuBundar li.delivery {left:120px; top:225px; background:url(http://4.bp.blogspot.com/_XQm2Bew_4mE/TI4aOh-t95I/AAAAAAAADAA/ivyeOyveJ3w/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(http://2.bp.blogspot.com/_XQm2Bew_4mE/TI4b0tLXGRI/AAAAAAAADA4/0UcEw7f4gYc/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


Ayo Dukung Kontes SEO


0 Response to "Menu Keren di Blog"

Post a Comment