Tutor Blog Mania: Cara Mudah Membuat Menu Navigasi Keren Tanpa Edit HTML

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

Cara Mudah Membuat Menu Navigasi Keren Tanpa Edit HTML

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 warnamerah 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/AVvXsEizmnfR4_CjihPmQR3yiCDfXbpiR2HwWccUMi74zDOoJfLBcc0-jaiNL2Udad5mB6yPi7q99OlyubTGmV_CmuIZdNi1CgItMxr1mTvNzr54twT4LNN24kvvyfwmL_5x1HcVQRbCB5Nsq4ep/s1600/menu_bg_1.png

2 menu_bg_2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6QWp7SNhHkLu2fy3smlpjKZu789aNoNiR5kQMy25AT6en9V-hMN07wdh3Q3hMTBI8h5jEBS_6_35xD6hC5xAL8tRDuPadPnzbiTwW4KrvHJTVgcVGLYgK4vH8Y2aODptNMgkncU28UX4j/s1600/menu_bg_2.png

3 menu_bg_3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgISX-Jvpk4EWWmMvspU_VRslcMwlb2HoqFX14OoKKNYe3mrp_9y_xle6Aa_G576DHduRIR7ff0BW6lOSjUl4yxQKPnT2vXKRQ5-pMm9e8ICFTD1AoWjRpNUitI6k6R0DfIt2Xs6Aw6pegl/s1600/menu_bg_3.png

4. menu_bg_4

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsXbdhfWFJF-oRDiTSrLQ4LSDxeI-Q-1j7qIG6WgKGTKk9TQlYoPnBRKOGQcN9gLbQ49ikIjDDskY1_HxwWizbRPatWUbk7DshNKJi2RQFTdVJx65zNEMA0ILAXLBbD_na-KULYaARl4e6/s1600/menu_bg_4.png

5. menu_bg_5

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOEfrwhRNfLFvLaUfJRcgEhIo27G7OyOSDgANkN0GNBJwIOMGEqmB3CleDVmNBZudpB-A2NziXFIlLdsy6mXxHOLXmOSQuO0Pe5X214ZnTUBEKJhpTzyh_Qs3Eht2JBw3bjIyZCJ4zvYjt/s1600/menu_bg_5.png

6 menu_bg_6

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr24L2Yo4k9seyG7L1P0jRMiHojHwYqnDELANlVHyzSvUTPZ2B5hScWtblsgGrtiQbmfNAvuIUhSQyo3Ymx8EWa0rQboE5PCNbtd8ecEyVQKkhoUNnRocA32S_9JW1OwtCp3Zbld5H_aIu/s1600/menu_bg_6.png

7 menu_bg_7

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLdf8bIrBaLVQJlfHUEIhGB5_uvkW9zDssi_F3tNLAJhjbjW7nHADbOWvN6-c9wdzzKD9wEoMiMyqrJ9cAnI53msvhVyzaj9lspLcNRdHiXcPHjE4yGA6Z8Gnt4sLXcQ7RqnW5EMFNfpdc/s1600/menu_bg_7.png

8 menu_bg_8

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijlmTrupBNOHhCRHmJM1jzYc4eyk9HxoklUSNsZEONfrGtXJXRn-19JQnS6_tA1ZdFU73wrto5TO2a8XPixitlUQdnPTJfVXVTfKaNEzYN3rk3uyJmV9RKs9j8m3sa-7jy3aiCa1_weGDJ/s1600/menu_bg_8.png

9. menu_bg_9

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCBV8C1cQrFMI97Etvum3eOjjVd6mzEX4YkM0_zYfpRKa_Mqli_REvNXTV2NC4ZizqPBS6IbibCHYqg9h_CQEiiUmfxCEEs0rPndN3HabOdO30qmPNA1y1GYaQxNSMqYuP_qP6FrjsDNP/s1600/menu_bg_9.png

10 menu_bg_10

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSa59IFNoWolvQfIywHPQkOblXUVV3BpjTE-ApKxISD_1jQzl0AqYJumUpZkFFLHByiKnLD0EMnAe_jWX1F17qtksT8zeoNHx0XJ9pvZs6PEqhcmXecUh0w3mLExjUaWk-xcOwRsAfjfpk/s1600/menu_bg_10.png

========================================================

Tips Agar Email Aman Dari Hacker dan Spammer dari Bulan Ramadlan SEO
Jika anda sering kehilangan email, atau jika anda sering emailnya error karena dibuat percobaan oleh hacker pemula, atau apabila email anda sering mendapatkan email spam dari spammer, sangat tepat apabila anda membaca Tips Agar Email Aman Dari Hacker dan Spammer dari Bulan Ramadlan SEO ini

Tips Agar Email Aman Dari Hacker dan Spammer dari Bulan Ramadlan SEO
Sebenarnya banyak cara agar aman dari hacker dan spammer, dan saya akan menjelaskannya disini. oke anda simak baik baik Tips Agar Email Aman Dari Hacker dan Spammer dari Bulan Ramadlan SEO ini ya...

Tips Agar Email Aman Dari Hacker dan Spammer dari Bulan Ramadlan SEO
1. Buatlah Password yang tidak mudah ditebak oleh orang lain.
Cara dan nasehat seperti ini saya rasa sangat umum, dan saya tidak akan menjelaskan hal umum seperti ini disini, karena menurut saya hal yang umum seperti ini tidak seru dan tidak menarik.
2. Buatlah Email Alias
Dengan Email Alias maka email utama anda akan lebih aman, dikarenakan orang lain tidak tahu email utama anda.
dan menurut saya, cara kedua ini adalah cara yang paling bagus dan paling efektif. dan jangan lupa membuat kotak masuk sendiri buat email alias anda, maka dengan begitu email anda akan bebas dari email email spam.
Namun kalau anda menggunakan email alias di Yahoo, emailnya kurang keren, dan dengan mudah bisa diketahui oleh orang lain, dan lebih parahnya lagi, email alias di yahoo tidak bisa dibuat daftar facebook. jadi kalau anda mendaftar facebook dengan email Yahoo, anda tidak bisa menggunakan email alias.
Lalu bagaimana agar email utama bebas dari spammer?
seperti penjelasan saya diatas, silahkan anda buat kotak masuk khusus buat email yang datang dari Facebook, atau tandai spam saja, maka secara otomatis nanti tiap kali facebook memberikan informasinya ke email anda, maka email tersebut akan masuk ke kotak spam.
Gampang banget kan Trik dan Tips dari Bulan Ramadlan SEO?!
Jadi mulai sekarang, ucapkan selamat tinggal email spam!!!.

================================================================================================

MEMBUAT MENU BAR + SUB MENU TANPA EDIT DI HTML

Mungkin kebanyakan orang kesulitan untuk membuat menu dropdown apalagi bergaul dengan yang namanya html pasti sangat males padahal mudah jika kita memang serius dan tekun untuk mengerjakannya, nah di postingan ini sebelumnya sudah saya share namun yang ini berbeda kali ini saya akan berbagi mengenai cara membuat menu dropdown tanpa edit html dan mungkin cukup sederhana bagi anda para blogger sekalian, oke kawan langsung saja cekidot.

1. Pastikan anda sudah loggin ke blogger
2. Klik Rancangan / Layout
3. Klik Tambah Gadget
4. Pilih html/javascript
5. Copy - paste kan Code dibawah ini

di coba, kalo kurang jelas silahkan komentarnya. semoga dapat digunakan dan berfungsi, silahkan edit edit saja (yang berwarna merah dan biru / # boleh anda ganti terserah saja) jangan takut salah oke guys, simple kan, hehe thanks... :)

Membuat Menu DropDown untuk blog Sobat Blog Blogger tidak memerlukan Edit HTML, karena jika diterapka menggunakan Etit HTML, agak ribet untuk Blogger pemula. Adapun menerapkan menu drop down ini cukup melalui tambah gadged baru pada Dashboard Blog SobatBlogger. Lihat seperti gambar di bawah: Latar belakang, border menu ini bisa Sobat rubah dan font yang diinginkan.

Adapun craranya: Sobat harus masuk terlebih dahulu ke Blog Blogger untuk menambah gadget baru, lalu klik Design di halaman Blog Blogger, akan mengarah ke Page Element atau Add and Arrange Page Element. Setelah itu Sobat

akan melihat Add a Gadget, lihat seperti gambar di bawah

Klik Add a Gadget tersebut, yang muncul seperti contoh gambar di bawah

Klik lagi pada area HTML/JavaScript, untuk mengeluarkan halaman Configure HTML/JavaScript, lihat gambar bawah: jangan lupa ketik Judul Gadget, agar mudah bila Sobat ingin mengedit ulang Gadget tersebut.

Lihat kode HTML/JavaScript di bawah: Copy dan Paste pada “Content” untuk HTML/JavaScript seperti gambar di atas, klik Save lihat hasilnya,,,,,,,,

<style>

#mbtnavbar {

background: #3B5998;

width: 87%;

color: #FFF;

margin: 10px 0;

padding: 0;

position: relative;

border-top:0px solid #960100;

height:35px;

}

#mbtnav {

margin: 0;

padding: 0;

}

#mbtnav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#mbtnav li {

list-style: none;

margin: 0;

padding: 0;

}

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {

color: #FF0000;

display: block;

font:bold 12px Helvetica, sans-serif;

margin: 0;

padding: 9px 12px 11px 12px;

text-decoration: none;

border-right:0px solid #627AAD;

}

#mbtnav li a:hover, #mbtnav li a:active {

background: #627AAD;

color: #FFF;

display: block;

text-decoration: none;

margin: 0;

padding: 9px 12px 11px 12px;

}

#mbtnav li {

float: left;

padding: 0;

}

#mbtnav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 160px;

margin: 0;

padding: 0;

}

#mbtnav li ul a {

width: 140px;

}

#mbtnav li ul ul {

margin: -25px 0 0 161px;

}

#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {

left: -999em;

}

#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {

left: auto;

}

#mbtnav li:hover, #mbtnav li.sfhover {

position: static;

}

#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {

background: #EDEFF4;

width: 120px;

color: #3B5998;

display: block;

font:normal 12px Helvetica, sans-serif;

margin: 1px 0 0 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border:1px solid #ddd;

-moz-border-radius:4px;

-webkit-border-radius:4px;

}

#mbtnav li li a:hover, #mbtnav li li a:active {

background: #627AAD;

color: #FFF;

display: block;

}

#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {

background: #EDEFF4;

width: 120px;

color: #FF0000;

display: block;

font:normal 12px Helvetica, sans-serif;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border:1px solid #ddd;

margin: 1px 0 0 -14px;

}

#mbtnav li li li a:hover, #mbtnav li li li a:active {

background: #627AAD;

color: #FFF;

display: block;

}

</style>

<li>

</li>

<li><a href=’https://readmoremyblog.wordpress.com/2012/02/19/beranda/’>About</a>

</li>

<li>

<ul>

<li><a href=’https://readmoremyblog.wordpress.com/2012/04/05/cara-menautkan-link-blog-di-gravatar-profile/’>Gravatar Profile</a></li>

<li><a href=’https://readmoremyblog.wordpress.com/cara-posting-baru-di-wordpress/’>Cara posting baru di WordPress</a>

<ul>

></ul></li></ul></li></ul></div>

Semoga dapat berfungsi

==============================================================================

Cara Membuat Menu Drop Down Tanpa Edit HTML

Sangat mudah untuk membua menu drop down pada blogspot seperti di atas tanpa melakukan edit HTML, cukup dengan menambahkan gadget saja di bawah header blog.

Caranya:

Buka Dasbor > Tata Letak> Tambah Gadget (dibawah header)

Kemudian masukkan kode berikut ini:

<style>

#menunavigasihorisontal {

background: #ff7474;

width: 100%;

color: #FFF;

margin: 10px 0;

padding: 0;

position: relative;

border-top:0px solid #960100;

height:50px; }

#bb2nav {

margin: 0;

padding: 0;}

#bb2nav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;}

#bb2navli {

list-style: none;

margin: 0;

padding: 0;}

#bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {

color: #FFF;

display: block;

font:normal 16px crushed, oswald;

margin: 0;

padding: 9px 12px 11px 12px;

text-decoration: none;

border-right:0px solid #627AAD;}

#bb2nav li a:hover, #bb2nav li a:active {

background: #91857f;

color: #FFF;

display: block;

text-decoration: none;

margin: 0;

padding: 9px 12px 11px 12px;}

#bb2nav li {

float: left;

padding: 0;}

#bb2nav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 160px;

margin: 0;

padding: 0;}

#bb2nav li ul a {

width: 140px;}

#bb2nav li ul ul {

margin: -25px 0 0 161px;}

#bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav

li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {

left: -999em;}

#bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav

li li li.sfhover ul {

left: auto;}

#bb2nav li:hover, #bb2nav li.sfhover {

position: static;}

#bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {

background: #EDEFF4;

width: 120px;

color: #e06666;

display: block;

font:normal 14px Arial, sans-serif;

margin: 1px 0 0 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border:1px solid #ddd;

-moz-border-radius:4px;

-webkit-border-radius:4px;}

#bb2nav li li a:hover, #bb2nav li li a:active {

background: #627AAD;

color: #FFF;

display: block;}

#bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {

background: #EDEFF4;

width: 120px;

color: #3B5998;

display: block;

font:normal 14px Helvetica, sans-serif;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border:1px solid #ddd;

margin: 1px 0 0 -14px;}

#bb2nav li li li a:hover, #bb2nav li li li a:active {

background: #e06666;

color: #FFF;

display: block;}

</style>

<li>

</li>

<li>

<a href='#'>About Me</a>

</li>

<li>

<ul>

<li><a href='http://www.tettytanoyo.com/search/label/Blogging'>Blogging</a></li>

<li><a href='http://www.tettytanoyo.com/search/label/Diary'>Diary</a></li>

</ul>

</li>

<li>

<a href='#'>Other ▼</a> <ul>

<li><a href='http://www.tettytanoyo.com/search/label/Giveaway'>Giveaway</a></li>

<li><a href='http://www.kurikulumdanpembelajaran.blogspot.com'>Kurikulum</a></li>

<li><a href='http://www.tettytanoyo.com/search/label/Puisi'>Puisi</a>

<ul>

</ul>

</li>

</ul> </li>

</ul>

</div>

Kode yang saya beri warna adalah kode yang bisa diubah sesuai selera. Seperti font, warna, ukuran font, dan lainnya. (silakan diutak-atik sambil berkreasi)

Untuk mengetahui kode warna, biasanya saya melihat pada pengaturan di blogspot sendiri.

Masuk ke dasbor>template>sesuaikan.

Selesai

Selamat Mencoba, Semoga Bermanfaat :)

======================================================================

Cara Membuat Drop Down Menu di Blog Tanpa Edit HTML

Kebetulan karena kemarin saya memakai Drop Down Menu di Blog ini, dan kelihatannya lebih bagus dari sebelumnya maka saya akan share Drop Down Menu yang saya pakai ini, siapa tahu bermanfaat.
Bagi yang berminat memakai Menu Drop Down seperti yang saya pakai ini silahkan anda copy kode di bawah ini:

<style>
#menu
{
width: autopx;
margin: 5;
padding: 5px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 2px 0px #9c9c9c;
-webkit-box-shadow: 0 2px 0px #9c9c9c;
box-shadow: 0 2px 0px #9c9c9c;
}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 20px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 25px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 5px;
height: 5px;
width: autopx;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='/' rel='nofollow'>Home</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu DropDown</a>
<ul>
<li><a href='http://bulanramadlanseo.blogspot.com/2014/03/hubungi-bulan-ramadlan-seo.html' rel='nofollow' target='_blank'>Hubungi Bulan Ramadlan SEO</a></li>
<li><a href='http://bulanramadlanseo.blogspot.com/2014/03/jasa-review-website-dan-produk-bulan.html' rel='nofollow' target='_blank'>Jasa Review Website dan Produk Bulan Ramadlan SEO</a></li>
<li><a href='http://bulanramadlanseo.blogspot.com/2014/03/jasa-pasang-iklan-paket-murah.html' rel='nofollow' target='_blank'>Jasa Pasang Iklan Paket Murah</a></li>
<li><a href='http://bulanramadlanseo.blogspot.com/2014/03/jasa-review-produk-dan-website-besar-besaran.html' rel='nofollow' target='_blank'>Jasa Review Produk dan Website Besar besaran</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
</ul>
</li>
<li><a href='/' rel='nofollow' target='_blank'>Menu DropDown 2</a>
<ul>
<li><a href='/' rel='nofollow' target='_blank'>Menu 1</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 2</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 3</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 4</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='/' rel='nofollow' target='_blank'>Menu 5</a></li>
<li><a href='http://bukarahasia-no1.blogspot.com/2013/06/cara-membuat-menu-drop-down-tanpa-edit.html' rel='dofollow' target='_blank'>Cara Membuat Menu Drop Down Tanpa Edit Html</a></li>
</ul></li></ul>

Lalu silahkan anda paste pada gadget html.
setelah anda paste silahkan anda simpan tanpa memberikan nama pada gadget tersebut.
dan sebelumnya silahkan anda ganti link yang ada dengan link anda, begitu juga nama sebagai anchor text-nya. dan sekian dari saya semoga Cara Membuat Drop Down Menu di Blog Tanpa Edit HTML ini bermanfaat.

========================================================================

Tutor Blog Mania

Label

Rabu, 29 Juni 2016

Cara Mudah Membuat Menu Navigasi Keren Tanpa Edit HTML

MEMBUAT MENU BAR + SUB MENU TANPA EDIT DI HTML

Cara Membuat Menu Drop Down Tanpa Edit HTML

Tidak ada komentar:

Posting Komentar