-->

Situs Multi Pengetahuan Meliputi Pendidikan, Informasi Teknologi, Tutorial, Serta Pengetahuan Penting Lainya

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.

Previous
Next Post »

13 komentar

Ipah Kholipah delete March 21, 2015 at 3:34 PM

terimakasih infonya :)

Heri Assidiqi delete March 22, 2015 at 9:18 PM

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

Heri Assidiqi delete March 23, 2015 at 5:29 AM

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

Rupa Akter delete July 20, 2015 at 1:31 AM

It is more helpful if we watch Demo

helman jr delete November 27, 2015 at 3:09 PM

good...

syarifudinslfc delete November 27, 2015 at 10:44 PM

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

Al Fikri delete December 3, 2015 at 10:29 AM

Berantakan bagaimana ya maksudnya?

dailywife delete February 4, 2016 at 12:52 AM

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

miftah hurrohmat delete February 19, 2016 at 4:36 PM

Terima Kasih Infonya... sangat membantu

Putra Cemerlang delete April 6, 2016 at 5:38 PM

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

Munawir Alfikri delete April 6, 2016 at 7:04 PM

Ganti aja tulisan yang berwarna biru diata itu, dengan link yang mas mau :)

Putra Cemerlang delete April 6, 2016 at 7:33 PM

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

Munawir Alfikri delete April 7, 2016 at 8:52 AM

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

Apa tanggapan anda tentang artikel diatas?

 

Contact Form

Name

Email *

Message *