Cara Membuat Navbar Dengan Form Input Search di Blogger

Other

Beranda

XML Blogger Code Cara Membuat Tema Blogger Dari Awal Widget Blogger Code Conditional Blogger Code Membuat Navbar di Blogger Footer Menarik di Blogger Mengganti Nextprev Icon di Blogger Mengganti Nextprev Number di Blogger Cara Membuat Button Link di Atas Image Header di Blogger Cara Membuat Responsive Post Grid Beranda di Blogger Cara Membuat Navbar Dengan Form Input Search di Blogger

Getcond Blogger, Bagaimana cara membuat navbar dengan form input search di blogger

Form input search ini tidak memakai widget, Dalam Blogger, biasanya form pencarian menggunakan widget pencarian bawaan untuk memastikan fungsi pencarian berjalan dengan baik. Namun, jika Anda tidak ingin menggunakan widget bawaan, Anda masih bisa membuat form pencarian kustom dengan memanfaatkan elemen HTML

dan mengatur atribut action dengan URL pencarian blog (data:blog.searchUrl).

---

Tambahkan HTML

Tambahkan kode HTML berikut di tempat yang sesuai dalam tata letak navbar:

HTML

<!-- Navigation -->  
<b:section class='g3-top g3-black' id='navbar' name='navigation' showaddelement='true'>
    <b:widget cond='data:view.isMultipleItems or data:view.isSingleItem' id='LinkList3' locked='true' title='Navigation' type='LinkList' version='1'>
      <b:widget-settings>
        <b:widget-setting name='sorting'>NONE</b:widget-setting>
        <b:widget-setting name='text-1'>Tentang</b:widget-setting>
        <b:widget-setting name='link-1'>#</b:widget-setting>
        <b:widget-setting name='text-0'>Kontak</b:widget-setting>
        <b:widget-setting name='link-2'>#</b:widget-setting>
        <b:widget-setting name='link-0'>#</b:widget-setting>
        <b:widget-setting name='text-2'>Blog</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>

<b:if cond='data:title != ""'><h2 style='display:none'><data:title/></h2></b:if>
 <div class='widget-content g3-bar'>
   <ul class='g3-container' style='margin:0;padding:0'>
       <li class='g3-bar-item g3-padding g3-button g3-padding-16 g3-hide-small'>
         <a expr:href='data:blog.homepageUrl'>Beranda</a></li> 
     <b:loop values='data:links' var='link'>
       <li class='g3-bar-item g3-padding g3-button g3-padding-16 g3-hide-small'>
         <a expr:href='data:link.target'><data:link.name/></a></li>   
     </b:loop>
        <li class='g3-right g3-bar-item'>
         <form class='gsc-search-box' expr:action='data:blog.searchUrl' method='get'>
          <b:attr cond='not data:view.isPreview' name='target' value='_top'/>
          <table cellpadding='0' cellspacing='0' class='gsc-search-box'>
            <tbody>
              <tr>
                <td class='gsc-input'>
                  <input autocomplete='off' class='gsc-input g3-padding' expr:value='data:view.isSearch ? data:view.search.query.escaped : ""' name='q' placeholder='Telusuri Blog Ini' size='10' style='width:180px' title='search' type='text'/>
                </td>
                <td class='g3-margin-0'>
                  <input class='g3-button g3-khaki' expr:value='data:messages.search' title='search' type='submit'/>
                </td>
              </tr>
            </tbody>
          </table>
        </form>
       </li>   
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
    </b:widget>
  </b:section>

Kode di atas akan menambahkan sebuah form input search dengan placeholder "Telusuri Blog Ini". Ketika pengguna memasukkan kata kunci dan menekan tombol "Telusuri", mereka akan diarahkan ke halaman hasil pencarian di blog Anda.

---

Tambahkan CSS

HTML

<style>
/* css navbar */
#navbar {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.g3-container::after, .g3-container::before, .g3-row-padding::after, .g3-row-padding::before, .g3-cell-row::before, .g3-cell-row::after, .g3-clear::after, .g3-clear::before, .g3-bar::before, .g3-bar::after {
  content: "";
  display: table;
  clear: both;
}
.g3-black, .g3-hover-black:hover {
  color: #fff !important;
  background-color: #000 !important;
}
.g3-top {
  top: 0;
}
.g3-top, .g3-bottom {
  position: fixed;
  width: 100%;
  z-index: 1;
}
#LinkList3 {
  margin: 0 !important;
}
.g3-bar {
  width: 100%;
  overflow: hidden;
}
#LinkList3 ul li {
  list-style: none;
}
.g3-bar .g3-button {
  white-space: normal;
}
.g3-bar .g3-bar-item {
  padding: 8px 16px;
  float: left;
  width: auto;
  border: none;
  display: block;
  outline: 0;
}
.g3-padding-16 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.g3-padding {
  padding: 8px 16px !important;
    padding-top: 8px;
    padding-bottom: 8px;
}
.g3-button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.g3-button {
  border: none;
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}
.g3-right {
  float: right !important;
}
.g3-khaki, .g3-hover-khaki:hover {
  color: #000 !important;
  background-color: #f0e68c !important;
}
<style>

Sesuaikan gaya CSS dan struktur HTML sesuai dengan desain dan preferensi Anda. Anda juga bisa menambahkan fitur tambahan seperti tombol "bar" untuk layar pengguna mobile web dengan penggunaan javascript.

---

Dengan mengikuti langkah-langkah di atas, Anda telah berhasil menambahkan navbar dengan form input search ke blog Anda di Blogger. Ini akan memudahkan pengguna untuk menemukan konten yang mereka cari di blog Anda. Semoga Tutorial ini bermanfaat untuk Anda dalam memperbaiki tampilan dan fungsionalitas blog Anda!