Cara Membuat Tab Menu Halaman Di Atas Header Blog ~ P.H.I.E.C.K.

Ketika kita pertama kali membuat blog tentunya kita akan menerima pengaturan awal atau default dari blog tersebut, maka secara default di atas header akan ditampilkan tampilan yang mendatar berisikan beberapa menu yang biasa disebut dengan istilah ‘Navbar’ atau bisa juga disebut sebagai baris Navigasi. Namun karena beberapa alasan ingin mempercantik blog tersebut, maka tidak sedikit pengelola blog yang menyembunyikan bagian itu dengan cara menambahkan kode-kode tertentu ke dalam template blog agar tampilannya menjadi sedikit lebih berbeda.

Untuk contohnya bisa lihat gambar di bawah ini :

Jika Anda semua tertarik pada tampilan di atas Anda bisa ikuti langkah-langkah berikut ini :

Pertama-tama tentunya dengan Login terlebih dahulu, kemudian pilih Menu >> Template >> kemudian pilih >> edit HTML >> dan kemudian cari kode script ]]></b:skin> dengan menggunakan CTRL+F agar lebih memudahkan pencarian, kemudian setelah ketemu copy kan kode di bawah ini di atas ]]></b:skin> tersebut.

#navbar-iframe {

height:0px; visibility: hidden; display: none;

}

Keterangan :

Kode tersebut berfungsi untuk menyembunyikan Navbar standar dari Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan Navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang selanjutnya. Kemudian masukkan kode script di bawah ini tepat di atas kode ]]></b:skin>

/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.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:

hasilkan oleh rangkaian kode script di atas adalah warna biru untuk background dan putih pada text. 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:.Warna yang di empat, cari kode <body dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.

Keterangan:

Ganti http://harapansebuahcintaabadi.blogspot.com/ dengan URL blog Anda masing-masing. Kemudian ganti dengan artikel yang mungkin akan di tautkan kedalam Menu Kiri 1 s/d 3 untuk yang sebelah kiri dan kemudian masukkan juga URL dan judul tautannya kedalam Menu 1 dan 2 untuk menu yang sebelah kanan, kemudian Simpan Template.

Setelah template tersimpan maka Navbar standar dari Blogger tidak akan lagi ditampilkan di halaman blog dan akan tergantikan dengan Navbar baru seperti yang tampak pada gambar di atas.

Sekian dulu dari saya, semoga bermanfaat bagi semuanya. aamiinn.

Sumber Inspirasi : Klik Di Sini