Cara Membuat dan Menambah Kotak Pencarian / Search Box disamping Menu Bar Blog

Cara Membuat dan Menambah Kotak Pencarian / Search Box disamping Menu Bar Blog

Hallo teman-teman blogger dan para pengunjung setia blog gudang-pengetahuanmu.blogspot.com !
Artikel mengenai "Cara Membuat dan Menambah Kotak Pencarian / Search Box disamping Menu Bar Blog" merupakan kelanjutan dari artikel yang pernah saya bagikan sebelumnya yaitu tentang "Cara Mengganti Navbar Jadi Tab Menu atau Membuat Tab Menu Diatas Header Blog" . Jadi untuk teman-teman blogger yang juga ingin ikut memodifikasi atau menambahkan fitur Search Box disamping Menu Bar boleh ikut menyimak artikel yang akan saya bagikan kali ini.

Tak lengkap rasanya jika blog super seo keren tapi tidak memiliki kotak pencarian / search box di menu bar. saya sendiri sudah merasakan, untuk itu saya akan berbagi solusi bagi teman-teman yang memiliki permasalahan seperti saya dengan menggunakan kode css. Berikut ini contoh gambar fitur Search Box yang akan kita tambahkan pada blog beserta langkah-langkah untuk memasangnya yang harus teman-teman ikuti :

Cara Membuat dan Menambah Kotak Pencarian / Search Box disamping Menu Bar Blog :

1. Login ke www.blogger.com menggunakan akun blog yang teman-teman miliki

2. Pilih Menu Template pada halaman blog yang telah terbuka

3. Klik Edit HTML

4. Letakkan kursor mouse pada kotak Edit HTML yang terbuka dan tekan tombol kombinasi keyboard CTRL+F untuk menampilkan kotak pencarian, lalu cari kode ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya

/*Search Box CSS3*/ #search{position:relative;float:right;margin:5px 10px 5px 10px}li.search{float:right;line-height:normal}#search input[type="text"]{float:left;background:#444;height:30px;line-height:30px;border:0 none;font-size:12px;font-weight:500;width:150px;padding:0 10px}#search input#search-button{height:30px;line-height:30px;background:#0054BB;border:1px solid #fff;float:right;padding:0 10px;cursor:pointer;color:#fff}#search input#search-button:hover{background:#333}#search input[type="text"]:focus{background-color:#fff;text-shadow:none!important;outline:none;color:#555}

5. Selanjutnya cari kode css menu bar yang ada pada blog teman-teman dan Copy kode html dibawah ini, lalu paste diatas kode </ul> tepat diakhir css menu bar

<li class='search'> <form action='/search' id='search' method='get'> <input name='q' placeholder='Pencarian...' size='50' type='text'/><input id='search-button' type='submit' value='Cari'/></form> </li>

6. Klik Simpan Template untuk menyimpan pengaturan dan kode css yang telah ditambahkan

* Keterangan :
1. Cara diatas adalah untuk menyimpan kotak pencarian dibagian menu bar.
2. Jika ingin menyimpannya selain di menu bar, silahkan simpan kode html dibagian Tata Letak dan mengganti kode li dengan kode div .

Bagaimana teman-teman blogger ? praktis bukan, "Cara Membuat dan Menambah Kotak Pencarian / Search Box disamping Menu Bar Blog", semoga artikel blogger yang telah dibagikan diatas dapat bermanfaat untuk teman-teman blogger semua dan dapat meningkatkan tampilan fitur blog teman-teman menjadi lebih SEO. Salam Blogger !

Tweet