cara
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/AVvXsEi7_4okpYXArXyV8P_uDr7m3or3e0AzpPvEAmCnzsioKZ7hBYCRJzPEFQcErHDukG9WMptpX4B5NPpS4wrDeSc2lxawgfVyfDHxrP7qxKnbrTptXsEeaHrzyBKeJgA6wW0hx2394gffLtI/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