Diberdayakan oleh Blogger.

Cara Membuat Tab Menu Laman Di Atas Header Blog

Homepage Kombaghi
Pada kali ini saya akan membagikan sebuah tutorial blog tentang Cara Membuat Tab Menu Laman Di Atas Header Blog .Untuk itu ikuti langkah berikut ini untuk memasangnya :

1. kalian masuk ke blog kalian terlebih dahulu,
2. klik opsi pilih template kemudian klik edit HTML
3. kemudian cari kode ]]></b:skin> 
4. setelah itu simpan kode dibawah ini tepat di atas kode ]]></b:skin> 

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

5. sama seperti di atas, kode dibawah ini taruh di atas kode  ]]></b:skin>



/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Bagastya H
Blog: Kombaghi:-
URL : http://kombaghi.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);
}

6. setelah selesai kemudian cari kode <body> dan simpan kode dibawah ini tepat dibawah kode tadi



<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://kombaghi.blogspot.com/'><img alt='L3' height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYOgpk6U3sd0X6vN1S_VYso6r5DFJpGCxt5_4QVz-FVx7z-vKloX6fHajNdN9WmmrHYUJ7llTau2Lwoi6oPtgvOrs-gv4CRRbTUNgVfNR8WoswFsSrwqU-t_k25f5Z63zQ12TfThuBsFg/s800/Beranda.png' width='25px'/></a></li>
        <li><a href='http://kombaghi.blogspot.com/'>Beranda</a></li>
        <li><a href='http://kombaghi.blogspot.com/p/daftar-isi_6.html'>Daftar Isi</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: center'>
        <li><a href='#'>Contact Us</a></li>

      </ul>
    </div>
  </div>
</div

Keterangan :
Warna Merah : Letak
Warna Kuning : Nama Link
Warna Biru : Tempat Link

pemberitahuan:

  • Ganti url berwarna biru dengan link yang anda ingin tampilkan 

0 komentar:

Posting Komentar