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.
Apabila sekarang kita berbicara dan membahas mengenai navbar, maka
perlu diketahui bahwasanya navbar tidak hanya dapat disembunyikan, namun dapat
pula dilakukan kustomisasi untuk bagian tersebut yaitu dengan cara menambahkan
navbar baru yang lebih ‘cantik’ bila dibandingkan dengan navbar standar Blogger.
Dan untuk mempermudah pemahaman mengenai navbar baru yang dimaksud di sini,
maka Anda dapat melihatnya pada gambar di tas, dalam hal ini adalah bagian yang
ditunjukkan dengan tanda anak panah.
Oke, sekaligus menanggapi pertanyaan Sobat
Blogger dalam artikel tanya jawab tentang bagaimana cara
membuat menu navbar seperti yang tampak pada gambar di atas, maka sekarang kita
langsung pada pokok pembahasan yaitu mengenai cara membuat bilah navigasi di
atas header sebagai pengganti navbar. Dimana teknik yang perlu dilakukan untuk
keperluan tersebut adalah dengan cara mengerjakan langkah-langkah berikut ini
secara berurutan.
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://eltelu.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEsNefdK47IGdfAnMhl1bnqsbUZ1KvNEfpBKAAlaX8e0HM0R_jkGk1xZ87gknb6YVXB7qEHMdA7Eclm4tocbgrx-4GPdbPmgrkRtxgeO4W8xt0LfQQ0H4ChRVt8AozkG3oB7chPFuEAc4/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://eltelu.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.
Salam.
