MENU NAVIGASI STATIS DENGAN FITUR BERSOSIAL.COM

MUSIK DIGITAL. Kali ini ingin berbagi tips-trik mempercantik tampilan blog milik anda  mempergunakan menu navigasi statis dengan fitur Bersosial.com yang terintegrasi di dalamnya. Dikatakan statis karena menu navigasi ini tidak ikut bergerak meskipun kita menyorot halaman homepage blog sampai ke bawah. Menu navigasi inipun sangat mudah untuk disesuaikan dengan kondisi atau lebar blog yang anda miliki.

Berikut ini bentuk tampilan dari menu Navigasi Statis tersebut ....

Musik Digital

Bila anda tertarik untuk memasang fitur navigasi statis ini, silahkan ikuti proses berikut ini  :

Seperti biasanya, masuk dan login di blogger anda, pilih template dan pilih edit html, oh ya, hampir lupa download seluruh html template anda terlebih dahulu, sehingga bilamana nanti terjadi kesalahan, anda tinggal me-restore ulang template anda.

Langkah berikutnya adalah : carilah kode ]]></b:skin>, letakkan rangkaian script berikut ini di atasnya.

.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 35px;
  font-size: 13px;
  z-index: 99;
  white-space: nowrap;
  background-color: #000;
  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: 3px 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: 0px 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: 0px solid rgba(30, 30, 30, 0.125);
  box-shadow: 0px 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 : Angka 960 px menunjukkan lebar menu statis yang dapat anda sesuaikan dengan lebar wrapper blog anda.

Selanjutnya carilah kode <body>, dan letakkan rangkaian script berikut ini di bawahnya :

<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://dolananmusik.blogspot.com/'><img alt='Musik Digital' height='40px' src='http://img835.imageshack.us/img835/806/star1i.png' title='Home' width='40px'/></a></li>
        <li><a href='URL'><img alt='Daftar Isi' height='15px' src='https://lh5.googleusercontent.com/-PzvwMDsW8Ew/UYmvLFADjDI/AAAAAAAABSI/nhJ3y-8lP98/s800/Daftar%2520Isi.png' title='Daftar Isi' width='20px'/> Sitemap</a></li>
        <li><a href='https://www.bersosial.com/topic/2094/dunia-musik-digital-indonesia'  target='_blank'><img alt='Komunikasi' height='15px' src='https://lh5.googleusercontent.com/-yep7cuRpWq4/UYmvLsJJFPI/AAAAAAAABSQ/5hdXDeu0NLI/s800/Tanya%2520Jawab.png' title='Forum Komunikasi' width='20px'/> Forum Komunikasi</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='http://bersosial.com' target='_blank'><img alt='Bersosial' height='15px' src='http://img441.imageshack.us/img441/1232/1co1.png' title='Bersosial' width='20px'/> Bersosial</a></li>
        <li><a href='URL'><img alt='Kebijakan' height='15px' src='https://lh5.googleusercontent.com/-jbZduEQqB5Q/UYoDSQUNgNI/AAAAAAAABSw/-wbPXoxLfSw/s800/Kebijakan.png' title='Kebijakan' width='20px'/> Kebijakan</a></li>
        <li><a href='URL'><img alt='Kontak' height='15px' src='https://lh4.googleusercontent.com/-zmS8wnvLt1g/UYoDSpgXLrI/AAAAAAAABS0/47n3M5mDB7M/s800/Kontak.png' title='Kontak' width='20px'/> Kontak Me</a></li>
      </ul>
    </div>
  </div>
</div>
    <br/>

Keterangan : Ganti alamat url yang berwarna biru dengan alamat url anda, simpan template anda dan lihat hasilnya.

Demikianlah cara membuat Menu Navigasi Statis dengan fitur Bersosial.com, semoga bermanfaat.


MENU NAVIGASI STATIS DENGAN FITUR BERSOSIAL.COM
Item Reviewed: MENU NAVIGASI STATIS DENGAN FITUR BERSOSIAL.COM 9 out of 10 based on 10 ratings. 9 user reviews.

Tips trik yang mantap, bisa untuk menambah profesionalnya penampilan sebuah blog.
Thanks for sharing.

Emoticon? nyengir

Silahkan meninggalkan komentar dengan bahasa yang relevan dan sopan.. # Don't Spamm ! #

Komentar Terbaru

Just load it!