Halo sobat selamat berkunjung di Oto Website, dalam postingan/articles kali ini saya akan membahas tentang Cara Membuat Menu Top Di Atas Header. biasanya dalam template yang sobat download dari situs template menu di bawah header itu pasti sudah ada, makanya saya akan membahas menu top di atas header saja, karna gak begitu banyak kayaknya template yang ada top menu di atas  headernya,biasanya juga kalo kita menemukan template yang kita sukai tapi gak ada top menu di atas headernya, ok dah lansung kita bahas ya??? tapi sebelumnya sobat udah ngerti dong tentang top menu di atas header??? bagi yang belum tau mungkin sobat bisa lihat gambar berikut.
contoh menu top di atas header.


yang di tandai bewarna kuning adalah menu yang akan kita bahas. sekarang udah pada ngertikan???
kalo belum juga coba sobat lihat menu paling atas blog ini, di situ juga ada icon rumah sebagai pengganti url home (jika saya masih menggunakan menu di atas header) nah sekarang udah pada ngerti kan??? intinya seperti itu.

nah sekarang jika sobat belum ada menu seperti di atas, dan sobat berminat ingin mencobanya sobat bisa ikuti step-by step berikut:

1.Pertama-tama silahkan masuk ke akun blog sobat.

2.Lalu pilih tab Rancangan ⇨ Edit HTML.

3.Expand Widget Templates lalu download template sobat, hal ini di lakukan untuk mengantisipasi bila teriadi kesalahan.

4.Dalam Kotak template coba sobat cari kode  <b:skin><![CDATA[  jika kesulitan mencarinya coba baca  Cara Cepat Mencari Kode HTML.

5.Jika sudah ketemu,sekarang copy kode berikut dan paste tepat di atas kode <b:skin><![CDATA[

/*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. Selanjutnya cari kode <body> dan copy-paste kode berikut dan letakkan 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://1.bp.blogspot.com/-7Eveg1Sruok/TZE6GFV_OHI/AAAAAAAABZo/jRHomtpFbd0/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href='http://otowebsite.blogspot.com/p/about-blog.html' title='About Blog'>About Blog</a></li>
<li><a href='http://clickajadong.blogspot.com/' title='Dollars'>PTC Dollars</a></li>
<li><a href='#' title='Exchange'><blink>Exchange &#9660;</blink></a>
<ul>
<li><a href='http://otowebsite.blogspot.com/p/exchange-links.html' title='Exchange Link'>Tukar Link</a></li>
<li><a href='http://otowebsite.blogspot.com/p/banne-exchange.html' title='Exchange Banner'>Tukar Banner</a></li>
</ul></li>
<li><a href='#' title='Contact Me'>Contact Me &#9660;</a>
<ul>
<li><a href='http://facebook.com/dekrif' title='Oto Website'>My Facebook</a></li>
<li><a href='https://twitter.com/#!/otowebsite' title='@otowebsite '>My Twitter</a></li>
<li><a href='http://otowebsite.blogspot.com/p/contac-me.html' title='Contact Us'>Contact Us</a></li>
</ul></li>    
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

Perhatikan teks warna merah, silahkan sobat ganti sesuai keinginan sobat.

7.Simpan.

Nah sekian dulu untuk postingan/articles kali ini semoga bisa bermanfaat untuk sobat semua!

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat?
Silahkan tinggalkan tanggapan/komentar sobat tentang postingan/articles di atas!

Posting Komentar Blogger Disqus

  1. Bgus Sekali Info Nya senang Berada disini

    BalasHapus
  2. Trimakasih gan infony..

    sangat bermanfaat bagi perkembangan blog saya.. :)

    Blog Fuadditiya | The FIM Site

    BalasHapus
  3. thanks manteps nice infoooooooo

    BalasHapus
  4. @Aafi Risya MaulanaMaaf baru sempat membalas.

    Semua template memiliki tag <body> entah itu template premium,free,atau asli template blogger.

    Mungkin tagnya saja yang sedikit berbeda, coba Anda cari tag body dengan pencarian tag seperti ini <body

    BalasHapus
  5. foback ya gan http://roufcrack.blogspot.com

    BalasHapus
  6. artikelnya sangat membantu mas,,,,
    salam kenal dari: http://makalahkomplit.blogspot.com/

    BalasHapus
  7. kalau membuat seperti di www*iskaruji*com bagaimana gan? kan lebih bagus

    BalasHapus
  8. Mantaap sob artikelnya :)
    Ijin share http://grosiracemaxstasik.com/obat-alami-insomnia/
    http://grosiracemaxstasik.com/
    http://apotekherbalkita.com/
    http://pengobatanalamimustajab.com/

    BalasHapus
  9. infonya bagus gan, sukses terus
    http://apotekacemaxs.com/

    BalasHapus
  10. Terimakasih infonya Gan (y)
    Ini yang sedang saya cari-cari
    http://grosirobatjellygmat.com/

    BalasHapus
  11. Nice artikelnya, terimakasih infonya sangat bermanfaat :)
    Ijin share http://kedaijellygamatgoldg.com/
    http://kedaijellygamatgoldg.com/jelly-gamat-gold-g/

    BalasHapus
  12. keren artikelnya :)
    ijin share http://jellygamatgoldg31.com/

    BalasHapus
  13. makasih banyak buat infonya,, nice post..

    http://goo.gl/4lKCNU

    BalasHapus
  14. Thanks artikelnya gan :) di tunggu artikel yang lainnya
    http://goo.gl/ZESxm9

    BalasHapus
  15. makasih banyak buat tutornya, sangat bermanfaat

    http://goo.gl/V7iMKP

    BalasHapus
  16. Terimakasih atas informasinya ^_^
    http://bit.do/3uud

    BalasHapus
  17. mantap dah artikelnya
    http://bit.ly/1a0liGt

    BalasHapus
  18. Terimakasih informasinya :)
    http://bit.do/3eEL

    BalasHapus
  19. Misi gan... Kalo cara bikin menu top yg sama persis dengan yg ada di atas blog agan ini gmna ya gan.. Soalnya ane dah coba yg di atas tapi jadinya gak sempurna..

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top