Yang Terbaru

Subscribe Here!

Dapatkan Update Informasi Terbaru dari KANG MUROI Melalui Email

Blog Stats

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

By On 13.6.12

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.


20 komentar

wahhh,, thenkyu nih sobat..

langsung di coba dah :))

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

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

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

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

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

wah , live demo nya gak ada y sobat ?

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

makasih, silakan sob, kapan-kapan boleh dicoba

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

sama sama, silakan boleh dicoba kalo minat

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

Tutorial nya ga bisa,saya da coba berkali2

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

Trimakasih gan infony..

sangat bermanfaat bagi perkembangan blog saya.. :)

Blog Fuadditiya | The FIM Site

terimakasih banyak atas infonya kang