Cara Mudah Membuat Menu Navigasi Keren Tanpa Edit HTML - Menu naviagasi adalah menubar yang biasanya ditempatkan di bawah header blog yang berguna untuk mengarahkan pembaca maupun pengunjung blog menuju link yang mereka cari. Jika selama ini banyak para blogger yang kesulitan untuk cara membuatnya kali ini saya akan share tentang bagaimana cara membuat menu navigasi keren tanpa editing HTML. Dengan cara ini para blogger pemula yang belum mengetahui cara editing HTML yang memang membutuhkan ketelitian dapat membuat menu navigasi mereka dengan lebih menarik dan lebih mudah.
Menubar navigasi atau menu bar biasanya terdiri dari beberapa tab. "Di dalam" masing-masing tab tersebut berisi link yang menuju halaman posting, halaman statis, halaman label, ke website lain dll. Sebenarnya membuat tab menu tidak begitu sulit. Pada dasarnya intinya sama yaitu membuat menu yang berisi beberapa link dengan beberapa styling ditambahkan untuk daya tarik visual. Sementara link yang disusun secara vertikal, tab navigasi biasanya disusun secara horizontal.
Dalam tutorial ini kita akan menginstal bar tepat di bawah header, tempat khas atau umum untuk navigasi bar. Bar akan ditambahkan sebagai gadget melalui halaman Elemen Halaman. Keuntungan menggunakan gadget adalah bahwa jika Anda ingin menghapusnya nanti, hal itu dapat dilakukan dengan mudah tanpa mengedit HTML. Namun, untuk melakukan itu, template harus memiliki tautan Gadget atau widget wadah yang saya akan menyebutnya, di lokasi tertentu.
Baca Juga widget artikel terkait lainnya:
- Membuat navigasi no urut halaman
- Membuat search box keren
- Membuat Widget Paypal Donation
- Membuat widget Pagerank
- Membuat bermacam-macam popular post
- Membuat widget Alexa rank terbaru
Membuat Menu Navigasi Untuk Blogger
1 Masuk ke akun Dashboard Blogger Anda >> Layout >> dan klik pada tambahkan gadget (tempatkan di bawah header seperti Screen Shot dibawah ini.)
2. Klik Tambah Gadget.
3. Gulir ke bawah Tambahkan Gadget dan pilih HTML / JavaScript.
4. Biarkan kotak judul kosong.
5. Copy dan paste kode HTML di bawah ini ke dalam kotak konten.
6. Ganti "#" dengan URL halaman tujuan Anda.
7. Anda bisa mendapatkan URL dari halaman dengan menyalin isi alamat / URL bar browser Anda sementara Anda berada di halaman tersebut.
8. Untuk menampilkan semua posting di bawah label (kategori), Anda perlu link ke halaman label.
9. Untuk mengubah lebar lebar menu edit: 960px.
Nah anda bisa menggantinya sesuka hati anda, atau anda bisa mengganti background warna pada menu navigasi dengan mengganti link url background diatas yang saya tandai dengan warna merah dengan link url background dibawah ini, atau anda lebih suka untuk menggunakan warna lain, silahkan anda lihat kode warna html yang telah saya sediakan.
1.menu_bg_1
2 menu_bg_2
3 menu_bg_3
4. menu_bg_4
5. menu_bg_5
6 menu_bg_6
7 menu_bg_7
8 menu_bg_8
9. menu_bg_9
10 menu_bg_10
Menubar navigasi atau menu bar biasanya terdiri dari beberapa tab. "Di dalam" masing-masing tab tersebut berisi link yang menuju halaman posting, halaman statis, halaman label, ke website lain dll. Sebenarnya membuat tab menu tidak begitu sulit. Pada dasarnya intinya sama yaitu membuat menu yang berisi beberapa link dengan beberapa styling ditambahkan untuk daya tarik visual. Sementara link yang disusun secara vertikal, tab navigasi biasanya disusun secara horizontal.
Dalam tutorial ini kita akan menginstal bar tepat di bawah header, tempat khas atau umum untuk navigasi bar. Bar akan ditambahkan sebagai gadget melalui halaman Elemen Halaman. Keuntungan menggunakan gadget adalah bahwa jika Anda ingin menghapusnya nanti, hal itu dapat dilakukan dengan mudah tanpa mengedit HTML. Namun, untuk melakukan itu, template harus memiliki tautan Gadget atau widget wadah yang saya akan menyebutnya, di lokasi tertentu.
Baca Juga widget artikel terkait lainnya:
- Membuat navigasi no urut halaman
- Membuat search box keren
- Membuat Widget Paypal Donation
- Membuat widget Pagerank
- Membuat bermacam-macam popular post
- Membuat widget Alexa rank terbaru
Membuat Menu Navigasi Untuk Blogger
1 Masuk ke akun Dashboard Blogger Anda >> Layout >> dan klik pada tambahkan gadget (tempatkan di bawah header seperti Screen Shot dibawah ini.)
2. Klik Tambah Gadget.
3. Gulir ke bawah Tambahkan Gadget dan pilih HTML / JavaScript.
4. Biarkan kotak judul kosong.
5. Copy dan paste kode HTML di bawah ini ke dalam kotak konten.
<style>
#tab_menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHsp2w1NeC15RaE-hnnuloqcg5WpEsryK-wMcWilEExGvM8uaNi5wKoITQHz8rRAcqeKfgQ_15VrXLD4OlZ6modo7MS49xiiQ9JvBqIR5oua43efDhzvQb1_bNyL5xmHr1V0i1TZOhnObK/s1600/menu_bg.png) no-repeat;
height:50px;
width:960px;
line-height:50px;
list-style:none;
margin-top:10px;
font-size:14px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
overflow:hidden;
}
#tab_menu li {
float:left;
border-right:1px solid #FFA722;
border-left:1px solid #CC5200;
}
#tab_menu li:first-child {
border-left:none;
}
#tab_menu li:last-child {
border-right:none;
}
#tab_menu li a{
text-decoration:none;
float:left;
display:block;
height:50px;
padding:0 20px;
color:#FFF;
}
#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
color:#622900;
text-shadow:1px 1px 0px #E8964B;
}
#tab_menu li a.tool{
color:#000;
text-shadow:1px 1px 0px #E8964B;
}
</style>
<ul id='tab_menu'>
<li ><a href='#'>Home</a></li>
<li ><a href='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='#'>ABOUT US</a></li>
</ul>
#tab_menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHsp2w1NeC15RaE-hnnuloqcg5WpEsryK-wMcWilEExGvM8uaNi5wKoITQHz8rRAcqeKfgQ_15VrXLD4OlZ6modo7MS49xiiQ9JvBqIR5oua43efDhzvQb1_bNyL5xmHr1V0i1TZOhnObK/s1600/menu_bg.png) no-repeat;
height:50px;
width:960px;
line-height:50px;
list-style:none;
margin-top:10px;
font-size:14px;
font-family:Verdana, Geneva, sans-serif;
font-weight:bold;
overflow:hidden;
}
#tab_menu li {
float:left;
border-right:1px solid #FFA722;
border-left:1px solid #CC5200;
}
#tab_menu li:first-child {
border-left:none;
}
#tab_menu li:last-child {
border-right:none;
}
#tab_menu li a{
text-decoration:none;
float:left;
display:block;
height:50px;
padding:0 20px;
color:#FFF;
}
#tab_menu li a.current, #tab_menu li a:hover, #tab_menu li a.tool:hover {
color:#622900;
text-shadow:1px 1px 0px #E8964B;
}
#tab_menu li a.tool{
color:#000;
text-shadow:1px 1px 0px #E8964B;
}
</style>
<ul id='tab_menu'>
<li ><a href='#'>Home</a></li>
<li ><a href='#'>PRODUCT</a></li>
<li ><a href='#'>FAQS</a></li>
<li ><a href='#'>CONTACT US</a></li>
<li ><a href='#'>ABOUT US</a></li>
</ul>
6. Ganti "#" dengan URL halaman tujuan Anda.
7. Anda bisa mendapatkan URL dari halaman dengan menyalin isi alamat / URL bar browser Anda sementara Anda berada di halaman tersebut.
8. Untuk menampilkan semua posting di bawah label (kategori), Anda perlu link ke halaman label.
9. Untuk mengubah lebar lebar menu edit: 960px.
Nah anda bisa menggantinya sesuka hati anda, atau anda bisa mengganti background warna pada menu navigasi dengan mengganti link url background diatas yang saya tandai dengan warna merah dengan link url background dibawah ini, atau anda lebih suka untuk menggunakan warna lain, silahkan anda lihat kode warna html yang telah saya sediakan.
1.menu_bg_1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEing6oS9_6nGTrn-m1kMqWIfUPc16B1yLv8yoHxvO624nuFwk8m1GWN6ONtv9PAhohYCdaBF7J77lG3Pvsw3HFS7iRV1JkgEKFLIgrHHx4DG8LTzUSoLSDCwAFwlyKHEDi0hlqJmwIyfjwB/s1600/menu_bg_1.png
2 menu_bg_2
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijc26XYmKtznX10bpmUfYVBR2-P7MeZA36BpXzvTp_juV9JMIbw4stfW4XfgaEN8XgEdpj6Jk6k-Pc2GTkt-stdVwW5QjXuJ0DIizyJ2mlSL7nGjvJtIgLxiud-9XhGKFUhMuh0v0N6d4o/s1600/menu_bg_2.png
3 menu_bg_3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjv5ItnKzO-e2Azy-hb98ddcz-UGC88Q-G4kXEISeJle3WasFLsYH-IxBN8V7YcT__GKcoLnPStNvSeVgutklZPS6a0zAXEulxy4ZTmnbY-clSymu3Yd4PyyNRjZR0apfZ8W_3CL2jaGtb/s1600/menu_bg_3.png
4. menu_bg_4
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbu0mPKZaR-_-eE5KTmCDDn0lYoJHap9pt-pdgM86n0g4jkZv0jEFcQGyfZWLoefDabDYY3RmtOrDx6FFLVno3MwHqbmPQDCgAAby0g-OzTUmCb7osVHTb4QSYi7RtnJJgx7Dqc_pYAyF3/s1600/menu_bg_4.png
5. menu_bg_5
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJQEzTzDcKrwH6Xh9X2HziFSYw0rRZ9HZ6Q-pWlGkE0DJVdEA-KIoBky1stbCbToCw7UhQWNUc39Zxu8zMMZopOX9Qlsa9sTboOANjHmbVzzw1sgd-l7jik-inC6TMQFrLc7ffXsW4Oz2V/s1600/menu_bg_5.png
6 menu_bg_6
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPh_uO6LQ_wf-cld3PqaZ8mYfBKZDPS80I7xXzUhviwazDMae9gcyQDlly-D4_LWqr9w_WDluu1_eHOkOXFc3Gss9cbhKcE39MVGqSEPJUnmMaxfjXXvJaKMuv3XXzQE_hu3-HU8fvlJtn/s1600/menu_bg_6.png
7 menu_bg_7
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5w3Gct1l7H4V2wUcI4B3Ei2taj_5og3ACzS8FOAwd4HWD07EAE8IIrTLJ0v8MS1Ua23c8gTw_V_mYEZBk4qa1vk5BANXC_D904wrjtpSp6QmYTRD89lChrl2urIVd_Ay56TO_t1pVwLlb/s1600/menu_bg_7.png
8 menu_bg_8
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoLlLP-oafxb2R5YWpGGyHx9Hgfks92I9xHGgWQL4GBWJBDNqKEE60_67y0OoUBM60EG1HF5Bz4ijaQvUtdwy1-OPSCFMPF5n8MFLglHFDJUUSe_grNraX6zGSZgOr2BbXbwmZgf4Jo3w7/s1600/menu_bg_8.png
9. menu_bg_9
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ode2GSyOmMUPl28DTpWHxo_GkcTFZwlK6Un21C-X7B9xHNt3h1FCT0KIcVPvqK5TegH9jbRcdjoncV9OzSra1Y4EG5za9nuMpo0gy_elYrn_-rciQnaiJs35gY2xcHgOL2nLlmYPavDN/s1600/menu_bg_9.png
10 menu_bg_10
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9iNcaSvcSsR0rk5dZ7arJiqeyksLTVXrlxJ3mqE9B4X6oem-xStpTnf9-zARCvAftgQzu-qIPykbUdo7GLRbLjwqreWHGxgmgc7YNFnUdG6VpiEymeAyMAuvVkLx31V17WTIJNbJidsTG/s1600/menu_bg_10.png
Tidak ada komentar:
Posting Komentar