Blogspot: Cara Menambahkan Search Kafe Ke Sajian Navigasi
Tutorial lain yang sangat diminta untuk Anda hari ini menambahkan bilah pencarian ke sajian navigasi Anda di Blogger. Ini yaitu 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 aku berikutnya akan menawarkan cara menambahkan ikon media umum ke bilah navigasi Anda, jadi perhatikanlah untuk itu. Seperti biasa kalau Anda mempunyai pertanyaan, tinggalkan di bawah.
Tambahkan isyarat kotak pencarian ke area yang disorot.
Tambahkan isyarat kotak pencarian ke area yang disorot. 
Tambahkan ke CSS Anda (Template> Edit HTML> di atas]]> </ b: skin>)
Ganti yang berikut ini
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 sanggup menambahkan isyarat ini di mana saja di blog Anda untuk menambahkan bilah pencarian atau menciptakan isyarat Anda sendiri memakai 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 mempunyai bilah navigasi khusus ibarat yang ditunjukkan di tutorial aku sebelumnya ibarat menu dropdown yang sanggup diatur memakai designer template, maka tambahkan isyarat bilah pencarian sebelum isyarat berikut. Untuk menyesuaikan bilah pencarian, lihat 3 langkah di bawah ini.</ul> <!-- end navmenu -->Kami menambahkannya sebelum </ul> sehingga itu bab dari daftar tanpa menjadi item daftar <li>...</li>.
JIKA MENGGUNAKAN HALAMAN GADGET
Jika Anda memakai gadget halaman dan Anda ingin menambahkan bilah penelusuran ke sana, buka Template> Edit HTML> Lompat ke Widget> PageList1. Perluas isyarat dengan mengeklik panah di sebelah kiri di samping angka dan Anda akan melihat sesuatu yang ibarat dengan yang berikut.Tambahkan isyarat 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 + "_select"'>
<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'>&#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 memakai gadget daftar tautan dan Anda ingin menambahkan bilah penelusuran ke sana, buka Tema > Edit HTML > Jump to Widget > LinkList1. Perluas isyarat dengan mengeklik panah di sebelah kiri di samping angka dan Anda akan melihat sesuatu yang ibarat dengan yang berikut.Tambahkan isyarat 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 memakai 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.
