Teknologi dan Komputer

Rabu, 07 Januari 2015

Membuat Menu Horizontal Ala Facebook di Atas Header Blog

Teknologi Virtual

Membuat Menu Horizontal Ala Facebook di Atas Header Blo
Menu horizontal adalah menu dengan bentuk datar lurus yang memuat beberapa link halaman blog. Kegunaan menu pada blog sendiri adalah untuk memudahkan para pengunjung blog menelusuri semua yang ada pada blog. Beikut ini akan dibagikan cara membuat menu tab horizontal ala facebook lengkap dengan kotak pencarian yang bisa Anda terapkan pada blog Anda.

Contoh menu horizotal ala facebook seperti pada gambar di atas. Untuk membuatnya silahkan ikuti langkah-langah berikut ini :
  • Login pada dashboard blogger, kemudian masuk tata letak. Pilih Navbar dan sembunyikan.
  • Copy kode CSS berikut ini dan paste di atas  ]]></b:skin>
/*-----------------------------------------------------
Menu FB By Tekno Virtual
-----------------------------------------------------*/
.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);
}
  • Copy kode di bawah ini dan letakkan di bawah kode <body> 
<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://www.teknologivirtual.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>

0 comments:

Posting Komentar

= > Silahkan berkomentar sesuai topik artikel di atas
= > Berkomentar dengan URL (mati / hidup) tidak akan dipublish
= > Gunakan gaya bahasa dan tata penulisan yang mudah dipahami

 
hosting indonesia