Membuat Menu Diatas Header Ala Blog Muro'i El-Barezy

Assalamu 'alaikum. Sobat Muro'i El-Barezy, dalam postingan kali ini masih tentang ngoprek template. Yang sebelumnya pernah posting membuat Menu Horizontal Cantik Pengganti Navbar, kali inipun masih tentang menu. Karena ada sobat Muro'i El-Barezy yang menanyakan bagaimana membuat menu di atas header seperti blog ini, yaitu sobat Muhammad Hidayat.
Sebenarnya menu diatas adalah bawaan dari template ini alias sudah ada dari sononya. Cuma pernah ane hilangkan dan menggantinya dengan menu horizontal yang lain. Demonya bisa dilihat pada header blog ini. Nah barangkali mungkin juga cocok di template sobat Muhammad Hidayat atau sobat yang lain, silakan ikuti tutorial berikut ini :
  • Login ke Blogger
  • Click tab "rancangan" (kalau dalam bahasa indonesia)
  • Terus click sub tab "Edit HTML"
  • Sebelum edit template sobat, ada baiknya untuk membackup templatedahulu.
Copy code dibawah ini dan paste code tersebut tepat di diatas tag " ]]></b:skin> " 
/* Top Horisontal
---------------------------------------------*/
.toppic{background:transparent; width:100%; margin:0 auto;}
.topnav{width: 980px;height:32px;overflow: hidden;margin:0 auto;padding:0 auto;color:#555;font:bold 13px Arial;}
.toppic a:link, .toppic a:visited {color:#800000;text-decoration:none;}
.toppic a:hover {color:#000;text-decoration:underline;}

Selanjutnya copy juga code dibawah ini dan paste tepat dibawah tag "<body>"
 

Yang terakhir adalah SAVE template sobat. Semoga bermanfaat dan selamat mencoba

Catatan :
Silakan sobat meng-custom sesuai selera sobat dengan mengganti warna font, merubah link dan lainnya.


Post a Comment

19 Comments

  1. wahhh,, thenkyu nih sobat..

    langsung di coba dah :))

    ReplyDelete
    Replies
    1. oya sobat,, di blog saya gak ada kode tag body nih,
      mohon pencerahannya :)), apa template saya yang gak support yah,,, kayanya sih iya nih

      Delete
    2. Rata2 semua template pasti ada kode <body> kak, mungkin template anda sudah diubah kali, <body tanpa ada tag penutup atau apalah gitu !

      Delete
    3. bener sob tiap template pasti puny akok, coba lebih teliti lagi nyarinya

      Delete
  2. keren sob.. :D
    kapan2 bisa di coba nih untuk ganti tampilan menu ruki-zone yg skrang.. Hehe

    ReplyDelete
    Replies
    1. makasih, silakan sob, kapan-kapan boleh dicoba

      Delete
  3. waahh ,,,saya lagi pusing ngedit tempelat nih ,,, hihihi :D
    nanti bisa dicoba deh ... :D

    ReplyDelete
  4. wah , live demo nya gak ada y sobat ?

    ReplyDelete
    Replies
    1. Demonya ada di blog ini sob, paling atas, diatas header

      Delete
  5. hmm,, boleh juga nii.. keren bang..

    ReplyDelete
  6. Tutorial nya ga bisa,saya da coba berkali2

    ReplyDelete
    Replies
    1. tutorial ini sudah pernah saya coba disini : http://iksada-ibad.blogspot.com/
      silakan ditengok, jika sobat tidak bisa kemungkinan templatenya ga support, atau bisa lebih teliti lagi dan pastikan meletakkan script pada tag yang benar

      Delete
  7. terimakasih banyak atas infonya kang

    ReplyDelete