Cara Membuat Menu Blog di Atas Header


Untuk membuat menu yang terletak tepat di Atas Judul Blog atau Top Header, baik di blog Blogger maupun blog WordPress. Di sini akan mengungkap , bagaimana cara membuat menu tersebut. Seperti yang Sobat lihat, contoh blog Worpress, menunya terletak di atas header

  • Di bawah adalah contoh menu blog WordPress

Untuk mebuat menu di atas blog WordPress, caranya : Sudah berapa bayak membuat posting Page / Halaman? Missalnya menerbitkan 7 Halaman.

Caranya:

Lihat dan perhatikan nama judul pada tampilan menu di atas Header, saperti Judul Buku Tamu, Pilih Kata Kunci Di Bawah dan Cara Mambuat Akun Gmail, ( gambar atas).

Ketika Sobat sedang membuat Halaman Baru pada WordPress, di sisi kanan, cari Atribut Halaman. Pada Atribut ini tercantum beberapa judul halaman, Blog “Read More My Blog” menampilkan tiga judul blog sebagai Induk,”Buku Tamu“, Pilih Kata Kunci Di Bawah dan Cara Mambuat Akun Gmail

Nama-nama judul tersebut sebagai Induk dari judul Halaman Blog Sobat. Edit atau membuat judul halaman baru, pipilh  salah satu Judul Bog sebagai Induk

Jika Sobat memilih Tanpa Induk, maka menu judul blog yang Sobat dalam posting baru,  seperti judul “Buku Tamu”  Nah judul Buku Tamu ini, menggunakan Tanpa Induk. Setelah Sobat selasai membuat dan memperbaru menu di atas Header blog WordPress maka,  selanjutnya klik Perbarui. Lihat hasilnya ,,,,semoga berhasil dan  berfungsi menu ini.

Berikutnya membuat menu dengan Edit HTML blog Blogger.

Ok, singkat saja ke pokok tujuan:

  • Masuk ke blogger Sobat
  • Klik Dashboard, yang terletak di pojok kanan atas tab blog Sobat
  • Klik lagi Edit HTML, kemudian centang Expand Widget Template
  • Tekan Ctrl+F/F3 untuk mencari code yang diinginkan dan ketik di dalam kotak Ctrl+F tersebut

Copy code nya di bawah ini:

Sebelum paste,  Sobat harus mencari code seperti <b:skin><![CDATA[ dan simpan /paste tepet di atas nya.

/*The top Menu*/
#top{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
border-bottom:1px solid #373127;
}
#top-wrap{
margin:auto;
padding: 0;
width: 960px;
background:#000000;
}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: georgia; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#fff;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
/*The top Menu*/
#med{
margin:auto;
padding: 0;
width: 100%;
background:#000000;
}
#med-wrap{
margin:auto;
padding: 0;
width: 960px;
}
.mednav ul {list-style:none;margin:0;padding:0px; float:left;}
.mednav li {float:left;margin:0;text-align:center;}
.mednav li a {font-family: georgia; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#000000;text-decoration:none; text-transform:lowercase;}
.mednav li a {background:none; }
.mednav li a:hover, li a:focus, li a:active {text-decoration:underline; color:#000000;}
#navbar-iframe {
display: none !important;
}

Code yang ke dua:

Cari lagi code berikutnya seperti <body> peste tepat di bawah <body>

<div id=’top’>
<div id=’top-wrap’>
<div class=’topnav’>
<ul id=’topnav’>
<li class=’selected’><a href=’/’><img border=’0′ src=’http://gambar atau image anda.png‘ style=’padding:0px;’/></a></li>
<li><a href=’http://blogsobat.com‘ title=’About’>About</a></li>
<li><a href=’http://blogsobat.com‘ title=’Ada Aja’>Ada Aja</a></li>
<li><a href=’#’ title=’Nama Judul’><blink>Nama Judul ▼</blink></a>
<ul>
<li><a href=’http://blogsobat.com‘ title=’Exchange Link’>Tukar Link</a></li>
<li><a href=’http://blogsobat.com/p/banne-exchange.html’ title=’Exchange Banner’>Tukar Banner</a></li>
</ul></li>
<li><a href=’#’ title=’Judul’>Judul ▼</a>
<ul>
<li><a href=’http://blogsobat.com‘ title=’Judul‘>Judul</a></li>
<li><a href=’http://blogsobat.com‘>My Space</a></li>
<li><a href=’http://blogsobat.com‘ title=’Kontak’>Kontak</a></li>
</ul></li>
</ul>
</div>
</div>
<div style=’clear: both;’/>
</div>

Catatan:

Url blog Sobat/http://blogsobat.com atau yang berwarna merah ganti denga ulr blog sendiri dan untuk judul yang berwarna biru, gatikan dengan judul blog Sobat.

Klik Preview dulu untu melihat aktif atau tidak setelah itu , klik Save Template.

Selasai….. semoga berguna……

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s