Blog Seputar Tutorial Komputer, Printer, Windows, Android, Blackberry, Dan Informasi Teknologi

Cara Membuat Menu Di Atas Header Blog

Cara Membuatt Menu Di Atas Header Pada Blog. Pada kesempatan kali ini kita akan membahas bagaimana cara membuat menu navigasi diatas header pada blog, Membuat menu diatas header dapat memperindah blog anda, dan juga mempermudahkan para pengunjung untuk menjelajah blog kita.
Cara Membuatt Menu Di Atas Header Blog

Biasanya menu diatas header diisi dengan Contact Me, Privacy Policy, Facebook, Twitter, dll. Untuk cara membuatnya dapat anda ikuti langkah-langkah berikut ini

Langkah-Langkah Membuat Menu Di atas Header
1. Masuk ke pengaturan Template lalu pilih Edit HTML
2. Cari kode  <![CDATA[ atau <b:skin><![CDATA[ atau ]]></b:skin> gunakan (CTRL+F) untuk mempermudah pencarian
3. Jika sudah ketemu Letakan kode dibawah ini tepat di atas kode tersebut
/*CB Top Menu*/
#top{margin:auto;padding: 0;width: 980px;background:#e8e7e7;border-bottom:1px solid #ddd;}
#top-wrap{margin:auto;padding: 0;width: 960px;background:#e8e7e7;}
#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: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;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;}}
#navbar-iframe {display: none !important;}
Keterangan :
- Tulisan yang berwarna Merah adalah ukurang lebarnya, sesuaikan dengan ukuran template anda
- Tulisan yang berwana Biru adalah warna baiground
- Tulisan yang warna Kuning adalah warna huruf menu

4. Kemudian cari kode <head> atau <body> dan letakan kode dibawah ini tepat di bawah kode tersebut.
<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='/' title='Top Menu'>Top Menu </a></li>
<li><a href='http://www.ilmu-wongcilik.com/p/privacy-policy.html' title='Privacy Policy'>Privacy Policy </a></li>
<li><a href='http://www.ilmu-wongcilik.com/p/contact-kami.html' title='Contact'>Contact </a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
Keterangan :
- Ganti link dan menu sesuai yang anda inginkan
- Anda bisa menambah menu tersebut

5. Simpan Template

Sekian pembahasan tentang bagaimana cara membuat menu di atas header. cara ini sudah dicoba pada blog ini. semoga dapat membantu dan bermanfaat.

Previous
Next Post »

5 komentar

ecko dedy delete December 7, 2014 at 11:33 AM

trimakasih infonya mas. sangat membantu

wong cilik delete December 7, 2014 at 11:48 AM

sama-sama mas. smoga dpat membantu dan bermanfaat

Ermawati Pisces delete February 25, 2015 at 11:32 PM

makasih mas tutorialnya

wong cilik delete April 15, 2015 at 9:00 AM

sama-sama mbak, semoga bermanfaat

Irma Yunia delete April 17, 2015 at 7:54 AM

Thanks ya agan atas informasinya :)
http://bit.ly/1G1rz36

PERINGATAN..!!
1. Berkomentarlah Sesuai Judul Diatas Dengan Sopan dan Jangan Spaming.!!
2. Dilarang Berkomentar Yang Mengandung Unsur Pornografi dan Sara.!!
3. Mohon Maaf Bagi Yang Berkomentar Melampirkan Link Langsung Ane Masukan Spam.!!

Matur Nuwon Sanget Atas Perhatiane Panjenengan Sedoyo. Salam Blogger Wongcilik.

 

Contact Form

Name

Email *

Message *