Hallo, ketemu lagi dengan saya di blog BibipBoy .
Pada kesempatan kali ini kita akan membahas tutorial mengenai
Cara Membuat Kotak Pencarian / Search di Blogger.
Apakah kalian sudah mengganti template atau tema Blogger kalian?
Banyak template Blogger yang tampilannya sudah keren, tetapi masih belum memiliki fitur penting seperti kotak pencarian (search box).
Padahal fitur pencarian sangat membantu pengunjung untuk menemukan artikel yang mereka cari dengan lebih cepat.
Nah, pada artikel kali ini saya akan menjelaskan cara membuat search box keren di Blogger dengan mudah 😄
Yuk langsung simak tutorialnya di bawah ini 👇
Langkah-Langkah Membuat Search Box Blogger
1
Pertama, silakan buka dashboard
Blogger
kalian terlebih dahulu.
Setelah itu masuk ke menu:
Setelah itu masuk ke menu:
Tata Letak / Layout
2
Pada halaman tata letak, klik:
Tambahkan Gadget → HTML/JavaScript
3
Setelah itu akan muncul kotak HTML/JavaScript.
Masukkan kode berikut ke dalam kolom HTML/JavaScript:
Masukkan kode berikut ke dalam kolom HTML/JavaScript:
<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form {
height: 40px;
border: 1px solid #999;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text {
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"] {
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color:#DC143C;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>
<div id='search-box'>
<form action='/search'
id='search-form'
method='get'
target='_top'>
<input id='search-text'
name='q'
placeholder='Cari Artikel Disini ...'
type='text'/>
<button id='search-button'
type='submit'>
<span>Search</span>
</button>
</form>
</div>
4
Setelah semua kode dimasukkan, klik tombol
Simpan.
Sekarang search box sudah berhasil ditambahkan ke Blogger kalian 🎉
Sekarang search box sudah berhasil ditambahkan ke Blogger kalian 🎉
Keterangan Kode
1
Kode warna berikut digunakan untuk mengganti warna tombol search:
background-color:#DC143C;
Kalian bisa mengganti warna tersebut sesuai keinginan menggunakan kode warna CSS lainnya.
2
Bagian berikut digunakan untuk mengganti tulisan pada kolom pencarian:
placeholder='Cari Artikel Disini ...'
Kalian bebas mengganti teks tersebut sesuai kebutuhan blog masing-masing.
Kelebihan Search Box Ini
1
Membantu pengunjung menemukan artikel lebih cepat.
2
Membuat tampilan blog terlihat lebih profesional.
3
Ringan dan mudah dipasang tanpa plugin tambahan.
Nah, itulah tutorial mengenai
Cara Membuat Kotak Pencarian di Blogger
.
Gimana? Mudah banget, kan? 😄
Dengan menambahkan search box, pengunjung blog kalian akan lebih mudah mencari artikel yang mereka butuhkan.
Semoga tutorial dari BibipBoy ini bisa berguna dan bermanfaat bagi kalian semua.
Selamat mencoba dan semoga berhasil 🚀
Gimana? Mudah banget, kan? 😄
Dengan menambahkan search box, pengunjung blog kalian akan lebih mudah mencari artikel yang mereka butuhkan.
Semoga tutorial dari BibipBoy ini bisa berguna dan bermanfaat bagi kalian semua.
Selamat mencoba dan semoga berhasil 🚀
.png)
No comments:
Post a Comment