Ketika
membuat blog dengan menggunakan platform Blogger atau Blogspot, maka
secara default di atas header akan ditampilkan bilah mendatar berisikan
beberapa menu yang biasa disebut dengan istilah ‘Navbar’ atau dapat pula
disebut sebagai baris navigasi. Namun karena beberapa alasan (misalnya
adalah untuk mempercantik tampilan halaman), maka tidak sedikit
pengelola blog yang menyembunyikan bagian tersebut dengan cara
menambahkan kode tertentu ke dalam template.
jika tertarik silahkan ikuti langkah-langkah berikut ini:
jika tertarik silahkan ikuti langkah-langkah berikut ini:
Pertama, buka editor
template dengan cara mengeklik menu ‘Template’ > ‘Edit
HTML’ > ‘Lanjutkan’.
Kedua, cari ]]></b:skin> dan
kemudian sisipkan kode di bawah ini tepat di atasnya.
#navbar-iframe {
height:0px; visibility: hidden; display: none;
}
Keterangan:
Kode tersebut berfungsi untuk
menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda
telah menyembunyikan navbar standar maka lewati langkah ini dan
lanjutkan pada langkah yang ketiga.
Ketiga, sisipkan
rangkaian kode CSS berikut ini tepat di atas ]]></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:
Warna yang dihasilkan oleh
rangkaian kode CSS di atas adalah warna biru untuk background dan putih
pada teks. 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:.
Keempat, cari kode <body dan kemudian sisipkan rangkaian kode dengan
format seperti contoh berikut ini tepat di bawahnya.
<div class='bilah-menu-atas' id='bilahmenuatas'>
<div class='kolom-utama'>
<div class='kolom-menu'>
<ul>
<li><a href='http://aeroaxel.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnbYbWtOc5R_sk0P1_0foRYATMKRfloVh-9oesC1vrwAETkb7sFs-Ct0tarzj-kdwfg0tz0SC8Gi4f9NsAsv3NKVa60brm6APcuxdCage0bRXamWrA6vnxuIvffSVGP55AeppyloDnHVU/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>
Keterangan:
Ganti http://aeroaxel.blogspot.com/ dengan
URL blog Anda dan ganti pula kata URL dengan link artikel yang
akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu
Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.
Kelima, simpan
template.
Setelah template disimpan maka
navbar standar Blogger tidak lagi ditampilkan di halaman blog dan akan
tergantikan dengan navbar baru seperti yang tampak pada gambar di atas.
Kemudian perlu diketahui bahwa rangkaian contoh kode pada langkah yang
keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri
berisikan 3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu
Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu
Menu Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan
keinginan, maka silakan dilakukan kustomisasi seperlunya dengan
menambahkan atau mengurangi kode <li><a
href='URL'>Menu</a></li>.
Semoga berguna dan bermanfaat.
0 Komentar untuk "Cara Membuat Tab Menu Laman Di Atas Header Blog"
Thank Bro sudah mampir ke blog jelek ini :)
Jangan Lupa berkomentar Bro !!!