CARA FLEXI: CARA MUDAH MEMBUAT MENU NAVIGASI KEREN TANPA EDIT HTML

Cara Mudah Membuat Menu Navigasi Keren Tanpa Edit HTML - Menu naviagasi merupakan menubar yg umumnya ditempatkan pada bawah header blog yg bermanfaat buat mengarahkan pembaca juga pengunjung blog menuju link yang mereka cari. Apabila selama ini banyak para blogger yg kesulitan buat cara membuatnya kali ini saya akan share tentang bagaimana cara membuat pilihan menu navigasi keren tanpa editing HTML. Dengan cara ini para blogger pemula yang belum mengetahui cara editing HTML yang memang membutuhkan ketelitian dapat membuat pilihan menu navigasi mereka dengan lebih menarik dan lebih mudah.
Menubar navigasi atau menu bar umumnya terdiri menurut beberapa tab. "Di dalam" masing-masing tab tadi berisi link yang menuju laman posting, page tidak aktif, laman label, ke website lain dll. Sebenarnya membuat tab pilihan menu nir begitu sulit. Pada dasarnya intinya sama yaitu membuat pilihan menu yang berisi beberapa link menggunakan beberapa styling dibubuhi buat daya tarik visual. Sementara link yg disusun secara vertikal, tab navigasi umumnya disusun secara horizontal.
Dalam tutorial ini kita akan menginstal bar sempurna di bawah header, loka spesial atau generik buat navigasi bar. Bar akan dibubuhi sebagai gadget melalui halaman Elemen Halaman. Keuntungan memakai gadget adalah bahwa bila Anda ingin menghapusnya nanti, hal itu dapat dilakukan menggunakan gampang tanpa mengedit HTML. Tetapi, buat melakukan itu, template wajib mempunyai tautan Gadget atau widget wadah yang aku akan menyebutnya, pada lokasi eksklusif.
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 >> serta 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 serta paste kode HTML di bawah ini ke dalam kotak konten.

   height:50px;
   width:960px;
   line-height:50px;
   list-style:none;
   margin-top:10px;
   font-size:14px;

   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;
}

6. Ganti "#" menggunakan URL halaman tujuan Anda.
7. Anda bisa menerima URL dari page dengan menyalin isi alamat / URL bar browser Anda sementara Anda berada pada halaman tersebut.
8. Untuk menampilkan semua posting pada bawah label (kategori), Anda perlu link ke laman label.
9. Untuk mengganti lebar lebar pilihan menu edit: 960px.
Nah anda mampu menggantinya sesuka hati anda, atau anda sanggup mengubah background rona pada menu navigasi dengan mengubah link url background diatas yg saya tandai dengan warna merah menggunakan link url background dibawah ini, atau anda lebih senang untuk memakai rona lain, silahkan anda lihat kode rona html yang telah aku sediakan.
1.menu_bg_1

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUXZgXnrJhutnZJtcG-he9Wga18mfQiRG8ZlerP6IhywvlzFnd8t4p1YTiLbSsLAWFOujw0On8iZOQ3BrQolEelj74aVhh4l92hxSD7QqrzwPecHSG8Ij6vJfi0SWagUMH_Js-t1quQeNJ/s1600/menu_bg_1.png

2 menu_bg_2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-aTCNn5PD2axMJ1uhcZ206GctTsUmRYQbtTqUz9eSHjDzwP_UhrhnqATuDxQn2v3bynnXUu9Vu16AcTuwQZN7ji-E1PxuQ71LJ6t_xX2DeuWDLPzjY1oKI7cEoqpm0MRXRAv6mo4Q2ns/s1600/menu_bg_2.png

3 menu_bg_3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1DLCgxPJ3FJiUhvedGognFP26-hCzpA-eXgwtoTBJjp4lySlsZUNWCcMOAfmQcpceyNERXvfS8HkNYTxuqihHfkM6RyRsuVsmSGPg_asLUhbXM5NYutqvo96bmoASOcJ-D8CGqwM03PCU/s1600/menu_bg_3.png

4. Menu_bg_4

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLPKn4qb8xcDh1DrxkFb6kK2CZwktXHj4vEZhZyZ1PhnCPUHHEgrPJ3BgLF7wEzp_bVkiQHcZQlN-vvVDs6q5s8co3D-yc9CmBe0IeLKNyrKIrj0sF7-WecFe1aqVlP_-Ku6cvVggCfnWD/s1600/menu_bg_4.png

5. Menu_bg_5

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTjJKS_9Paaf2RSADCHd64ow28_3qG9qGz1Nrlq5SM5CQiJzd-vXvIQGnza0YXlCp7Cd45HdbjwFyHCftypjUx00-lvX9CX0ep00H4thTOaYL97LYLXgBxHoEXejBNABHqCzvR5LGxN5xy/s1600/menu_bg_5.png

6 menu_bg_6

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKG_xG2kIw_sXsoRE088Trw54LWwRXSZ9aX1Ip8GmOvTIoqxWYpUQB-a3eLAJsUs29FklWwC-9r1ss_2hmaeRVk2mh22YL1fjnot5LGaBo1qymYFIpZKRgCBPaFaHn97v_V_y596AjpTMw/s1600/menu_bg_6.png

7 menu_bg_7

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwuBLsX5G1JDe-ChVxKHVA0zh4Ui0pkRR652kPn36eSoPVORZfxsP85ECMFGhdipWL0dYRTxQpj31UbIcL-vGyV6pQGXMrjy1lPHVHWdlMuitFEpoyOrQfQuCD9evE60Vxg8lg-amoPMrv/s1600/menu_bg_7.png

8 menu_bg_8

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_igvfJqeRFYspcbVyU_9jV5D5Guby6dqROxQHd-bE5hbPQ7iIN_71xoyFzKf8p07EXuFxuFbsf7WSsQtLMSR74ATLJ4_Wi-mI_QG1q2wX9JPl0Yp1PeV07Q0JWzpqPCfgFLW_6YCkxOd3/s1600/menu_bg_8.png

9. Menu_bg_9

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivUnQEHmusOBpSNKvLutBpT66Dls5hyiYhOaclYUSg5Opp_i-n9IafSNtcp-KRJdF5y8C0gAIgcO0HePbCAEaqm9wZKe608K7O11K1km2haHgp0Vac-nLQg5dOSR5lyB4q0CG24qT2iRlw/s1600/menu_bg_9.png

10 menu_bg_10

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRkCVcKhza-7oen9SzKmMjmf0iBCAPVMv9-hpmiubFAE6ZoB_Iz_ZSdUtbgvwG_cg0iu73itXQKoXEU-7WsYhCXVRCMkYR67iVHsHLxJL7W5xN9OPsftsad8SuktzQsvgZXRhDc0Ac-UPU/s1600/menu_bg_10.png

CARA FLEXI

CARA MUDAH MEMBUAT MENU NAVIGASI KEREN TANPA EDIT HTML

Comments

Post a Comment