Wednesday, May 1, 2013

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ_Q-WSDzJg-whJSi25qJvuN_UFie9Rjgsro8Pi9Sd42p9NzeBcn8v5pRimT_KnCWHUjLfbUN-FT1Ua0kZaCAW029pJmVL34Z2W3A5hcpuPhDtiIfaeNuyLuq0QOXGlx94_qWk7mD_aIQ/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!!

Related Posts

Cara Membuat Menu Melayang Di Atas Header
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

38 komentar

Tulis komentar
avatar
May 5, 2013 at 11:39 PM

Thanks ya, bermanfaat banget :)

Reply
avatar
May 21, 2013 at 10:00 PM

gan kalau mau ganti gambar rumahnya gemana caranya??

Reply
avatar
May 22, 2013 at 1:54 PM

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

Maksudnya kode Gemana gan?

Reply
avatar
June 6, 2013 at 11:47 PM

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

Reply
avatar
June 7, 2013 at 5:01 PM

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

GAN KALO NAMBAH MENU NYA GMN KAN CUMAN ADA 3 DOANK

Reply
avatar
June 25, 2013 at 7:52 PM

keteranganya ada kok gan di atas

Reply
avatar
July 1, 2013 at 5:01 PM

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

Reply
avatar
July 30, 2013 at 9:47 PM

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

Reply
avatar
July 31, 2013 at 10:27 AM

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

Reply
avatar
August 3, 2013 at 7:23 PM

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
August 3, 2013 at 8:03 PM

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

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

Reply
avatar
Anonymous
September 2, 2013 at 12:09 AM

Infonya Bermanfaat Disni

Reply
avatar
September 26, 2013 at 8:11 AM

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

Reply
avatar
October 13, 2013 at 4:20 AM

gan . background menunya bisa dibikin transparan apa g ?

Reply
avatar
October 15, 2013 at 9:04 PM

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
November 7, 2013 at 11:55 AM

Mekasih gan, ini yg saya cari,..

muslim-kreativ.blogspot.com

Reply
avatar
November 20, 2013 at 2:20 PM

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

Reply
avatar
January 26, 2014 at 2:35 PM

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

thanks sblumnya..

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

Reply
avatar
January 27, 2014 at 7:13 PM

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

Reply
avatar
June 7, 2014 at 10:35 PM

HaturNuhun ngilmuna Gan...and Salam Sukses Selalu

Reply
avatar
June 8, 2014 at 10:27 PM

sama-sama, terimakasih juga :)

Reply
avatar
June 25, 2014 at 11:30 AM

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

Reply
avatar
June 25, 2014 at 1:44 PM

Cb aja ganti top jdi bottom!!!

Reply
avatar
June 27, 2014 at 7:15 PM

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

Reply
avatar
February 25, 2015 at 12:40 PM

Sama, saya juga tidak bisa. hadeuhhh...

Reply
avatar
February 10, 2019 at 2:02 PM

Agen Togel Online Terbaik & Terlengkap!
Tersedia Pasaran Hongkong - Sydney - Singapore
Potongan Diskon 2D = 30% | 3D = 59% | 4D = 66%
Dapatkan Keuntungan Dalam Menebak Angka Hingga Ratusan Juta Setiap Hari..
Yuk Gabung Bersama Bolavita Di Website www. bolavita .fun
Untuk Info, Bisa Hubungi Customer Service Kami ( SIAP MELAYANI 24 JAM ) :
BBM: BOLAVITA
WA: +628122222995

Reply

=======================================================
• 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]
=======================================================