Cara Membuat Menu Bar di blog Paling Mudah dan Simple

Halo.. ketemu lagi, sudah lama nih gak share, kali ini saya akan memberikan tutorial cara membuat menu bar atau submenu untuk blog. Karena menurut saya ini sangat penting sekali jika blog anda tidak ada submenu seperti ini blog terlihat kurang menarik.

Sebenarnya menu ini banyak sekali kegunaanya, maka dari itu banyak juga yang mencari cara membuat menu bar di blog. Banyak sekali tutorial-tutorial blogger yang memberikan tutorial seperti ini, tetapi mungkin hanya diblog ini yang akan membantu anda hingga bisa.

Tidak akan panjang lebar lagi langsung saja kita simak tutorial bagaimana cara membuat menu di blog. Untuk contoh menunya bisa anda lihat menu pada blog ini. Atau lihat gambar dibawah ini

Cara Membuat Menu diblog

Kiri-kira seperti itulah tampilan menu yang akan kita buat nanti, langsung saja disimak:
1. Login blogger.com
2. Klik Judul blog anda
3. Pilih Template - EditHtml
4. Tambahkan kode dibawah ini diatas kode </style> atau ]]></b:skin>
#menunavigasi{color:#FFF;height:40px;text-transform:uppercase;border-bottom:3px solid #008FFF;background:#333}#menunavigasi ul#menu{margin:0;padding:0;height:40px}#menunavigasi li{margin:0;padding:0;float:left;display:inline;list-style:none;position:relative}#menunavigasi li >a{display:block;padding:0 10px;line-height:40px;text-decoration:none;color:#fff}#menunavigasi li li >a{display:block;padding:0 10px;margin:0 0;line-height:40px;text-decoration:none;color:#fff}#menunavigasi li:hover >a,#menunavigasi a:hover{background:#008FFF;-webkit-transition:all .5s ease-in-out;-moz-transition:all .5s ease-in-out;-ms-transition:all .5s ease-in-out;-o-transition:all .5s ease-in-out;transition:all .5s ease-in-out}#menunavigasi li ul{background:#333;margin:0 0;width:150px;height:auto;position:absolute;left:0px;z-index:10;display:none;padding:0}#menunavigasi li li{display:block;float:none}#menunavigasi li:hover >ul{display:block}#menunavigasi li ul ul{left:100%;top:0px}.tinynav{display:none;padding:10px;height:40px;border:none;background:#333;font-weight:bold;width:98%;margin:0 1%;color:#fff}.tinynav option{padding:0 5px}
5. Simpan template, setelah itu dari menu Template kita pindah ke Tata Letak
6. Kemudian kita tambahkan Gadget - Pilih HTML/Javascript
7. Masukkan kode dibawah ini didalamnya
<nav id='menunavigasi'>
<ul id='menu'>
<li class='current'><a href='/' style='background: #008FFF;color: #fff;'>Home</a></li>
<li><a href='http://multiajaib.blogspot.com'>Android</a></li>
<li><a href='http://multiajaib.blogspot.com'>Facebook</a></li>
<li><a href='http://multiajaib.blogspot.com'>Internet</a></li>
<li><a href='http://multiajaib.blogspot.com'>Editing</a></li>
</ul>
</nav>
Keterangan!
untuk tulisan berwarna biru, itu adalah URL yang ingin anda arahkan, dan yang berhuruf tebal tersebut adalah kata yang diganti sesuai selera anda.


Mudah? pastinya mudah sekali, tetapi bagi anda yang masih kebingungan dalam memasang kode untuk membuat menu bar di blog bisa langsung tanyakan pada kolom komentar dibawah yang telah saya sediakan. Baiklah mungkin sampai disini saja, berlangganan untuk mendapatkan artikel-artikel menarik lainnya, semoga bermanfaat.

Cara Membuat Menu Bar di blog Paling Mudah dan Simple Rating: 4.5 Diposkan Oleh: Al Fikri

13 komentar:

  1. Ternyata mudah juga ya kalo tau caranya mah... :)
    Keren Kang :)

    ReplyDelete
  2. Kalo tau cara memasangnya, ternyata gampang ya :)
    Keren Kang , saya coba pelajari dulu :)

    ReplyDelete
  3. It is more helpful if we watch Demo

    ReplyDelete
  4. min kenapa tampilan blog saya kok masih berantakan min, khususnya dibagian templet edit html

    ReplyDelete
  5. Mas admin..saya sudah coba pasang. Tapi kok kalau diklik per menu tetap keluarnya seperti tampilan home ya...nggak sesuai label gitu.

    kan ada menu yang seharusnya masih kosong karena belum ada artikel dengan kategori tsb. Saya coba klik semua menu, munculnya tetap seperti tampilan home. Salahnya di mana ya?

    trims

    ReplyDelete
  6. Terima Kasih Infonya... sangat membantu

    ReplyDelete
  7. om,bagaimana cara mengganti alamat link nya?
    sy ingin menggantinya dengan postingan saya.
    mohon pencerahannya.TRIMS

    ReplyDelete
    Replies
    1. Ganti aja tulisan yang berwarna biru diata itu, dengan link yang mas mau :)

      Delete
    2. cara membuat LINK nya gimana ya?mohon maaf sy pemula,baru mencoba buat blog.Trims

      Delete
  8. buat aja post baru terlebih dahulu, nanti ada linknya di bagian atas, copy kan saja mas :D

    ReplyDelete

Apa tanggapan anda tentang artikel diatas?