Sepanjang Hidup by Maher Zain

Selasa, 11 Desember 2012

Cara Mudah Membuat MENU BAR

Nah, kali ini Saya akan berbagi kepada teman-teman bagaimana caranya untuk membuat menu bar di blog ini. Saya telah mencari dibanyak blog tentang caranya, tapi tidak berhasil karena ada sesuatu yang tidak ditemukan di HTML.

Nah, setelah lama melakukan pencarian ketemu deh caranya.
Langsung aja kita mulai.
Ada 2 cara dalam pembuatan MenuBar:
1. a. Klik Blog
    b. Klik Laman
    c. Ubah Laman menjadi web
    d. Buat judul bar dan masukkan URL untuk mengalihkan ke blog lain
    e. Lalu klik 'Jangan Tampilkan' jadi tampilkan

cara pertama ini sangat mudah, tapi sayang cara ini tidak bisa untuk membuat submenu-nya.
nah, sekarang cara kedua.

2. a. Klik Blog
    b. Klik Template>Edit HTML
    c. Cari <div class='main-outer'> dengan tombol F3 atau Ctrl+f
    d. Copy Scrip dibawah ini dan paste diatas scrip yang dicari tadi
<style>
/* -- Menu Horizontal + Sub Menu-- */
#cat-nav {background:#ff0000;margin:0 100px;padding:0;height:35px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #ff0000 0px 1px 0px;border-right:1px solid #ff0000;}
#cat-nav a:hover { color:#ff0000; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#ff0000; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#ff0000; }
#secnav a { font-family:Georgia, &quot;Times New Roman&quot;, Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #ff0000; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:100%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='http://arigizakaza28.blogspot.com'>Beranda</a></li>
<li><a href='#'>Akun Ku</a>
<ul id='sub-custom-nav'>
<li><a href='https://www.facebook.com/ari.grayfullbustericemanfairytail'>Facebook</a></li>
<li><a href='https://twitter.com/AGK_REAL/'>Twitter</a></li>
</ul>
</li>
<li><a href='#'>Kategori</a>
<ul id='sub-custom-nav'>
<li><a href='http://arigizakaza28.blogspot.com/search/label/Cinta'>Cinta</a></li>
<li><a href='http://arigizakaza28.blogspot.com/search/label/Download%20Lagu%20Jepang'>Download Lagu Jepang </a></li>
<li><a href='http://arigizakaza28.blogspot.com/search/label/Islam'>Islam</a></li>
<li><a href='http://arigizakaza28.blogspot.com/search/label/Lirik%20Lagu%20barat/search/label/Islam'>Lirik Lagu Barat</a></li>
<li><a href='http://arigizakaza28.blogspot.com/search/label/RIYADHUS%20SHALIHIN/search/label/Islam'>Riyadhus Shalihin</a></li>
<li><a href='http://arigizakaza28.blogspot.com/search/label/Teknologi/search/label/Islam'>Teknologi</a></li>
<li><a href='http://arigizakaza28.blogspot.com/search/label/Wanita%20Muslimah'>Wanita Muslimah</a></li>
</ul>
</li>
<li><a href='#'>Kampus Ku</a>
<ul id='sub-custom-nav'>
<li><a href='http://Teknokrat.ac.id'>Perguruan Tinggi Teknokrat</a></li>
<li><a href='http://Sim.teknokrat.ac.id'>Siakad Online</a></li>
<li><a href='http://Scele.teknokrat.ac.id'>Scele Teknokrat</a></li>
</ul>
</li>
</ul>
</div>

5. Simpan deh

Contoh tulisan yang berwarna merah diubah menjadi Link yang Anda inginkan dan tulisan berwarna kuning ubah menjadi judul yang Anda inginkan dan tulisan berwarna biru untuk judul submenu-nya.
Dan dari scrip diatas sudah Saya coba pada blog Saya dan berhasil.
SELAMAT MENCOBA AJA DEH.. ^____^

3 komentar:

  1. Hehehe...Boleh juga nih postingannya dan kreatif jg pengembangannya...

    BalasHapus
  2. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  3. makasih mas.. kan ilmunya jg dari blog mas. . hehe.. :)

    BalasHapus