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

Kang Muroi

13 Jun, 2012

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>"

<div class='toppic'>
    <div class='topnav'>
<div style='float:left;padding:9px 0px;'>
<strong><i>Assalamu 'alaikum , </i></strong>&nbsp;Ahlan Wa Sahlan&nbsp; | &nbsp;<a href='<b>http://www.blogger.com</b>' title='Sign in for free blogger account'>Sign in</a>&nbsp; | &nbsp;<a href='http://www.blogger.com' title='Registered now for free blogger account'>Registered Now</a>&nbsp; | &nbsp;<a href='http://www.blogger.com' title='Help to Blogger'>Need Help ?</a>
</div>

<div style='float:right;margin-top:2px;width:320px;overflow:hidden;'>
<div id='google_translate_element'/><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en',
    includedLanguages: 'nl,en,tl,fr,de,id,ja,ko,pt,ru',
    autoDisplay: false,
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
  }, 'google_translate_element');}
</script><script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/>
</div>
</div>
</div>

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.

Surga Kenari June 13, 2012 at 9:47 AM

nice tutor kang...

:D
- Kang Muroi June 13, 2012 at 9:49 AM
  
  makasih sob, happy blogging
- SAGITA COM June 13, 2012 at 12:42 PM
  
  iya kak, aku juga lagi nyari tutor ini, makasih gan !
- Kang Muroi June 13, 2012 at 2:39 PM
  
  sama sama, silakan boleh dicoba kalo minat
- Surga Kenari June 16, 2012 at 10:51 PM
  
  Luar biasa !
ruki-zone June 13, 2012 at 11:18 AM

keren sob.. :D
kapan2 bisa di coba nih untuk ganti tampilan menu ruki-zone yg skrang.. Hehe
- Kang Muroi June 13, 2012 at 2:37 PM
  
  makasih, silakan sob, kapan-kapan boleh dicoba
emmethe June 13, 2012 at 11:54 AM

waahh ,,,saya lagi pusing ngedit tempelat nih ,,, hihihi :D
nanti bisa dicoba deh ... :D
- Kang Muroi June 13, 2012 at 2:37 PM
  
  oke makasih sob...
New Auto Followers June 13, 2012 at 1:26 PM

wah , live demo nya gak ada y sobat ?
- Kang Muroi June 13, 2012 at 2:38 PM
  
  Demonya ada di blog ini sob, paling atas, diatas header
yaheu June 13, 2012 at 2:59 PM

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

Anonymous June 16, 2012 at 3:37 PM

Tutorial nya ga bisa,saya da coba berkali2
- Kang Muroi June 16, 2012 at 3:58 PM
  
  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
ian foldism November 28, 2012 at 7:35 PM

terimakasih banyak atas infonya kang