Beranda » TIPS BLOG » TRIK BLOG » CARA MEMBUAT MENU HORIZONTAL DI ATAS HEADER

CARA MEMBUAT MENU HORIZONTAL DI ATAS HEADER

Ditulis oleh: -
Hallo semua kali ini saya akan share semua tentang bagaimana cara membuat top menu atau link menu di atas header blog. Kalau kalian bingung kalian bisa tilik dech contoh nya di Blog ancur ini atau bisa juga di blog saya sendiri . Bagaimana apakah sudah paham maksud top menu itu..?kalo udah langsung dech dicoba semoga tips ini bisa anda sekalian mengerti


1. Login di blogger dengan ID kamu
2. Klik menu Layout
3. Klik Tab Edit HTML



Cara Membuat Drop Cap pada Posting

Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklikDownload Template Lengkap.

Cara Membuat Drop Cap pada Posting
4. Centang Expand Template Widget agar code dapat terlihat semua





5. Cari Kode berikut untuk lebih cepat (F3) <b:skin><![CDATA[ masukan kode di bawah ini setelah kode tadi.. tepatnya sesudah keterangan /* Variable definitions

/*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;
}

6. lalu kamu cari code <body> gunakan ctrl + F untuk memudahkan pencarian.

7. Lalu sobat copas code berikut ini tepat dibawah code <body>

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://adaisinya.blogspot.com/'>adaisinya.blogspot.com</a></li> 
 <li><a href='isi dengan URL Anda' title='Isi Tittle Tab'>isi dengan keterangan URL</a></li> 
<li><a href='................................' title='...................'>.......................</a> </li>
<li><a href='.................................' title='.................'>.........................</a></li> 
<li><a href='................................' title='..............'>.................</a> </li>
<li><a href='...................................' title='..............'>.........................</a></li>         
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

yang perlu diperhatikan kata berwarna biru silahkan Anda ganti sesuai keinginan Anda dan kalau inign memperbanyak tab tinggal copy <li><a href='isi dengan URL Anda' title='Isi Tittle Tab'>isi dengan keterangan URL</a></li>  dan Anda isi .

8. Simpan dan lihat hasilnya. Semoga Tips yang saya share ini bisa membantu anda dalam Blogging 


SEMOGA BERGUNA

Artikel terkait :

4komentar:

  1. AcerNovalSelasa, 12 Juli 2011 pukul 00.02.00 WIB

    udah berhasil sob., makasih tutor nya., hhe., liat blog saya., ada kan menunya ? oh iya ., komentar balik yaa

    BalasHapus
  2. 143Selasa, 12 Juli 2011 pukul 16.02.00 WIB

    link telah terpasang di blog saya mohon di cek,,

    BalasHapus
  3. Ahmad RosidiRabu, 13 Juli 2011 pukul 07.35.00 WIB

    wah detail banget tutorialnya. tapi sayang saya bukan lagi pengguna blogspot jadi ndag bisa ngikutin tutorna. semoga bermanfaat tutorna bagi blogger yaks.

    BalasHapus
  4. Ahmad RosidiRabu, 13 Juli 2011 pukul 07.37.00 WIB

    oia kalao gak keberatan ditunggu kunjungan dan komen baliknya yaks.. lebih seneng lagi kalao di share di Facebook/Google+1 tuh ada tombol kanan atas pada postingan mercedes-benz *ngarep.com

    BalasHapus

Seorang reader yang baik pasti Akan baik pula berkomentar :)

Pasang Iklan Murah