Cara Membuat Menu Melayang Di Atas Header

Cara Membuat Menu Melayang Di Atas Header, Kali ini saya akan membahas tentang Cara Membuat Menu Melayang Di Atas Header atau yang sering di sebut Membuat menu ikut turun saat mouse di scroll, Jika Anda Bingung ini adalah screenshotnya: Buka editor Template dengan cara mengeklik Template- Edit HTML- Lanjutkan
Oke langsung aja Caranya:
  • Buka editor Template dengan cara mengeklik Template > Edit HTML > Lanjutkan
  • Cari Kode ]]></b:skin> Agar mudah dalam pencarian tekan Ctrl+f, dan sisipkan kode di bawah ini Tepat di atas ]]></b:skin> .
#navbar-iframe { height:0px; visibility: hidden; display: none; }

Keterangan: kode tersebut berfungsi menyembunyikan navbar standar Blogger, Sehingga apa bila sebelumnya anda sudah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah berikutnya.
Sisipkan rangkaian kode CSS berikut ini tepat berada di atas ]]></b:skin>
/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Semar Bingung
Blog: Henry -:[Sumber info]:-
URL : http://henry-multimedia-informasi.blogspot.com/
--------------------------------------------------------------*/
.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 30px;
  font-size: 13px;
  z-index: 99;
  white-space: nowrap;
  background-color: #66CCFF;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #66CCFF 100%);
  box-shadow: 0px 0px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kolom-utama {
  -moz-transition: all 0.2s linear 0s;
  width: 960px;
  height: auto;
  margin: 1px auto;
}

.kolom-menu {
  width: 521px;
  height: auto;
  margin: 0px 0px 0px -41px;
  float: left;
  display: inline;
}

.kolom-menu ul {
  height: auto;
  margin-top: 0px;
}

.kolom-menu ul li {
  float: left;
  position: relative;
  list-style: none outside none;
}

.kolom-menu ul li:first-child {
  border-left: 1px solid rgba(30, 30, 30, 0.125);
}

.kolom-menu ul li a {
  color: #ffffff;
  font-weight: bold;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  position: relative;
  border-right: 1px solid rgba(30, 30, 30, 0.125);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125);
}

keterangan:
Warna tulisan yang Berwarna Merah adalah lebar kolom menu tersebut

Warna tulisan yang Berwarna Hijau adalah ukuran tulisan di dalam menu-nya
Warna tulisan yang Berwarna Biru adalah warna background menu-nya.
  • Cari kode </body> dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.
<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://henry-multimedia-informasi.blogspot.com/'><img alt='L3' height='15px' src='https://lh6.googleusercontent.com/-GrWWmwsRww4/UFjcGGzlSYI/AAAAAAAAAn0/rP9UFz050sk/s800/Beranda.png' width='20px'/></a></li>
        <li><a href='URL'>Menu Kiri 1</a></li>
        <li><a href='URL'>Menu Kiri 2</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>
  • Klik Simpan
Semoga Bermanfaat...
Happy Blogging!!
Previous
Next Post »

38 komentar

Write komentar
Iam Yaoyao
AUTHOR
May 5, 2013 at 11:39 PM delete

Thanks ya, bermanfaat banget :)

Reply
avatar
May 21, 2013 at 10:00 PM delete

gan kalau mau ganti gambar rumahnya gemana caranya??

Reply
avatar
Henry Dwi.s
AUTHOR
May 22, 2013 at 1:54 PM delete

cari kode seperti ini: https://lh6.googleusercontent.com/-GrWWmwsRww4/UFjcGGzlSYI/AAAAAAAAAn0/rP9UFz050sk/s800/Beranda.png
lalu ganti kode diatas dengan kode gambar yang anda inginkan!

Reply
avatar
June 5, 2013 at 8:33 PM delete

Maksudnya kode Gemana gan?

Reply
avatar
June 6, 2013 at 11:47 PM delete

bagus nih bro.. harus di coba dlu! :-d

Reply
avatar
Henry Dwi.s
AUTHOR
June 7, 2013 at 12:05 AM delete

silakan di coba broo:-d

Reply
avatar
Henry Dwi.s
AUTHOR
June 7, 2013 at 5:01 PM delete

Klik kanan pada gambar rumah lalu view image dan lihat kodenya dan ganti kode yang agan inginkan!

Reply
avatar
June 24, 2013 at 7:13 PM delete

GAN KALO NAMBAH MENU NYA GMN KAN CUMAN ADA 3 DOANK

Reply
avatar
Henry Dwi.s
AUTHOR
June 25, 2013 at 7:52 PM delete

keteranganya ada kok gan di atas

Reply
avatar
July 1, 2013 at 5:01 PM delete

makasih banyak
mampir ya
http://mas-helmi.blogspot.com

Reply
avatar
Henry Dwi.s
AUTHOR
July 4, 2013 at 9:03 AM delete

sama-sama, oke gan :)

Reply
avatar
July 30, 2013 at 9:47 PM delete

ada ngak mas tutorial cara buat menu melayang,seperti template punya mas ni. terimakasih

Reply
avatar
Henry Dwi.s
AUTHOR
July 31, 2013 at 10:27 AM delete

maksudnya fixed header? ada kok mas,http://henry-multimedia-informasi.blogspot.com/2013/07/fixed-header-blog-dengan-box-search.html

Reply
avatar
Harman Tajang
AUTHOR
August 3, 2013 at 7:23 PM delete

mas, boleh bertanya? cara buat Header mas yang melayang itu [HMI TIPS & TRIK Blog] gimana caranya mas? apakah sama dengan tekhnik pada tutorial mas kali ini?

Reply
avatar
Henry Dwi.s
AUTHOR
August 3, 2013 at 8:03 PM delete

pake teknik yang ini http://henry-multimedia-informasi.blogspot.com/2013/07/fixed-header-blog-dengan-box-search.html

Reply
avatar
August 8, 2013 at 5:00 PM delete

Nice info gan... :) comebag maniakadsense.blogspot.com

Reply
avatar
September 26, 2013 at 8:11 AM delete

kok gk bisa ya gan
http://info-pcware.blogspot.com/

Reply
avatar
Rino Prantama
AUTHOR
October 13, 2013 at 4:20 AM delete

gan . background menunya bisa dibikin transparan apa g ?

Reply
avatar
Henry Dwi.s
AUTHOR
October 15, 2013 at 9:04 PM delete

wahh kalau yang ini blom ane kotak-katik, tetapi jika ingin mengganti warna menjadi transparant silakan di ganti #kodewana dengan transparant, Contoh:(#fff) diganti menjadi(transparant)

Reply
avatar
Ahsan Basayef
AUTHOR
November 7, 2013 at 11:55 AM delete

Mekasih gan, ini yg saya cari,..

muslim-kreativ.blogspot.com

Reply
avatar
November 20, 2013 at 2:20 PM delete

boleh jg trik yg praktis bgt ,makasih buat info nya sob .. ,
www.titianmc.co.id

Reply
avatar
Irf@ n
AUTHOR
January 26, 2014 at 2:35 PM delete

gan klo pengen bkin tulisan berjalan tapi posisinya kaya tab menu artikel ini gmna??

thanks sblumnya..

http://ir-fa.blogspot.com/

Reply
avatar
Henry Dwi.s
AUTHOR
January 27, 2014 at 7:13 PM delete

maksudnya headline news? kalau itu silakan cari tutornya sendiri gan..di google

Reply
avatar
pulsaekstra
AUTHOR
June 7, 2014 at 10:35 PM delete

HaturNuhun ngilmuna Gan...and Salam Sukses Selalu

Reply
avatar
Henry Dwi.s
AUTHOR
June 8, 2014 at 10:27 PM delete

sama-sama, terimakasih juga :)

Reply
avatar
June 25, 2014 at 11:30 AM delete

jangan melayang om, yang menunnya nurun kebawa tp gk melayang gmna om ?

Reply
avatar
June 25, 2014 at 1:44 PM delete

Cb aja ganti top jdi bottom!!!

Reply
avatar
Arkaan ku
AUTHOR
June 27, 2014 at 7:15 PM delete

ini ga bisa di buat sub menu nya ya... kok sy utak atik sperti yang kode nav ga bisa mas,,, ,

Reply
avatar
KSP LESTARI
AUTHOR
February 25, 2015 at 12:40 PM delete

Sama, saya juga tidak bisa. hadeuhhh...

Reply
avatar

=======================================================
• Untuk menyisipkan kode, gunakan tag [code]... KODE ...[/code]

• Untuk menyisipkan kode panjang, gunakan tag [pre]... KODE ...[/pre]

• Untuk menyisipkan catatan, gunakan [quote]...CATATAN ...[/quote]

• Untuk menyisipkan gambar, gunakan [img]..URL GAMBAR..[/img]

• Untuk menyisipkan video, gunakan [youtube]..URL VIDEO..[youtube]
======================================================= EmoticonEmoticon