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

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.


Advertisement

Baca juga:

Blogger
Disqus
Pilih Sistem Komentar

20 comments

makasih sob, happy blogging

Balas

wahhh,, thenkyu nih sobat..

langsung di coba dah :))

Balas

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

Balas

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

Balas

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

Balas

iya kak, aku juga lagi nyari tutor ini, makasih gan !

Balas

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

Balas

wah , live demo nya gak ada y sobat ?

Balas

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

Balas

makasih, silakan sob, kapan-kapan boleh dicoba

Balas

Demonya ada di blog ini sob, paling atas, diatas header

Balas

sama sama, silakan boleh dicoba kalo minat

Balas

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

Balas

Tutorial nya ga bisa,saya da coba berkali2

Balas

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

Balas

Trimakasih gan infony..

sangat bermanfaat bagi perkembangan blog saya.. :)

Blog Fuadditiya | The FIM Site

Balas

terimakasih banyak atas infonya kang

Balas