Memasang Menu Navigasi

Menu Navigasi biasanya untuk mempermudah kepada pengunjung agar dapat memilih dan menjelajahi blog anda. Menu navigasi yang saya akan berikan ini beda dari yang lain. Untuk mau tau lebih lanjut klik saja link ini nah arahkan pandangan anda pada bagian di bawah header, sudah tau?? itu yang di sebut dengan Menu Navigasi.
Trik ini saya dapatkan dari dynamicdrive.com di sana sangat lengkap sekali tentang efek, nah di sini saya akan menerapkannya dengan bahasa Indoneisa karena di sana bahasa yang di pakai adalah bahasa Inggris. Untuk memasangnya mudah sekali tinggal ikuti saja langkah-langkah di bawah ini :

Login ke blogger
1. masuk ke Tata Letak ===>> Edit HTML
2. Backup template anda agar tidak terjadi hal yang tidak di inginkan
   
3. cari kode ]]</b:skin> dan taruh kode di bawah ini tepat di atasnya :
   
   
   .ddsmoothmenu{font: bold 12px Verdana;background: #72a8d2 url(http://img291.imageshack.us/img291/4531/navbgbluekp4.png); /*background of menu bar (default state)*/width: 100%; }.ddsmoothmenu ul{z-index:100; margin: 0; padding: 0; list-style-type: none;}/*Top level list items*/.ddsmoothmenu ul li{position: relative; display: inline; float: left; }/*Top level menu link items style*/.ddsmoothmenu ul li a{display: block; color: white; padding: 4px 10px; border-right: 0px solid #778; color: #2d2b2b; text-decoration: none; font: 14px Georgia; font-weight:bold;}* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/display: inline-block;}.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{color: white;}.ddsmoothmenu ul li a:hover{background: #dee5e5; /*background of menu items during onmouseover (hover state)*/color: #2299ff;}/*1st sub level menu*/.ddsmoothmenu ul li ul{position: absolute;left: 0; background: #414141;display: none; /*collapse all sub menus to begin with*/visibility: hidden;}/*Sub level menu list items (undo style from Top level List Items)*/.ddsmoothmenu ul li ul li{ display: list-item; float: none;}/*All subsequent sub menu levels vertical offset after 1st level sub menu */.ddsmoothmenu ul li ul li ul{ top: 0; }/* Sub level menu links style */.ddsmoothmenu ul li ul li a{ font: normal 13px Verdana; width: 160px; /*width of sub menus*/padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray;}/* ######### CSS classes applied to down and right arrow images ######### */.downarrowclass{ position: absolute; top: 12px; right: 7px;}.rightarrowclass{position: absolute; top: 6px; right: 5px;}/* ######### CSS for shadow added to sub menus ######### */.ddshadow{position: absolute; left: 0; top: 0; width: 0; height: 0; background: silver;}.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/opacity: 0.8;}
   
4. setelah itu cari kode </head> dan taruh kode di bawah ini tepat di atasnya :
   
   
   &lt;!--[if lte IE 7]&gt;&lt;style type=&quot;text/css&quot;&gt;html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/&lt;/style&gt;&lt;![endif]--&gt;&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/&gt;&lt;script src='http://ads.googlecode.com/files/wh%20ddmenu.js' type='text/javascript'/&gt;
   
5. Nah Setelah anda taruh kode di bawah ini di antara kode body atau apabila anda tidak mau ambil pusing anda taruh saja di Element halaman dengan menambahkan sebuah gadget tapi sebelumnya harus anda simpan terlebih dahulu
   
   
   &lt;div id=&quot;smoothmenu1&quot; class=&quot;ddsmoothmenu&quot;&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=&quot;http://clwolvi.blogspot.com&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;page 1&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 1.1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 1.2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 1.3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 1.4&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 1.2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 1.3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 1.4&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Folder 1&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 1.1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 1.2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 1.3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 1.4&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 1.2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 1.3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 1.4&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Folder 2&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 2.1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Folder 2.1&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 2.1.1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 2.1.2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Folder 3.1.1&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 3.1.1.1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 3.1.1.2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 3.1.1.3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 3.1.1.4&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 3.1.1.5&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sub Item 2.1.4&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href=&quot;http://oketrik.blogspot.com&quot;&gt;Trik Lengkap&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;br style=&quot;clear: left&quot; /&gt;&lt;/div&gt;


6. setelah selesai dengan langkah di atas simpan dan lihat hasilnya.

Semoga anda puas dengan trik Memasang Menu Navigasi, dan mudah-mudahan blog anda tampak lebih menarik dan Nyaman untuk di kunjungi. Mungkin hanya sekian yang bisa saya Beri mohon maaf apabila ada kesalahan.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg