Home / Navigation / Cara Membuat Menu Horizontal Seperti KASKUS

Cara Download Cara Membuat Menu Horizontal Seperti KASKUS Update Terbaru

Sedikit Info Seputar Cara Membuat Menu Horizontal Seperti KASKUS Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Cara Membuat Menu Horizontal Seperti KASKUS, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel Navigation, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Cara Membuat Menu Horizontal Seperti KASKUS Terbaru
link: Cara Membuat Menu Horizontal Seperti KASKUS

"jangan lupa baca juga artikel dari kami yang lain dibawah"

Berbagi Cara Membuat Menu Horizontal Seperti KASKUS Terbaru dan Terlengkap 2017

Cara Membuat Menu Horizontal Seperti KASKUS

Assalamu'alaikum....
Wah sepertinya ada yang lagi cari menu horizontal seperti Kaskus Hehehe, OK dah kita langsung saja pada inti dari postingan ini yaitu Cara Membuar Menu Horizontal Seperti Kaskus ikuti langkah demi langkah berikut :



-Pergi ke Dasbord Blogger kalian
-Template » Edit HTML »
-Cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.

#navbar-iframe {
  height:0px; visibility: hidden; display: none;
}
 

Keterangan:


Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.
-sisipkan kode CSS berikut ini tepat di atas ]]></b:skin> .



/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Fajri Andaviar
Blog: Fajri Andaviar
URL : http://fajriandaviar.blogspot.com/
--------------------------------------------------------------*/
 

.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 27px;
  font-size: 13px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 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: 0px 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 yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.

-Lalu 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://fajriandaviar.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsI4PNRJOeQqPWMqt1eMQhneR_8fab9XftJ4V37TTRDVQlOpp757fVNqEEcqUJXd9X9YoekNKJVaxhA5Bv4JedF3ZMpTyAJAqJ9r9SqXNgJGZuMoD_6ve_vNAG6vr-U2bOun3hk2UOz00/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>



Keterangan:


Ganti http://fajriandaviar.blogspot.com/ dengan URL blog Kalian dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.

-Terakhir simpan template.

Bagaimana? Lumayan baguskan?
Sekian Tutorial saya Cara Membuat Menu Horizontal Seperti KASKUS ini. Selamat mencoba dan semoga berhasil.

Itulah sedikit Artikel Cara Membuat Menu Horizontal Seperti KASKUS terbaru dari kami

Semoga artikel Cara Membuat Menu Horizontal Seperti KASKUS yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Cara Membuat Menu Horizontal Seperti KASKUS

Share this