CARA MEMBUAT MENU BAR DI BLOG

Mempercantik tampilan blog merupakan suatu pekerjaan yang harus dikerjakan para blogger, khususnya blogger pemula. Tampilan blogger yang baik tentu akan menambah daya tarik dan minat baca suatu blog. Oleh karena itu, kali ini admin akan posting mengenai Cara Membuat Menu Bar di Blog

Dari gambar diatas, dapat dilihat sederatan kotak berwarna biru berisikan tulisan putih yang memuat menu Home, Artikel Pendidikan, Tips dan Trik, Info Lomba, dll itulah yang dinamakan Menu Bar.

Menu bar sangat baik untuk dimuat di blog guna memudahkan pembaca blog untuk memilih kategori yang dibutuhkan.selain itu, blog juga akan terlihat lebih rapi, keren, ilmiah dan teratur.

Jadi, jika para pembaca penasaran bagaimana cara membuat Menu Bar tersebut.

Berikut admin bagikan Tips dan Triknya :

-         Buka blogger.com

-         Klik  Desain 

-         Pilih  Template lalu pilih  Edit HTML 

-         Cari scrift berikut (Gunakan Ctrl + f untuk memudahkan pencarian):

<div class='main-outer'> atau <div id='main-wrapper'>  atau
<div id='main'>

-         Copas scrift berikut tepat diatas scrift yang dicari tadi : 

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#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:#fff; 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:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", 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 #fff; }

#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='#'>Beranda</a></li>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu 2</a></li>

<li><a href='#'>Menu3</a></li>

<li><a href='#'>Menudll</a></li>

</ul>

</div>

-         Kemudian save dan lihat hasilnya

KETERANGAN :

1.          Ganti tanda # dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.

2.   Ganti tulisan warna merah dengan nama menu yang kamu inginkan.

          Itulah Tips dan Trik membuat menu bar di tampilan blog. Apabila ada yang kurang mengerti atau terjadi error setelah mencoba, silahkan tinggalkan pesan di kolom komentar.

Selamat mencoba…