Anda dapat memilih salah satu diantara 10 koleksi menu navigasi vertikal dibawah sesuai selera anda dan juga sesuai dengan template blog anda . Dan semoga koleksi 10 menu navigasi vertikal dibawah ini bermanfaat untuk membantu anda dalam mendesain blog anda sendiri .
Bagaimana cara pemasangan menu navigasi vertikal ke dalam blogger ?
Langkah dalam pemasangan widget ini idaklah sulit , anda dapat memilih salah satu diantara 2 cara yang akan saya bahas dibawah ini .
Pemasangan Pada Edit HTML
- Masuk ke blogger anda dan langsung saja menuju ke bagian Template
- Back up dulu untuk mencegah terjadinya hal hal yang tidak diinginkan
- Paste kode Css menu navigasi vertikal pilihan anda diatas ]]></b:skin>
- Kemudian pastekan kode HTML menu vertikal pilihan anda pada posisi yang anda inginkan .
- Jika Anda memiliki sidebar di kanan, paste kode HTML di bawah kode <div id='sidebar-wrapper'> atau <div id='sidebar-wrapper-right'>
- Jika Anda memiliki sidebar di kiri, paste kode HTML di bawah kode <div id='sidebar-wrapper-left'>
- Kemudian save template anda .
Mode Widget
- Untuk kode css tetap anda letakkan di atas ]]></b:skin> pada area edit HTML template .
- Kemudian untuk HTML code anda letakkan di area widget
- Caranya Masuk ke Layout dan pilih tambah gadget
- Pilih HTML/JavaScript dan letakkan kode HTML menu vertikalnya di script area
- Simpan .
Note* Tidak semua template blogger memiliki kode yang sama , jika anda tidak bisa menemukan kode yang saya sebutkan diatas bisa anda cari kode yang mirip , atau anda bisa menuliskan kendala anda di form komentar dibawah posting ini , mungkin saya akan membantu .
Cara mengedit link pada menu navigasi :
Untuk mengubah Link Tab Menu dan Judul, cukup mengedit bagian yang bercetak tebal dari kode HTML seperti contoh ini:<li><a href="#1" >Link 1</a></li>Ganti # 1, # 2, # 3 dll dengan URL/Link Anda dan ganti Link1, Link2, Link3 dll denganJudul Halaman Anda. Jika Anda ingin menambah atau menghapus tab maka cukup menambahkan atau menghapus baris dari kode HTML berikut: <li><a href="#" >Link</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link 5</a></li>
10 Menu Navigasi Vertikal
1.
Css
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSmrMrH_pqpHGYEyLV_vaJNJoLMDsJmxTP6DFIUTofVI-YFw5uOMrxanGVV_RBcMO6gCqTzDl0QxwbmtLdZ0G0fVuleXao7UM2x38JehdRR9RfU-Z6l2iO4BfLsiVzFESTA0Ol_Fvy4-A/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSmrMrH_pqpHGYEyLV_vaJNJoLMDsJmxTP6DFIUTofVI-YFw5uOMrxanGVV_RBcMO6gCqTzDl0QxwbmtLdZ0G0fVuleXao7UM2x38JehdRR9RfU-Z6l2iO4BfLsiVzFESTA0Ol_Fvy4-A/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }HTML
<div id="menu6">
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>
2
#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67k_iPYOnint87avx2dDSqyu1YHJJDcnmlnUOtgZOw-k6bTC9-GI1OlKcdipmksqvFmYSn0TJEBezwO8OK4shRmK1K76wrNta3FVJjHHW1NqupdR9CpoYPKSFU7vi2FXSr3jTrEE66wA/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj67k_iPYOnint87avx2dDSqyu1YHJJDcnmlnUOtgZOw-k6bTC9-GI1OlKcdipmksqvFmYSn0TJEBezwO8OK4shRmK1K76wrNta3FVJjHHW1NqupdR9CpoYPKSFU7vi2FXSr3jTrEE66wA/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }HTML
<div id="menu3">3
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link 5</a></li>
</ul>
</div>
#menu9 ul { list-style: none; margin: 0; padding: 0; }HTML
#menu9 img { border: none; }
#menu9 { width: 200px; margin: 10px; }
#menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link,
#menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmhic5yf4Inx2Qc44wdyV2XoFKzE1ofeY3z8Yfu1cJIi-P9wQHLwDoUGIJh-kYF50w_hlJTu01PLmRRg3q7E4Ch5KaEKMRNa1MLf7uIdfJK_wMhcBAgQmCbjNe6RFlHwFP1bSvfAtGf88/s800/menu9.gif); padding: 8px 0 0 35px; }
#menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmhic5yf4Inx2Qc44wdyV2XoFKzE1ofeY3z8Yfu1cJIi-P9wQHLwDoUGIJh-kYF50w_hlJTu01PLmRRg3q7E4Ch5KaEKMRNa1MLf7uIdfJK_wMhcBAgQmCbjNe6RFlHwFP1bSvfAtGf88/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }
<div id="menu9">4
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link 5</a></li>
</ul>
</div>
#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWh1rd_H2BTL7hKHixgHPUt3N-6g37ewmKHKw2wmewmQL2PhbXI6KC2dn11tz_nNU3KadVGMdgKC2YmzhbN_EcTUiJ_jHqTMe6qgbrwJ53w6F4DFvqfAA-6j8igulGlAQPzD2Rw-Y13s8/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWh1rd_H2BTL7hKHixgHPUt3N-6g37ewmKHKw2wmewmQL2PhbXI6KC2dn11tz_nNU3KadVGMdgKC2YmzhbN_EcTUiJ_jHqTMe6qgbrwJ53w6F4DFvqfAA-6j8igulGlAQPzD2Rw-Y13s8/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }HTML
<div id="menu6">5
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link 5</a></li>
</ul>
</div>
#menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjixniBhppmZQ1BY8-0PxXXQ_8UvGdBoGwKywbClgbbS2m5ZGI8yPwAD9KACpcWDcQxu4u4vWPG0ucr_DfjQwN7StbYeVUjzmdKR7EzWFNoo1i0j6xzZOQ5ww-n2xwR-EOQ65GqFEk0ksY/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjixniBhppmZQ1BY8-0PxXXQ_8UvGdBoGwKywbClgbbS2m5ZGI8yPwAD9KACpcWDcQxu4u4vWPG0ucr_DfjQwN7StbYeVUjzmdKR7EzWFNoo1i0j6xzZOQ5ww-n2xwR-EOQ65GqFEk0ksY/s800/menu14.gif); padding: 8px 0 0 10px; }HTML
<div id="menu14">6
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link 5</a></li>
</ul>
</div>
#menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIu9JqLvG_IocCkqpH3LMc3AgI6RHnwfzH_TW4rz-QzewHG9W9mWSnUnINW7h3LeSUYae7p-PykYqZ8pUbPZhcgEPaGC3MPmSkCjXMqHme7GVa-QOsWVwIdRwN7EVJBsgNgAF3mDBCZeE/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIu9JqLvG_IocCkqpH3LMc3AgI6RHnwfzH_TW4rz-QzewHG9W9mWSnUnINW7h3LeSUYae7p-PykYqZ8pUbPZhcgEPaGC3MPmSkCjXMqHme7GVa-QOsWVwIdRwN7EVJBsgNgAF3mDBCZeE/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }HTML
<div id="menu7">7
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link 5</a></li>
</ul>
</div>
#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj84aA3LDSp3HDQph7oUsiuv-zvfvWGy6MCbDBA5NKtMHXWzENs7jy_qQDDZbKen-2H_oZoPi8598D7jtk9Fola3epH-Neyr2DupmMcbe5i4QwSchxA3sQJfdT-0nlmqWD94NVliyUU_SE/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj84aA3LDSp3HDQph7oUsiuv-zvfvWGy6MCbDBA5NKtMHXWzENs7jy_qQDDZbKen-2H_oZoPi8598D7jtk9Fola3epH-Neyr2DupmMcbe5i4QwSchxA3sQJfdT-0nlmqWD94NVliyUU_SE/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj84aA3LDSp3HDQph7oUsiuv-zvfvWGy6MCbDBA5NKtMHXWzENs7jy_qQDDZbKen-2H_oZoPi8598D7jtk9Fola3epH-Neyr2DupmMcbe5i4QwSchxA3sQJfdT-0nlmqWD94NVliyUU_SE/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }HTML
<div id="menu2">8
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link 5</a></li>
</ul>
</div>
#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGVvaRFi96I6DAaxrOrKoSlymA19EWXoU7lsXSgNb9n7tKLyBG5dYMqtfRZWlGV6hxWvHlMk_f7ezKsdaKsjoIIjwwm3AIgUoGSlkkFSPA3lIwHsdRf7eybP9AD-YRz-JauFPWrhWLSm4/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGVvaRFi96I6DAaxrOrKoSlymA19EWXoU7lsXSgNb9n7tKLyBG5dYMqtfRZWlGV6hxWvHlMk_f7ezKsdaKsjoIIjwwm3AIgUoGSlkkFSPA3lIwHsdRf7eybP9AD-YRz-JauFPWrhWLSm4/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGVvaRFi96I6DAaxrOrKoSlymA19EWXoU7lsXSgNb9n7tKLyBG5dYMqtfRZWlGV6hxWvHlMk_f7ezKsdaKsjoIIjwwm3AIgUoGSlkkFSPA3lIwHsdRf7eybP9AD-YRz-JauFPWrhWLSm4/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }HTML
<div id="menu2">9
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link 5</a></li>
</ul>
</div>
#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQjFLFCoGUgMbg3Y3IDfigsnkTY44CBFKb7Ma9ikdvClGc7KU4Qld1jzizLSQlWYlmwpYoIKNlRwbFDAHML_drqGurl_7-QtmG6uKNCjpF-6w2aoXctBnmVShsZgqMfXfP7slMgM9z4fI/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQjFLFCoGUgMbg3Y3IDfigsnkTY44CBFKb7Ma9ikdvClGc7KU4Qld1jzizLSQlWYlmwpYoIKNlRwbFDAHML_drqGurl_7-QtmG6uKNCjpF-6w2aoXctBnmVShsZgqMfXfP7slMgM9z4fI/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }HTML
<div id="menu12">10
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link 5</a></li>
</ul>
</div>
#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJRs2w98EtzN1Iv8Njnigr7bwINPnOmthg3gMnP1E_rjyKZSh3pCR5ex8d6WQcXkppiaGl3qjlKQglbaev6TklLPVgsEapRidqCzxPpDSkEFQIKT4TYdBcrQEFQZL9xGR6ORERVWr_aPw/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJRs2w98EtzN1Iv8Njnigr7bwINPnOmthg3gMnP1E_rjyKZSh3pCR5ex8d6WQcXkppiaGl3qjlKQglbaev6TklLPVgsEapRidqCzxPpDSkEFQIKT4TYdBcrQEFQZL9xGR6ORERVWr_aPw/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }HTML
<div id="menu12">Oke itu dia menu navigasi vertikal yang bisa anda pilih untuk menambah unik desain blog anda .
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link 5</a></li>
</ul>
</div>
Sebenarnya masih ada beberapa koleksi lainnya , tapi karena keterbatasan waktu , jadi saya putuskan untuk mempostingnya dilain kesempatan . Semoga vertikal menu navigasi for Blogger ini bermanfaat .
Arahkan Kursor dibawah ini untuk memberikan komentar.
No HyperLink dan Komentar Hit&Run akan diacuhkan . Berkomentarlah dengan bahasa yang baik dan benar EmoticonEmoticon