BLOGSPOT: CARA MENAMBAHKAN SEARCH BAR KE MENU NAVIGASI

Tutorial lain yang sangat diminta untuk Anda hari ini menambahkan bilah pencarian ke menu navigasi Anda di Blogger. Ini adalah cara yang baik untuk mengintegrasikan beberapa hal ke dalam satu bilah navigasi untuk menghemat ruang dan membantu pembaca Anda menemukan apa yang mereka cari. Tutorial saya berikutnya akan menunjukkan cara menambahkan ikon media sosial ke bilah navigasi Anda, jadi perhatikanlah untuk itu. Seperti biasa jika Anda memiliki pertanyaan, tinggalkan di bawah.

SELALU BACK UP BLOG ANDA SEBELUM MEMBUAT PERUBAHAN

Cari tahu cara mem-backup seluruh blog Anda termasuk template Anda di sini.

Cara Memasang Search Bar ke Menu Navigasi Anda

1. CARI BAR CODE

Anda dapat menambahkan kode ini di mana saja di blog Anda untuk menambahkan bilah pencarian atau membuat kode Anda sendiri menggunakan Gooogle Custom Search.

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this blog" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" vinput="" name="q" /> <input id="searchButton" value="Go" type="submit" /></form>

2. BAGAIMANA CARA MENAMBAH KE BAR NAVIGASI

Jika Anda memiliki bilah navigasi khusus seperti yang ditunjukkan di tutorial saya sebelumnya seperti menu dropdown yang dapat diatur menggunakan designer template, maka tambahkan kode bilah pencarian sebelum kode berikut. Untuk menyesuaikan bilah pencarian, lihat 3 langkah di bawah ini.

</ul> <!-- end navmenu -->

Kami menambahkannya sebelum </ul> sehingga itu bagian dari daftar tanpa menjadi item daftar <li>...</li>.

JIKA MENGGUNAKAN HALAMAN GADGET

Jika Anda menggunakan gadget halaman dan Anda ingin menambahkan bilah penelusuran ke sana, buka Template> Edit HTML> Lompat ke Widget> PageList1. Perluas kode dengan mengeklik panah di sebelah kiri di samping angka dan Anda akan melihat sesuatu yang mirip dengan yang berikut.
Tambahkan kode kotak pencarian ke area yang disorot.

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<b:if cond='data:mobile'>
<select expr:id='data:widget.instanceId + &quot;_select&quot;'>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<option expr:value='data:link.href' selected='selected'><data:link.title/></option>
<b:else/>
<option expr:value='data:link.href'><data:link.title/></option>
</b:if>
</b:loop>
</select>
<span class='pagelist-arrow'>&amp;#9660;</span>
<b:else/>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
<!-- KODE SEARCH BOX DISINI -->
</ul>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

JIKA MENGGUNAKAN LINK GADGET

Jika Anda menggunakan gadget daftar tautan dan Anda ingin menambahkan bilah penelusuran ke sana, buka Tema > Edit HTML > Jump to Widget > LinkList1. Perluas kode dengan mengeklik panah di sebelah kiri di samping angka dan Anda akan melihat sesuatu yang mirip dengan yang berikut.
Tambahkan kode kotak pencarian ke area yang disorot.

<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<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>
<!-- KODE SEARCH BOX DISINI-->
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

3. STYLING KOTAK PENCARIAN

Untuk memposisikannya di sebelah kanan bilah navigasi Anda, buka Tema > Edit HTML dan temukan ]]> </b:skin> dan di atasnya yang menambahkan berikut ini

#searchThis {float: right;}

Gaya kotak pencarian menggunakan

#searchBox { }

dan beri gaya menggunakan tombol

#searchButton { }

Untuk menghapus border dari kotak pencarian
Tambahkan ke CSS Anda (Template> Edit HTML> di atas]]> </ b: skin>)

#searchBox {appearance:none; -moz-appearance:none; -webkit-appearance: none; border: 0px;}

Untuk menambahkan gambar, bukan tombol pencarian
Ganti yang berikut ini

<input id="searchButton" value="Go" type="submit" />

dengan yang berikut ini

<input id="searchButton" value="Go" type="image" src="DIRECT IMAGE LINK" />

Ganti DIRECT IMAGE LINK dengan tautan ke gambar Anda.