Cara Menambahkan Kotak Pencarian di Navigasi Menu Blog

Tutorial lain yang sangat diminta untuk Anda hari ini tentang menambahkan bilah pencarian ke menu navigasi menu di blog Blogger Anda.

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 kepada Anda bagaimana menambahkan ikon media sosial ke bilah navigasi Anda juga, jadi awasi terus. Seperti biasa jika Anda memiliki pertanyaan, tinggalkan di bawah.

1. Kode Kotak Pencarian

Anda dapat menambahkan kode ini di mana saja di blog Anda untuk menambahkan bilah pencarian.

<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. Cara menambahkan ke Navigasi Menu

Jika Anda memiliki bilah navigasi khusus seperti yang ditunjukkan pada tutorial saya sebelumnya seperti menu tarik-turun yang dapat ditata menggunakan perancang template, tambahkan kode bilah pencarian sebelum kode berikut. Untuk menyesuaikan bilah pencarian, lihat langkah 3 di bawah ini.

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

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

Jika menggunakan gadget halaman (page)

Jika Anda menggunakan gadget halaman dan ingin menambahkan bilah penelusuran ke dalamnya, buka Template > Edit HTML > Lompat ke Widget > PageList1.

Luaskan kode dengan mengeklik panah di sebelah kiri di samping angka dan Anda akan melihat sesuatu yang mirip dengan yang berikut ini. 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>
<!-- SEARCH BOX HERE -->
</ul>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Jika menggunakan tautan/Links Gadget

Jika Anda menggunakan gadget daftar tautan dan ingin menambahkan bilah pencarian ke dalamnya, buka Template > Edit HTML > Lompat ke Widget > LinkList1. 

Luaskan kode dengan mengeklik panah di sebelah kiri di samping angka dan Anda akan melihat sesuatu yang mirip dengan yang berikut ini. 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>
<!-- SEARCH BOX HERE -->
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Styling CSS

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

#searchThis {float: right;}

Style the search box using

#searchBox { }

and style the button using

#searchButton { }

Demikian Cara Menambahkan Kotak Pencarian di Navigasi Menu Blog

Sumber