Siapa bilang kotak pencarian pada halaman web atau halaman blogger itu hanya sebagai tool pembantu navigasi halaman blogger? Sobat pasti akan tertarik kalau saya katakan "tombol pencarian" itu ternyata bisa berfungsi sebagai hiasan, penghias sebuah halaman blogger sehingga terlihat semakin cantik dan menarik!
Bahkan bukan tidak mungkin akan menjadikan orang ingin mencobanya bukan?
Yang minat untuk menghiasi blog sobat dengan kotak pencarian unik dengan photo atau bingkai yang beda? Saya bisa membantu buatin. Akan tetapi jika sobat pingin tau cara membuatnya sih tidaklah terlalu sulit. Malah menurut saya mudah sekali, caranya ya cukup masuk ke pengaturan (dasbor) blogger:
Save Tema.
EFEKTIP MEMBUAT TAMPILAN BLOG MENJADI BEDA
Cara ini ternyata efektip membuat tampilan blog menjadi beda. Sobat bisa menghiasainya dengan bingkai pemandangan alam, kartun, photo profile dll. Pokoknya dengan kreativitas tanpa batas. Pada demo diatas kami menerapkannya untuk template bawaan blogger CONTEMPO
Kami telah menerima pesanan:
Hanya bercanda saja untuk pesanan ini, kami sudah terlalu sibuk dengan pekerjaan dan usaha kecil kecilan kami di dunia nyata 🤣🤣🤣
www.editblogtema.net
Bahkan bukan tidak mungkin akan menjadikan orang ingin mencobanya bukan?
Yang minat untuk menghiasi blog sobat dengan kotak pencarian unik dengan photo atau bingkai yang beda? Saya bisa membantu buatin. Akan tetapi jika sobat pingin tau cara membuatnya sih tidaklah terlalu sulit. Malah menurut saya mudah sekali, caranya ya cukup masuk ke pengaturan (dasbor) blogger:
- Tambahkan gagdet/widget
- Pilih widget HTML/JavaScript
- Setelah terbuka kotak kosong HTML/JavaScript cukup isikan dengan kode dibawah ini:
<center><style>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyHheIUb-dZHGVZA_v23yPTcUJBG4znsV9sG8J70AmEpcrrQrghYf-QjY3t_ufVwLi8CN0OEf8IZIDov2CZ8wbzwC_78V41EEjYpytxI4hO40bLE360j-MXffGAVKmMcuuD8DvVuRsYsfJ/s1600/Adobe_20190217_192211.png) no-repeat;
width: 230px;
height: 75px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
padding: 5px 0px 5px 20px;
margin: 10px 15px 0px 0px;
border-width: 0px;
font-family: "Brush Script MT", cursive;
font-size: 20px;
color: #6495ED;
width: 65%;
font-weight: bold;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqyaXhGk0tKjAZEipAyHy3yyVg3uhE-_3tTV4Ad8ksDvt37A6fRd_kKcOySwS605KbwEsRl_JlJD6tCtayoi5GX3XjZ-oKNnu5zzlKdJCX0W5rkgIONPVJJa9B9K5utoIPVP5AML0xKz-R/s1600/magnifier.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-top: 10px;
width: 19px;
height: 25px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvf0bO0ogFcUTdPENI0IMzPdZcVkhJ_SkCI-ragRKVNesHDj0HFYUtaN12cU8SgUKXed3he_LYbX2S0YqlRTpvHwxecMbZw4QQPIIOXMVVcDGGGmX7VgyR3jtK8fzJk6Hh8aNwKKR11oG-/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvf0bO0ogFcUTdPENI0IMzPdZcVkhJ_SkCI-ragRKVNesHDj0HFYUtaN12cU8SgUKXed3he_LYbX2S0YqlRTpvHwxecMbZw4QQPIIOXMVVcDGGGmX7VgyR3jtK8fzJk6Hh8aNwKKR11oG-/s1600/magnifier-hover.png) no-repeat;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input class="textarea" name="q" type="text" size="15" placeholder="Cari disini..." />
<input id="button-submit" type="submit" value="" />
</form></center>
Save Tema.
Untuk menempatkan kotak pencarian di posisi tengah header tambahkan pembuka <center> dan lalu ditutup dengan </center> Namun kunci desain tersebut hanyalah pada link background yang saya sorot warna kuning. Sobat perlu membuat sebuah gambar dengan ukuran tertentu menguploadnya ke halaman web. Link gambar sobat itulah yang akan menjadi pengganti link yang saya sorot warna kuning diatas.
Lihat DEMO
EFEKTIP MEMBUAT TAMPILAN BLOG MENJADI BEDA
Cara ini ternyata efektip membuat tampilan blog menjadi beda. Sobat bisa menghiasainya dengan bingkai pemandangan alam, kartun, photo profile dll. Pokoknya dengan kreativitas tanpa batas. Pada demo diatas kami menerapkannya untuk template bawaan blogger CONTEMPO
Kami telah menerima pesanan:
- Membuat LOGO
- Menghias header blog dengan elemen bersih dan ringan
- Menu navigasi ringan, mobile dan responsive
Hanya bercanda saja untuk pesanan ini, kami sudah terlalu sibuk dengan pekerjaan dan usaha kecil kecilan kami di dunia nyata 🤣🤣🤣
www.editblogtema.net