Cara Membuat Menu Bar di Blog Paling Gampang

Cara Membuat Menu Bar di Blog Paling Gampang ~  Tidak lengkap apabila sebuah blog tidak mempunyai sebuah menu bar, dimana manfaatnya sangat jelas agar kita tahu apa saja menu-menu yang terdapat dalam sebuah blog tersebut. Menu bar juga biasa disebut label atau jenis artikel yang dapat kita cari, biasanya kata-kata pada menu bar bersifat umum.

Apabila blog atau website kita sudah tertanam Menu Bar didalamnya, maka pengunjung akan lebih mudah dan leluasa dalam mencari topiktopik tertentu yang ingin dicarinya. Langsung saja kali ini saya akan membahas dan memberikan cara mudah dalam membuat sebuah menu bar yang terbilang simpel dan mudah dipahami bagi sebagian pemula.

Cara Membuat Menu Bar di Blogspot

Langkah Pertama

Login pada akn blogger anda di blogger.com, setelah itu anda bisa mengklik judul blog yang anda yang sudah anda buat blogspotnya terlebih dahulu, jika anda belum memiliki blog maka anda harus membuatnya terlebih dahulu. Setelah itu kita bisa login ke dashboard blog kita dan selanjutnya kita klik Template dan terus klik EditHtml.

Langkah Kedua

Jika kita sudah memasuki halaman edit html yang dimana kita menemui ribuan script html yang terdapat dalam sebuah kotak halaman tersebut. Selanjutnya yang kita lakukan adalah dengan menambahkan kode yang terdapat dalam kotak ini dan letakan diatas kode </style> atau ]]></b:skin> , untuk memprmudah mencari kita bisa klik Ctrl+F dan cari kode tersebut dan letakan kode ini diatasnya.

#menunavigasi{color:#FFF;height:100px;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}

Setelah kita mengopy seluruh script tersebut dan menempelkannya diatas kode </style>, maka terlebih dahulu kita simpan kode html tersebut agar tidak terjadi hal yang tidak diinginkan.

Langkah ketiga

Salin lagi kode yang sudah saya siapkan dibawah ini dan copy terlebih dahulu!,

<nav id='menunavigasi'>

<ul id='menu'>

<li class='current'><a href='/' style='background: #008FFF;color: #fff;'>Home</a></li>

<li><a href='http://www.jalanseo.com'>Menu 1</a></li>

<li><a href='http://www.jalanseo.com'>Menu 2</a></li>

<li><a href='http://www.jalanseo.com'>Menu 3</a></li>

<li><a href='http://www.jalanseo.com'>Menu 4</a></li>

</ul>

</nav>

Setelah itu kita tutup halaman template dan menuju halaman Tata Letak di blog anda, dan klik 'Tambahkan Gadget', setelah itu akan tersedia banyak tools yang bisa kita gunakan dalam mendukung kekuatan blog kita, dan langsung saja pilih HTML/Javascript, masukan kode yang tela di copy tadi kedalam halaman yang akan diisi tersebut dan biarkan untuk judul kosong.

Keterangan

• Untuk kode http://www.jalanseo.com bisa kita ganti dengan alamat blog kita dan labelnya
• Untuk kode Menu 1 kita ganti dengan nama labbel yang ingin kita tambahkan

Itulah tips dan cara dari saya tentang Cara membuat Menu Bar di Blog, semoga apa yang telah saya sampaikan tadi bermanfaat bagi kita semua dan terus majukan blog anda dan berkreasi sendiri sehingga dapat menjadi blogger yang sukses.

Tweet