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;
}
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);
}
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/AVvXsEg27K2lcqVBLlhjHrsFtlH8vTirCdymA45q71iLJJB6AjAEX9RRoE3O8UarYh_pYHZZdUOTK8E12kuVRstzuHYdd7Vh-Bd7LuEkDwTbzC3wN08LUGFwUjlQTUsXZVKD8dvdj6DZq3pnZaM/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>
<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/AVvXsEg27K2lcqVBLlhjHrsFtlH8vTirCdymA45q71iLJJB6AjAEX9RRoE3O8UarYh_pYHZZdUOTK8E12kuVRstzuHYdd7Vh-Bd7LuEkDwTbzC3wN08LUGFwUjlQTUsXZVKD8dvdj6DZq3pnZaM/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.
Tidak ada komentar:
Posting Komentar