Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Menciptakan Sajian Horizontal Ala Facebook Di Atas Header Blog

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

Contoh sajian horizotal ala facebook ibarat pada gambar di atas. Untuk membuatnya silahkan ikuti langkah-langah berikut ini :
  • Login pada dashboard blogger, lalu masuk tata letak. Pilih Navbar dan sembunyikan.
  • Copy aba-aba 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 aba-aba di bawah ini dan letakkan di bawah aba-aba <body> 
<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http:///'><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>


Category: Blogger,

Popular article


Post a Comment for "Menciptakan Sajian Horizontal Ala Facebook Di Atas Header Blog"