Cara Membuat Menu Mega Bagus Untuk Blog
Cara Membuat Menu Mega Bagus Untuk Blog Anda-, Cara Membuat Menu Mega Bagus Untuk Blog Tutorial ini tentang satu menu navigasi. Menggunakan jQuery dan CSS Sobat Pedia dapat menambah template menu mega bagus. Menu berikutnya adalah sempurna jika Sobat memiliki banyak link atau halaman untuk menambah menu Sobat. Anda dapat menambahkan mereka ke dalam kategori bagi pengunjung untuk menemukan apa yang mereka tertarik lebih cepat dan lebih mudah.
1. Login ke dashboard Anda -> Template--> Edit HTML
2. Cari "Ctrl + F" dan cari kode berikut: ]]> </ b: skin> dan sebelum paste yang berikutnya:
2. Cari "Ctrl + F" dan cari kode berikut: ]]> </ b: skin> dan sebelum paste yang berikutnya:
/ *
------------------------------------------------ ----
{} -------- Menu {} --------
--------------------------------------------------
- * /
ul.ldd_menu {
z-index: 999;
margin: 0px;
padding: 0;
display: block;
height: 50px;
background-color: # D04528;
Daftar-style: none;
font-family: "Trebuchet MS",
sans-serif;
border-top: 1px solid # EF593B;
border-bottom: 1px solid # EF593B;
border-left: 10px solid # D04528;
-Moz-box-shadow: 0px 3px 4px # 591E12;
-Webkit-box-shadow: 0px 3px 4px # 591E12;
-Box-shadow: 0px 3px 4px # 591E12;
}
ul.ldd_menu a {
text-decoration: none;
}
ul.ldd_menu> li {
float: left;
position: relative;
}
ul.ldd_menu> li>
rentang {
z-index: 999;
float: left;
color: # fff;
background-color: # D04528;
height: 50px;
line-height: 50px;
kursor: default;
padding: 0px 20px;
text-shadow: 0px 0px 1px # fff;
perbatasan-kanan: 1px solid # DF7B61;
border-left: 1px solid # C44D37;
}
ul.ldd_menu. ldd_submenu {
z-index: 999;
position: absolute;
top: 50px;
width: 550px;
display: none;
opacity: 0.95;
kiri: 0px;
font-size: 10px;
background: # C34328;
border-top: 1px solid # EF593B;
-Moz-box-shadow: 0px 3px 4px # 591E12 inset;
-Webkit-box-shadow: 0px 3px 4px # 591E12 inset;
-Box-shadow: 0px 3px 4px # 591E12 inset;
}
a.ldd_subfoot {
z-index: 999;
background-color: # f0f0f0;
color: # 444;
display: block;
clear: both;
padding: 15px 20px;
text-transform: uppercase;
font-family: Arial, serif;
font-size: 12px;
text-shadow: 0px 0px 1px # fff;
-Moz-box-shadow: 0px 0px 2px # 777 inset;
-Webkit-box-shadow: 0px 0px 2px # 777 inset;
-Box-shadow: 0px 0px 2px # 777 inset;
}
ul.ldd_menu ul {
Daftar-style: none;
float: left;
border-left: 1px solid # DF7B61;
margin: 0px 20px 10px 30px;
padding: 10px;
}
li.ldd_heading {
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
color: # FFB39F;
text-shadow: 0px 0px 1px # B03E23;
padding: 0px 0px 10px 0px;
}
ul.ldd_menu ul li a {
font-family: Arial, serif;
font-size: 10px;
line-height: 20px;
color: # fff;
padding: 3px 1px;
}
ul.ldd_menu ul li a: hover {
-Moz-box-shadow: 0px 0px 2px # 333;
-Webkit-box-shadow: 0px 0px 2px # 333;
box-shadow: 0px 0px 2px # 333;
background: # AF412B;
}
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$ (Function () {
/ **
* Menu
* /
var $ menu = $ ('# ldd_menu');
/ **
* Untuk setiap elemen daftar,
* Kami menunjukkan submenu ketika melayang dan
* Memperluas elemen rentang (judul) untuk 510px
* /
$ Menu.children ('li') masing-masing (function (). {
var $ this = $ (ini);
var $ rentang = $ this.children ('rentang');
$ Span.data ('lebar', $ span.width ());
$ This.bind ('mouseenter', function () {
. $ Menu.find ('. Ldd_submenu') berhenti (true, true) menyembunyikan ().;
$ Span.stop () bernyawa ({'width': '510px '}., 300, function () {
$ This.find ('. Ldd_submenu') slideDown (300).;
});
}). Bind ('mouseleave', function () {
. $ This.find ('. Ldd_submenu') berhenti (true, true) menyembunyikan ().;
$ Span.stop () bernyawa ({'width': $ span.data ('lebar') + 'px'}, 300).;
});
});
});
</ Script>
Jika sobat
Pedia memiliki Jquery instaled pada template Anda menghapus garis merah.
4. Langkah berikutnya adalah untuk
menemukan id='footer-wrapper'> <div atau serupa (dalam template sobat
mungkin berbeda dicatat) dan sebelum paste
kode berikutnya:
<ul class='ldd_menu' id='ldd_menu'>
<li>
Liburan <span> </ span> <-! Meningkatkan ke 510px lebar ->
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'> Menurut Lokasi </ li>
<li> <a href='#'> Amerika Selatan </ a> </ li>
<li> <a href='#'> Antartica </ a> </ li>
<li> <a href='#'> Afrika </ a> </ li>
<li> <a href='#'> Asia dan Australia </ a> </ li>
<li> <a href='#'> Eropa </ a> </ li>
</ Ul>
<ul>
<li class='ldd_heading'> Berdasarkan Kategori </ li>
<li> <a href='#'> Sun & Beach </ a> </ li>
<li> <a href='#'> Petualangan </ a> </ li>
<li> <a href='#'> Sains & Pendidikan </ a> </ li>
<li> <a href='#'> Olahraga Ekstrim </ a> </ li>
<li> <a href='#'> Relaxing </ a> </ li>
<li> <a href='#'> Spa dan Wellness </ a> </ li>
</ Ul>
<ul>
<li class='ldd_heading'> Dengan Tema </ li>
<li> <a href='#'> Paradise Islands </ a> </ li>
<li> Cruises href='#'> <a & Boat Trips </ a> </ li>
<li> <a href='#'> Hewan Liar & Safaris </ a> </ li>
<li> <a href='#'> Pure Nature </ a> </ li>
<li> <a href='#'> Membantu orang lain & Untuk Harapan </ a> </ li>
<li> <a href='#'> Diving </ a> </ li>
</ Ul>
<a class='ldd_subfoot' href='#'> + Internet Baru </ a>
</ Div>
</ Li>
<li>
<span> Peralatan </ span>
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'> Menurut Lokasi </ li>
<li> <a href='#'> Amerika Selatan </ a> </ li>
<li> <a href='#'> Antartica </ a> </ li>
<li> <a href='#'> Afrika </ a> </ li>
<li> <a href='#'> Asia dan Australia </ a> </ li>
<li> <a href='#'> Eropa </ a> </ li>
</ Ul>
<ul>
<li class='ldd_heading'> Berdasarkan Kategori </ li>
<li> <a href='#'> Sun & Beach </ a> </ li>
<li> <a href='#'> Petualangan </ a> </ li>
<li> <a href='#'> Sains & Pendidikan </ a> </ li>
<li> <a href='#'> Olahraga Ekstrim </ a> </ li>
<li> <a href='#'> Relaxing </ a> </ li>
<li> <a href='#'> Spa dan Wellness </ a> </ li>
</ Ul>
<ul>
<li class='ldd_heading'> Dengan Tema </ li>
<li> <a href='#'> Paradise Islands </ a> </ li>
<li> Cruises href='#'> <a & Boat Trips </ a> </ li>
<li> <a href='#'> Hewan Liar & Safaris </ a> </ li>
<li> <a href='#'> Pure Nature </ a> </ li>
<li> <a href='#'> Membantu orang lain & Untuk Harapan </ a> </ li>
<li> <a href='#'> Diving </ a> </ li>
</ Ul>
<a class='ldd_subfoot' href='#'> + Internet Baru </ a>
</ Div>
</ Li>
<li>
<span> Lokasi </ span>
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'> Menurut Lokasi </ li>
<li> <a href='#'> Amerika Selatan </ a> </ li>
<li> <a href='#'> Antartica </ a> </ li>
<li> <a href='#'> Afrika </ a> </ li>
<li> <a href='#'> Asia dan Australia </ a> </ li>
<li> <a href='#'> Eropa </ a> </ li>
</ Ul>
<ul>
<li class='ldd_heading'> Berdasarkan Kategori </ li>
<li> <a href='#'> Sun & Beach </ a> </ li>
<li> <a href='#'> Petualangan </ a> </ li>
<li> <a href='#'> Sains & Pendidikan </ a> </ li>
<li> <a href='#'> Olahraga Ekstrim </ a> </ li>
<li> <a href='#'> Relaxing </ a> </ li>
<li> <a href='#'> Spa dan Wellness </ a> </ li>
</ Ul>
<ul>
<li class='ldd_heading'> Dengan Tema </ li>
<li> <a href='#'> Paradise Islands </ a> </ li>
<li> Cruises href='#'> <a & Boat Trips </ a> </ li>
<li> <a href='#'> Hewan Liar & Safaris </ a> </ li>
<li> <a href='#'> Pure Nature </ a> </ li>
<li> <a href='#'> Membantu orang lain & Untuk Harapan </ a> </ li>
<li> <a href='#'> Diving </ a> </ li>
</ Ul>
<a class='ldd_subfoot' href='#'> + Internet Baru </ a>
</ Div>
</ Li>
<li>
<span> Turis </ span>
<div class='ldd_submenu'>
<ul>
<li class='ldd_heading'> Oleh Unduh </ li>
<li> <a href='#'> Amerika Selatan </ a> </ li>
<li> <a href='#'> Antartica </ a> </ li>
<li> <a href='#'> Afrika </ a> </ li>
<li> <a href='#'> Asia dan Australia </ a> </ li>
<li> <a href='#'> Eropa </ a> </ li>
</ Ul>
<ul>
<li class='ldd_heading'> Berdasarkan Kategori </ li>
<li> <a href='#'> Sun & Beach </ a> </ li>
<li> <a href='#'> Petualangan </ a> </ li>
<li> <a href='#'> Sains & Pendidikan </ a> </ li>
<li> <a href='#'> Olahraga Ekstrim </ a> </ li>
<li> <a href='#'> Relaxing </ a> </ li>
<li> <a href='#'> Spa dan Wellness </ a> </ li>
</ Ul>
<ul>
<li class='ldd_heading'> Dengan Tema </ li>
<li> <a href='#'> Paradise Islands </ a> </ li>
<li> Cruises href='#'> <a & Boat Trips </ a> </ li>
<li> <a href='#'> Hewan Liar & Safaris </ a> </ li>
<li> <a href='#'> Pure Nature </ a> </ li>
<li> <a href='#'> Membantu orang lain & Untuk Harapan </ a> </ li>
<li> <a href='#'> Diving </ a> </ li>
</ Ul>
<a class='ldd_subfoot' href='#'> + Internet Baru </ a>
</ Div>
</ Li>
</ Ul>
Sekarang Tinggal Simpan template sobat Pedia semua dan lihat
hasilnya.
Sekian Dulu Tutorial dari kami semoga bermanfaat untuk sobat Pedia
semua, untuk melihat Demo nya lihat DISINI
Categories:
Tahukah Kamu
