Utak Atik Template Bloger Mengganti Menu Navbar
Sekarang akan di bahas tentang Mengganti atau Menyembunyikan Menu Navbar menjadi suka-suka.
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.
Pahami dulu apa itu Navbar serta posisinya. Ditunjuk oleh panah merupakan Navbar yang akan kita hilangkan dan di ganti.
Menu Navbar
Oke..... setelah paham ayo kita lanjutkan proses penggantiannya. Simak baik-baik jangan takut salah, jika anda takut salah maka tidak akan pernah mencoba.
Pertama, pastikan anda suda Sign Blogger.com. kalau sudah 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: fauzichaniago
Blog: Belajar Buat Blog
URL : http://baajei.blogspot.co.id/
--------------------------------------------------------------*/
.bilah-menu-atas {
width: 100%;
min-width: 1060px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 27px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #8DD37F;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #8DD37F 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://baajei.blogspot.co.id/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaRd0n252uoG26lW8dvggB2ghzRDRUZaz7vb3dp-EJpSK_IEc0vlm12foVATLACs99nH5-GPOyh0SGmqpLehFVqL-nQfG0DHWVVyjEaxD4-Bt-qsNLjP_vo6kAh5NkQJWlXej4y_a8aHc/s800/Beranda.png' width='20px'/></a></li>
<li><a href='http://baajei.blogspot.co.id/p/site-map.html'>Sitemap</a></li>
<li><a href='http://baajei.blogspot.co.id/search/label/Pantai'>Wisata Pantai</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='http://baajei.blogspot.co.id/search/label/bloger'>Bloger</a></li>
<li><a href='http://baajei.blogspot.co.id/search/label/Template'>Template</a></li>
</ul>
</div>
</div>
</div>
Keterangan:
Ganti http://baajei.blogspot.co.id/ 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 blog baajei.blogspot.co.id.
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>.
Baiklah sekian uraian tenang Utak Atik Template Bloger Mengganti Menu Navbar.
Semoga menambah ilmu dan pengetahuan sobat Blogging semuanya.
Artikel Terkait :
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.
Pahami dulu apa itu Navbar serta posisinya. Ditunjuk oleh panah merupakan Navbar yang akan kita hilangkan dan di ganti.
Menu Navbar
Oke..... setelah paham ayo kita lanjutkan proses penggantiannya. Simak baik-baik jangan takut salah, jika anda takut salah maka tidak akan pernah mencoba.
Pertama, pastikan anda suda Sign Blogger.com. kalau sudah 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: fauzichaniago
Blog: Belajar Buat Blog
URL : http://baajei.blogspot.co.id/
--------------------------------------------------------------*/
.bilah-menu-atas {
width: 100%;
min-width: 1060px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 27px;
font-size: 13px;
z-index: 99;
white-space: nowrap;
background-color: #8DD37F;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #8DD37F 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://baajei.blogspot.co.id/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaRd0n252uoG26lW8dvggB2ghzRDRUZaz7vb3dp-EJpSK_IEc0vlm12foVATLACs99nH5-GPOyh0SGmqpLehFVqL-nQfG0DHWVVyjEaxD4-Bt-qsNLjP_vo6kAh5NkQJWlXej4y_a8aHc/s800/Beranda.png' width='20px'/></a></li>
<li><a href='http://baajei.blogspot.co.id/p/site-map.html'>Sitemap</a></li>
<li><a href='http://baajei.blogspot.co.id/search/label/Pantai'>Wisata Pantai</a></li>
</ul>
</div>
<div class='kolom-menu'>
<ul style='float: right'>
<li><a href='http://baajei.blogspot.co.id/search/label/bloger'>Bloger</a></li>
<li><a href='http://baajei.blogspot.co.id/search/label/Template'>Template</a></li>
</ul>
</div>
</div>
</div>
Keterangan:
Ganti http://baajei.blogspot.co.id/ 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 blog baajei.blogspot.co.id.
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>.
Baiklah sekian uraian tenang Utak Atik Template Bloger Mengganti Menu Navbar.
Semoga menambah ilmu dan pengetahuan sobat Blogging semuanya.
Artikel Terkait :
Lihat yang Anda Cari disini
Daftar Isi Baajei Blog
