Cara Memindahkan Menu Search di Template Blog ( Template Brosense)

Menu search atau menu pencarian cukup berperan penting dalam sebuah blog atau website. Selain berfungsi untuk memudahkan pengunjung dalam menemukan artikel yang sedang dicari pengunjung, menu search juga dapat menambah nilai tambah pada tampilan sebuah blog.

Pembahasan dalam artikel kali ini yaitu tentang bagaimana cara memindahkan kolom menu search ke bawah judul blog atau tepatnya di atas menu navigasi khususnya pada salah satu template karya mas sugeng yaitu template brosense.
Template Brosense adalah salah satu dari sekian banyakn template blog dari mas sugeng yang menggunakan menu search. Posisi menu search dalam template brosense ini berada di bilah kanan atas sejajar dengan letak menu navigasi.

Baik letak, Lebar dan tinggi menu search pada template brosense ini sudah didesain sedemikian rupa oleh pembuat template ini sehingga tampilannya juga sudah sangat responsive, seimbang dengan ukuran lebar dan tinggi template.

Namun menyangkut tata letak komponen tertentu dalam blog seperti menu search khususnya, kadangkala kita sebagai blogger ingin memodifikasi tampilan template agar tempilan blog berbeda dari template versi aslinya.

Banyak blogger melakukan hal demikian dengan memodifikasi template, salah satunya yaitu merubah atau memindahkan menu search dalam template blog ke bagian yang di inginkan. Tentunya hal ini juga harus didasari sedikit pemahaman tentang struktur CSS dan HTML dalam template blog yang bersangkutan.

Dalam memindahkan menu search template brosense ini terdapat beberapa perubahan struktur atau value CSS baik untuk tampilan desktop atau perangkat mobile agar tampilannya tetap optimal. Contoh hasilnya dapat sobat lihat pada di link berikut.

DEMO

Dan jika sobat ingin memindahkan menu search ke atas menu navigasi blog khususnya pada template brosense ini, ada beberapa penyesuaian letak Html yang perlu sobat lakukan seperti cara berikut.

Jangan lupa back Up template sobat terlebih dahulu biar lebih aman.
Silahkan sobat kembali pada dashboard blogger pilih menu Tema > Edit HTML >
Cari semua kode "#search" (tanpa tanda kutip) dalam template blog sobat, hapus semua kode tersebut dan ganti dengan css berikut ini.

#search-form {
background:#fff;
float:none;
margin:25px auto;
height:48px;
width:200px;
}
#search-form table {
width:100%;
margin:0 auto 15px;
}
#search-form td.search-box {
padding-right:30px;
}
#search-form input#search-box[type="text"] {
background:#fff;
border:1px solid #aaa;
height:33px;
line-height:33px;
margin:5px 0 5px 10px;
padding:0 12px;
width:99%;
color:#555;
}
#search-form input#search-button[type="submit"] {
background:#117ac9;
border:1px solid #fff;
color:#fff;
font-weight:bold;
height:36px;
line-height:36px;
margin:5px 10px 5px 0;
padding:0 12px;
outline:none;
}
#search-form input#search-button[type="submit"]:hover{
background:#117ac9;
cursor:pointer;
}
#search-form input#search-box[type="text"]:focus {
background:#fff;
outline:none;
}

@media only screen and (max-width:768px){
#search-form input#search-box[type="text"] {
margin:0 0;padding:0 0;
}
#search-form input#search-button[type="submit"] {
margin:0 0 0 0;box-shadow:3px #ccc;
}
#search-form table {
width:90%;
}
#search-form {
max-width:120px;
box-shadow:7px 7px #ccc;
margin:15px 10px !important;
padding:0;
background:#fff;
}
#search-form td.search-box {
padding:0 0px !important;
}
#search-form td.search-button {
padding:0 0px;
width:1%;
}}

4.Selanjutnya hapus semua HTML form search dalam template brosense sobat kodenya seperti di bawah ini.

5. Setelah HTML search form diatas dihapus, pasang HTML form search berikut ini di atas  atau tepatnya dibawah kode "</header>" (tanpa tanda kutip).

6. Simpan template sobat.

Demikian tips cara memindahkan menu search di atas navigasi blog. Semoga bisa membantu.

Cara Memindahkan Menu Search di Template Blog ( Template Brosense)

0 Komentar di "Cara Memindahkan Menu Search di Template Blog ( Template Brosense)"

Posting Komentar