» » Cara Membuat Menu Mega Bagus Untuk Blog
Senin, 11 Maret 2013

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:
/ * ------------------------------------------------ ----
{} -------- 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;
}
 3. Sekarang menemukan </ head> tag dan sebelum paste kode:
<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

0 Response to "Cara Membuat Menu Mega Bagus Untuk Blog"

Posting Komentar

Langganan: Posting Komentar (Atom)