Getcond Blogger, Navigation atau navbar yaitu menu yang ditampilkan biasanya paling atas atau bisa juga dibawah header.
Navbar, atau yang disebut juga sebagai navigation bar, adalah elemen pada suatu website yang berisi daftar tautan atau menu yang membantu pengguna berpindah antara berbagai halaman atau bagian dalam situs tersebut. Navbar biasanya terletak di bagian atas halaman web, meskipun penempatannya dapat bervariasi tergantung pada desain situs.
Fungsi utama navbar adalah menyediakan navigasi yang mudah bagi pengguna, memungkinkan mereka dengan cepat mengakses berbagai bagian penting dari situs tanpa harus mencari-cari. Navbar dapat berisi tautan ke halaman utama (home), halaman produk atau layanan, tentang kami, kontak, blog, dan banyak lagi, sesuai dengan kebutuhan spesifik situs tersebut.
Mau membuat navbar ? berikut contoh sederhana dalam membuat menu tampilan ditema blogger.
Kode Navbar
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:layoutsVersion='3' lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<!-- Title -->
<title>Tema Web Blogger First Blogger</title>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3' name='viewport'/>
<b:if cond='!data:view:isLayoutMode'>
<b:skin><![CDATA[
<!-- CSS For Web Page -->
* {
margin:0;
padding:0;
box-sizing:border-box;
}
html {
overflow-x:hidden;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
body {
font-family: 'Inter', sans-serif;
top: 0
}
.main.section #Blog1 {
background-color: transparent;
}
.section {
margin: 0!important
}
@media screen and (max-width:600px) {
body {
top: 0;
bottom: 0;
}
}
]]></b:skin>
</b:if>
<!-- CSS For Layout Section-->
<b:if cond='!data:view:isLayoutMode'>
<b:template-skin><![CDATA[
]]></b:template-skin>
</b:if>
</head>
<body>
<style>
<!-- CSS For Content -->
#navbar {
top: 0;
position: relative;
}
.topnav.section {
width: 100%;
margin: 0!important;
background-color: #000
}
#LinkList1 h2 {
display: none
}
#LinkList1 {
text-align: left !important;
font-size: 18px !important;
margin: 0 !important
}
#LinkList1 li {
list-style: none;
padding: 14px 16px;
float: left;
width: auto;
border: none;
display: block;
outline: 0;
}
#LinkList1 li a {
text-decoration: none;
color: #fff !important;
}
#LinkList1 li a:hover {
opacity: 0.8
}
</style>
<!-- Content Website -->
<!-- Navigation -->
<b:section class='topnav' id='navbar' name='navigation' showaddelement='true'>
<b:widget cond='data:view.isMultipleItems or data:view.isSingleItem' id='LinkList1' locked='true' title='Navigation' type='LinkList'>
<b:widget-settings>
<b:widget-setting name='link-3'>#</b:widget-setting>
<b:widget-setting name='sorting'>NONE</b:widget-setting>
<b:widget-setting name='text-1'>Kontak</b:widget-setting>
<b:widget-setting name='link-1'>#</b:widget-setting>
<b:widget-setting name='text-0'>Home</b:widget-setting>
<b:widget-setting name='link-2'>#</b:widget-setting>
<b:widget-setting name='text-3'>Blog</b:widget-setting>
<b:widget-setting name='link-0'>#</b:widget-setting>
<b:widget-setting name='text-2'>Tentang</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</body>
</html>
Menu Navbar
Navbar dapat berisi berbagai elemen tergantung kebutuhan dan tujuan situs tsb. Berikut beberapa elemen umum yang sering digunakan dalam menu navbar:
- Beranda (Home): Mengarahkan pengguna kembali ke halaman utama situs.
- Tentang Kami (About Us): Memberikan informasi tentang perusahaan, tim, atau proyek.
- Produk atau Layanan (Products/Services): Menampilkan daftar produk atau layanan yang ditawarkan.
- Blog: Jika situs memiliki blog, ini dapat mengarahkan pengguna ke halaman blog.
- Kontak (Contact): Memberikan informasi kontak atau formulir untuk berkomunikasi.
- Portofolio: Menampilkan proyek-proyek atau karya yang telah dilakukan.
- Galeri (Gallery): Menampilkan gambar atau konten multimedia.
- FAQ (Frequently Asked Questions): Jawaban atas pertanyaan yang sering diajukan.
- Login/Register: Jika situs membutuhkan akun pengguna, menyediakan opsi untuk login atau mendaftar.
- Pencarian (Search): Fasilitas pencarian untuk membantu pengguna menemukan konten dengan cepat.
Sedikit penjelasan yang bisa membantu dalam membuat navigation bar pada tema blogger. Anda bisa menambah atau mengubah struktur elemen navbar bisa di element widgetnya atau di xml di tema blogger.