10 Menu Navigasi Vertikal Untuk Blogger

10 Menu Navigasi Vertikal Untuk Blogger 14:49
10 Menu Navigasi Vertikal . Berikut ini saya bagikan 10 Menu navigasi vertikal yang keren dan cantik . Setelah melalui testing , semua menu vertikal dibawah ini 100% work dan kompatibel di Blogger .
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>
<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>
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>

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(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7zmvMfQI/AAAAAAAACrQ/herewFa4gNQ/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7zmvMfQI/AAAAAAAACrQ/herewFa4gNQ/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
 Css
#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(http://lh5.ggpht.com/_7wsQzULWIwo/Sze6a84WulI/AAAAAAAACpw/o1vXeHb6wnw/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze6a84WulI/AAAAAAAACpw/o1vXeHb6wnw/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML
 <div id="menu3">
<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>
3
 Css

#menu9 ul { list-style: none; margin: 0; padding: 0; }
#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(http://lh6.ggpht.com/_7wsQzULWIwo/Sze74hbQVSI/AAAAAAAACro/preFOt7muGA/s800/menu9.gif); padding: 8px 0 0 35px; }
#menu9 li a:hover { color: #FFF; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze74hbQVSI/AAAAAAAACro/preFOt7muGA/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }
HTML
 <div id="menu9">
<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>
4
 Css
#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(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6kFX7HII/AAAAAAAACqI/yAWa9ZgZMPU/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6kFX7HII/AAAAAAAACqI/yAWa9ZgZMPU/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }
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">Link 5</a></li>
</ul>
</div> 
5
 Css
#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(http://lh5.ggpht.com/_7wsQzULWIwo/Sze8BFiRUuI/AAAAAAAACsQ/TSV9un0iQfE/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze8BFiRUuI/AAAAAAAACsQ/TSV9un0iQfE/s800/menu14.gif); padding: 8px 0 0 10px; }
HTML
<div id="menu14">
<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> 
6
 Css
#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(http://lh5.ggpht.com/_7wsQzULWIwo/Sze71ba8QDI/AAAAAAAACrY/MPJLHCcZc2g/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze71ba8QDI/AAAAAAAACrY/MPJLHCcZc2g/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }
HTML
 <div id="menu7">
<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>
7
 Css
#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(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6YO033vI/AAAAAAAACpo/WkgKyq9Du-c/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6YO033vI/AAAAAAAACpo/WkgKyq9Du-c/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6YO033vI/AAAAAAAACpo/WkgKyq9Du-c/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML
<div id="menu2">
<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> 
8
 Css
#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(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }
HTML
<div id="menu2">
<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>  
9
 Css
#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(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7-X35bvI/AAAAAAAACsA/RWo_eC1a6l8/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7-X35bvI/AAAAAAAACsA/RWo_eC1a6l8/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; }
HTML
<div id="menu12">
<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>  
10
 Css
#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(http://lh4.ggpht.com/_7wsQzULWIwo/Sze7_lAyz9I/AAAAAAAACsI/2kHgX_EVeow/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze7_lAyz9I/AAAAAAAACsI/2kHgX_EVeow/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }
HTML
<div id="menu12">
<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>   
Oke itu dia menu navigasi vertikal yang bisa anda pilih untuk menambah unik desain blog anda .
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 .

Share this Article

Related Posts

Previous
Next Post »

Arahkan Kursor dibawah ini untuk memberikan komentar.
No HyperLink dan Komentar Hit&Run akan diacuhkan . Berkomentarlah dengan bahasa yang baik dan benar EmoticonEmoticon