April 2, 2025 02:36:16 PM Menu
 
» » Cara Membuat Menu Top Di Atas Header

A+ A-
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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgouAW-QcSjRUjxOeUr8LjZXv2R9Cvt2f6uuFKwP3xWo2ZWZM4f0U4Gq_-oZ5daZWHCrp2Xxi3tGG_1_XYynI9WH0_GbTjFmnDZNwjHBUFBnqPRxIXwCYCtuGkoJw9KnAtmgcwX4VRkGC0/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!
30 Mar 2012
Diposting oleh
Label:

Share to:

di 06.16

Posting Komentar Blogger Disqus

  1. Anonim13 Juni 2012 pukul 11.11

    Bgus Sekali Info Nya senang Berada disini

    BalasHapus
  2. Fuadditiya Imaspadi Muharam18 September 2012 pukul 10.59

    Dilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!

    BalasHapus
  3. Anonim6 Oktober 2012 pukul 19.43

    thanks manteps nice infoooooooo

    BalasHapus
  4. Dwi13 Januari 2013 pukul 03.24

    sipppppp

    BalasHapus
  5. Aafi18 Maret 2013 pukul 15.23

    Klo gk ada html body gmana?

    BalasHapus
  6. Rifin28 Maret 2013 pukul 20.56

    Dilarang Menyertakan Link Hidup!! Spam tidak diperbolehkan!

    BalasHapus
  7. Unknown30 Mei 2013 pukul 12.55

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

    BalasHapus
  8. Unknown16 Agustus 2013 pukul 12.47

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

    BalasHapus
  9. Mezi Aris Apronny24 November 2013 pukul 00.28

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

    BalasHapus
  10. Unknown3 Maret 2015 pukul 11.44

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

    BalasHapus
  11. Unknown14 Maret 2015 pukul 13.21

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

    BalasHapus
  12. Unknown2 April 2015 pukul 15.29

    makasih banyak buat infonya,, nice post..

    http://goo.gl/4lKCNU

    BalasHapus
  13. Unknown6 April 2015 pukul 07.12

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

    BalasHapus
  14. Unknown10 April 2015 pukul 20.25

    makasih banyak buat tutornya, sangat bermanfaat

    http://goo.gl/V7iMKP

    BalasHapus
  15. Unknown15 April 2015 pukul 07.35

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

    BalasHapus
  16. Anonim17 April 2015 pukul 21.01

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

    BalasHapus
  17. Unknown13 Mei 2015 pukul 09.34

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

    BalasHapus
  18. chapungk15 Februari 2016 pukul 21.08

    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
:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Klik untuk melihat kode!
Untuk menyisipkan emoticon Anda harus menambahkan setidaknya satu spasi sebelum kode.

Langganan: Posting Komentar (Atom)
 
Top