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/AVvXsEhNXmBHXHQxxdQ6hVxV3-mdtx-pHLW6Z-baSxmwvKrfIgR5nNeoCZKJTrdAgGV9LlNkVpZ0UO9RoSrdW3_AMIpSzc3dKK9N8tePQqRulbSF9nrEFlwLr_Wt6VWe0iRNvogct_lnv-uiTfd1/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/AVvXsEi_K1yYcq00rQHhu-YvBmuunhYd-XCWfUX487IsOKp8gFvN7CHFjhUB3Mq6AzTM_3FLV918k2TSGl_sVCx_W_1YsXQRTRfu9iLmGuU-4aE5byYAI_DofT8mWnfb33yKLfcw8GwNP9apcFIn/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/AVvXsEjQMHDoqxAFG3PFft0glWRp7WBkYSl4fBqRKTV8Vw12jGHbnHpRWJlEVDJwlzpx0YqaK7p_kzka1iDJ3DAuPCYkhtNs9-PUcuW9lhDmmEr1cDyUVLrokmXwpON1LRd6rbky1c8kgTXYtSg7/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQMHDoqxAFG3PFft0glWRp7WBkYSl4fBqRKTV8Vw12jGHbnHpRWJlEVDJwlzpx0YqaK7p_kzka1iDJ3DAuPCYkhtNs9-PUcuW9lhDmmEr1cDyUVLrokmXwpON1LRd6rbky1c8kgTXYtSg7/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
Wah... Keren juga ya mas ternyata, bisa di modif gitu. Bloognya bisa jadi lebih keren....
BalasHapusIya hehe..dan mudah dibuat
HapusKeren, kreatif asli tukang terobos nih blog😂
BalasHapusSepertinya akan lebih menarik kalau dipasang di dalam blog. Inspiratif banget artikelnya.
BalasHapusJika ada waktu, silakan mampir ke blog kami: ANEKA CARA BLOG
Terima kasih.
Kreatif nih... ada aja idenya.
BalasHapusAwalnya cari cari tombol search, tapi bentuknya sama semua. Jadi saya coba buat sendiri. Sekarang sudah dapat 6 buah tombol pencarian unik tanpa perlu memberatkan loading...
HapusAda yang style CSS, ada yang image background dengan link. Ada yang hanya manipulasi tombol bawaan robah warna dan border dash. Pokoknya banyak trik 😂