Cara Membuat Widget Kotak Pencarian Keren di Blogger
GeegleHayoO - Membuat Widget Navigasi Kotak Pencarian
Ada aturan tak tertulis dalam dunia desain web yang mengatakan bahwa setiap website harus memiliki kotak pencarian. kamu dapat, dan ini memang sangat penting, Merancang kostum Gadget /widget pencarian untuk Blogger yang memberikan kontribusi dengan tema situs kamu sambil memberikan beberapa manfaat utama kepada para pengunjung kamu dan kamu sendiri.
Manfaat untuk Pengunjung,
kotak Cari ini tidak hanya membantu untuk meningkatkan kegunaan desain website / Blog kamu, tapi mereka sangat nyaman untuk tetap mengunjungi / jalan-jalan di situsmu. Bagi mereka yang telah ke situs kamu sebelum, mereka tahu apa yang mereka inginkan dan mereka ingin sekarang. Inilah orang-orang sabar yang tidak merasa seperti mengarungi berbagai link. Jika kamu tidak mengakomodasi masalah ini kamu mungkin berisiko kehilangan mereka (pembaca / pengunjung).
Untuk pelanggan baru yang ingin merasakan untuk situs kamu sebelum menginvestasikan waktu lagi, memberikan mereka kesempatan untuk mencari kepentingan mereka di kedua situs eCommerce dan situs blog.
Manfaat Untuk kamu
Menambahkan gadget pencarian kustom untuk Blogger mungkin manfa'at situs eCommerce terbaik karena ini merupakan industri yang inheren menawarkan banyak produk yang sangat spesifik. Misalnya, jika kamu menjual pakaian-pakaian dan seseorang hanya mencari kemeja, Pencarian hanya akan menghasilkan / memunculkan kemeja sehingga orang itu dapat melihat melalui semuanya dalam satu tempat saja.
Blogger mungkin tidak memiliki produk yang ditawarkan, tetapi menambahkan kostum gadget pencari untuk Blogger bisa membantu analisis situs dan SEO.
Google Analytics menawarkan alat yang akan melacak semua pencarian yang dilakukan oleh search bar kamu, sehingga kamu dapat menggunakan data ini ketika meningkatkan penggunaan dan konten kata kunci pilihan. web crawler, Google bot dan mesin pencari juga akan menguji frasa dalam kotak-kotak ini pada kesempatan langka untuk memastikan bahwa semua konten kamu mengarah ke suatu tempat yang menciptakan loop tertutup.
Makannya, Tambahkanlah Sendiri Gadget Custom Search kamu Untuk Blogger
Hanya karena kamu harus memiliki bar pencarian tidak berarti kamu dibatasi waktu untuk apa. Search bar di situs kamu harus mudah untuk menemukan dan tersedia setiap kali seseorang membutuhkannya, tapi selain itu tampilan desain terserah kamu. Jika kamu ingin menambahkan gadget pencarian kustom untuk Blogger.
Berikut ini adalah 6 pilihan gaya untuk kamu terapkan di Blogger sesuai selera
Hanya menyalin kode di bawah saja, kotak pencarian yang ingin kamu tambahkan dan ikuti langkah-langkah di bawah ini:
1
<style type="text/css">
#searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:250px}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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixD0kEshd95RpumapSMe6nmErPLE72nx7cO3XV8rbjnHP6ec9JG2vaPQKQFL0gmjdtgc-W6uV0meijPqcpmEI4ttV9r49j89nnROPPgHrYRpGKEODBZc8X2B3AOMwdAVE-oS0DIgu88flG/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}#button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}#button-submit:hover{background:#4f5356}#button-submit:active{background:#5b5d60;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" /></form>
2
<style type="text/css">
#searchbox{width:240px}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixD0kEshd95RpumapSMe6nmErPLE72nx7cO3XV8rbjnHP6ec9JG2vaPQKQFL0gmjdtgc-W6uV0meijPqcpmEI4ttV9r49j89nnROPPgHrYRpGKEODBZc8X2B3AOMwdAVE-oS0DIgu88flG/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s;}#searchbox input[type="text"]:focus{background:#f7f7f7;border:2px solid #f7f7f7;width:200px;padding-left:10px}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzXwFOu1yu_Bis6hDfg0k0b6GaxfK3IjQyYWTFphTsuiP25QsR177Bnz1CfXkkWQDUg_bWQX8RrBwdgvAMQrdl45xKtvl1pY7fM6YQg9VOnWKcVj4AQmmiltaQM8lsmI2xIeUl-RTtRFAh/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/></form>
3
<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgG3QXRbi1IWYexObwpOo7tDU-SBflxbY7-Oxq6RhIXZ9ah3PGu_FPh-LBd9orVOIDLB6IVOVQ35WkktOBLvHNljPv5OL9SocH8uTTQ6SRWexegZqTuc2UbS2S2fNZM2CAN7Ga0JqiuoSl/s1600/searchbar.png) no-repeat;width:208px;height:29px}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;margin:3px 0 0 20px;padding:5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMm7GVrSk4my4P0BkhwZhhlaBUraXdKCFOlH9vwyaebmEkoFFEL6NMjFc3oE5jSHO4qZcNaUJJJm-fjXbvxD2RB5F_2UXnuAzgNDRC5N1BpyLj0kcRn0B6MZYe5qWp6TsMR11tUqiW6O5g/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM8gU9sg34FCOzaCxjJPqb7Scic7BGw8-ueS5FE_wN6jQ6qC8kL-0L5jHa7WaPvBgDAYLVvdetGueqEKMYClZqvuP16kOBNQx3AhCl8mEj66Il0zeiu0U32jcY-9KOoNUSj156seqJbpKE/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM8gU9sg34FCOzaCxjJPqb7Scic7BGw8-ueS5FE_wN6jQ6qC8kL-0L5jHa7WaPvBgDAYLVvdetGueqEKMYClZqvuP16kOBNQx3AhCl8mEj66Il0zeiu0U32jcY-9KOoNUSj156seqJbpKE/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 name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>
4
<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv2HDgdnEpWZNbEw2qWcZBrOHF8t81ZnnMA3wst_aG7ehPPBMKBoIsNUUZaqcPwv8GTC1HE2nWTpvRxUqTWwu0IYcnOVeP_Im6JX7N7rklMV-6oBAJ7gP4_fMkhcMFLkQIfYAimNW9O8O8/s1600/search-box.png) no-repeat;height:27px;width:202px}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;margin:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px "Arial Narrow",Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5FLucGnzjG16DbGEvEnZdtBpHmirc46PbP00mnA3DL53LWQdsIJhlQt4PRq8DfIFRvImghyphenhyphenBdrS-Cl8gL-w_jBlLMJPSAuK_GKDR6-MRsTrhAalZccmGdFNFbjBufwaPMvivCvucdhce/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc1TSB96rkvcf6UQEpHyWRk_6YdjHUdktRSB9ed3yt64u6qmG5g7Je_XJJ_ccC5GXQPfjm5fVvK7BFKXiJ5gvERw8JWf-p9-fmxv5X3R9QuXaCDh6fVp1kukG_mpL9eNPkGJE08-6K5uPY/s1600/search-button-hover.png) no-repeat}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>
5
<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggDV9VZjGSBZjWnkYLkQkwmr66teyOQ5ykV_YQltEVjuBjRkE4hKTWIb2S05RDqPr1oUSESCNQB__6OGb_SiJgfa5k0bDDZY1gZe_IU08RNWjg4guV1wMCe4TdBYcSdK9vB84lS7q3I6Re/s1600/search-box1.png) no-repeat;width:250px;height:65px}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:2px 0 2px 20px;margin:10px 15px 0 0;border-width:0;font:bold 16px "Brush Script MT",cursive;color:#595959;width:65%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxOZeNEIo-CZe7VHxw9IEiweSwYbYBvqI5M7poeyc6sUFexBLoQLub8spOWWADFcYg0PAYefLc9IYwB1bY6hVuSLImgZyDJSOfGCtcYlurpWTzruT9vO-QooijLERTEKcvg-xhqIjCCLHL/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-top:10px;width:19px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXdgt_ei2VAuUn5dbK8M8WQTshmuAjGkoLUt9YkumOKy4WFGCbbwfZfyrvvkULJp8nrDnco89fksGhgXHVYRKGISCJHaiv7Bbe8SUvkKr0OW29x6AVRmTWYK3ocoQ2552-w_2QkkTjo0cd/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXdgt_ei2VAuUn5dbK8M8WQTshmuAjGkoLUt9YkumOKy4WFGCbbwfZfyrvvkULJp8nrDnco89fksGhgXHVYRKGISCJHaiv7Bbe8SUvkKr0OW29x6AVRmTWYK3ocoQ2552-w_2QkkTjo0cd/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="Search here..." /><input id="button-submit" type="submit" value="" /></form>
6
<style type="text/css">
#searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhblm8z02eBruplZH4JUqdUZD3dkPJxg7ysjcxWBK8CzAQq36E2aK6cDt6Op3KoHhJlPcWbFFZRh6KQ-rb6kDSrgvf33SPqas48xsOpQg_gjPg-LKSnZD-LctvqpQ2UEwuvKAoAYH5Coc3s/s1600/search-box.png) no-repeat}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:transparent;border:0;font:14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}#searchbox input[type="text"]:focus{color:#fff}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2aIGxhxbp_I-nQsp__eS8IZzA9GqvSxMqEcKYCcxkSYeQNnHK3Oh9JYSkYhDwuUuVtDyZ33pfyjLOGxDtY52M7a9Xoz51DQVWXMYHOCpYPB_vxSAGoNOp9fV1D3SuJIPn1odeHuTa7pFI/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px;cursor:pointer}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP73AR6P4iO7fjVnlcFcsUx539yuwQVq-zVlqkvpC-6xlmZbSNhawSYNQBUUkkmirBrWfCzqr4IIoI4YMTUcVuRbJWzKcJz3V5bunzavm05CEcl6cF17pVCY1ZOu60jun2FbypZvPTBm9E/s1600/search-icon-hover.png)}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." /><input id="button-submit" type="submit" value=" "/></form>
1. Masuk ke akun Blogger kamu, kemudian pilih Tata letak > klik Tambahkan Gadget 'link di sisi kiri.
2. Pilih "HTML / JavaScript" lalu dari jendela pop-up / di kolom yang disediakan > pastekan kode yang sudah kamu pilih salah satunya diatas ke kotak kosong.
3. Tekan Save
4. Tuliskan komen diartikel ini untuk mengucapkan Terima Kasih hehey
(6
___; )
((
Itu dia kawan!
Kini kamu sudah memilikinya, 6 pilihan gaya yang akan membiarkan kamu mengambil keuntungan dari semua manfaat besar dari menggunakan kotak pencarian ini, Sementara masih membantu kamu membuat blog kamu menonjol. Setelah menambahkan bar pencarian baru kamu, pengunjung kamu akan dapat menavigasi melalui situs kamu dan mendapatkan ke tempat yang sama menggunakan kedua kotak dan bar navigasi.
Selamat Mencoba yaa!
Ada aturan tak tertulis dalam dunia desain web yang mengatakan bahwa setiap website harus memiliki kotak pencarian. kamu dapat, dan ini memang sangat penting, Merancang kostum Gadget /widget pencarian untuk Blogger yang memberikan kontribusi dengan tema situs kamu sambil memberikan beberapa manfaat utama kepada para pengunjung kamu dan kamu sendiri.
Manfaat untuk Pengunjung,
kotak Cari ini tidak hanya membantu untuk meningkatkan kegunaan desain website / Blog kamu, tapi mereka sangat nyaman untuk tetap mengunjungi / jalan-jalan di situsmu. Bagi mereka yang telah ke situs kamu sebelum, mereka tahu apa yang mereka inginkan dan mereka ingin sekarang. Inilah orang-orang sabar yang tidak merasa seperti mengarungi berbagai link. Jika kamu tidak mengakomodasi masalah ini kamu mungkin berisiko kehilangan mereka (pembaca / pengunjung).
Untuk pelanggan baru yang ingin merasakan untuk situs kamu sebelum menginvestasikan waktu lagi, memberikan mereka kesempatan untuk mencari kepentingan mereka di kedua situs eCommerce dan situs blog.
Manfaat Untuk kamu
Menambahkan gadget pencarian kustom untuk Blogger mungkin manfa'at situs eCommerce terbaik karena ini merupakan industri yang inheren menawarkan banyak produk yang sangat spesifik. Misalnya, jika kamu menjual pakaian-pakaian dan seseorang hanya mencari kemeja, Pencarian hanya akan menghasilkan / memunculkan kemeja sehingga orang itu dapat melihat melalui semuanya dalam satu tempat saja.
Blogger mungkin tidak memiliki produk yang ditawarkan, tetapi menambahkan kostum gadget pencari untuk Blogger bisa membantu analisis situs dan SEO.
Google Analytics menawarkan alat yang akan melacak semua pencarian yang dilakukan oleh search bar kamu, sehingga kamu dapat menggunakan data ini ketika meningkatkan penggunaan dan konten kata kunci pilihan. web crawler, Google bot dan mesin pencari juga akan menguji frasa dalam kotak-kotak ini pada kesempatan langka untuk memastikan bahwa semua konten kamu mengarah ke suatu tempat yang menciptakan loop tertutup.
Makannya, Tambahkanlah Sendiri Gadget Custom Search kamu Untuk Blogger
Hanya karena kamu harus memiliki bar pencarian tidak berarti kamu dibatasi waktu untuk apa. Search bar di situs kamu harus mudah untuk menemukan dan tersedia setiap kali seseorang membutuhkannya, tapi selain itu tampilan desain terserah kamu. Jika kamu ingin menambahkan gadget pencarian kustom untuk Blogger.
Berikut ini adalah 6 pilihan gaya untuk kamu terapkan di Blogger sesuai selera
Hanya menyalin kode di bawah saja, kotak pencarian yang ingin kamu tambahkan dan ikuti langkah-langkah di bawah ini:
1
<style type="text/css">
#searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:250px}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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixD0kEshd95RpumapSMe6nmErPLE72nx7cO3XV8rbjnHP6ec9JG2vaPQKQFL0gmjdtgc-W6uV0meijPqcpmEI4ttV9r49j89nnROPPgHrYRpGKEODBZc8X2B3AOMwdAVE-oS0DIgu88flG/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}#button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}#button-submit:hover{background:#4f5356}#button-submit:active{background:#5b5d60;outline:none}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" /></form>
2
<style type="text/css">
#searchbox{width:240px}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixD0kEshd95RpumapSMe6nmErPLE72nx7cO3XV8rbjnHP6ec9JG2vaPQKQFL0gmjdtgc-W6uV0meijPqcpmEI4ttV9r49j89nnROPPgHrYRpGKEODBZc8X2B3AOMwdAVE-oS0DIgu88flG/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s;}#searchbox input[type="text"]:focus{background:#f7f7f7;border:2px solid #f7f7f7;width:200px;padding-left:10px}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzXwFOu1yu_Bis6hDfg0k0b6GaxfK3IjQyYWTFphTsuiP25QsR177Bnz1CfXkkWQDUg_bWQX8RrBwdgvAMQrdl45xKtvl1pY7fM6YQg9VOnWKcVj4AQmmiltaQM8lsmI2xIeUl-RTtRFAh/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/></form>
3
<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgG3QXRbi1IWYexObwpOo7tDU-SBflxbY7-Oxq6RhIXZ9ah3PGu_FPh-LBd9orVOIDLB6IVOVQ35WkktOBLvHNljPv5OL9SocH8uTTQ6SRWexegZqTuc2UbS2S2fNZM2CAN7Ga0JqiuoSl/s1600/searchbar.png) no-repeat;width:208px;height:29px}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;margin:3px 0 0 20px;padding:5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMm7GVrSk4my4P0BkhwZhhlaBUraXdKCFOlH9vwyaebmEkoFFEL6NMjFc3oE5jSHO4qZcNaUJJJm-fjXbvxD2RB5F_2UXnuAzgNDRC5N1BpyLj0kcRn0B6MZYe5qWp6TsMR11tUqiW6O5g/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM8gU9sg34FCOzaCxjJPqb7Scic7BGw8-ueS5FE_wN6jQ6qC8kL-0L5jHa7WaPvBgDAYLVvdetGueqEKMYClZqvuP16kOBNQx3AhCl8mEj66Il0zeiu0U32jcY-9KOoNUSj156seqJbpKE/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM8gU9sg34FCOzaCxjJPqb7Scic7BGw8-ueS5FE_wN6jQ6qC8kL-0L5jHa7WaPvBgDAYLVvdetGueqEKMYClZqvuP16kOBNQx3AhCl8mEj66Il0zeiu0U32jcY-9KOoNUSj156seqJbpKE/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 name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>
4
<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv2HDgdnEpWZNbEw2qWcZBrOHF8t81ZnnMA3wst_aG7ehPPBMKBoIsNUUZaqcPwv8GTC1HE2nWTpvRxUqTWwu0IYcnOVeP_Im6JX7N7rklMV-6oBAJ7gP4_fMkhcMFLkQIfYAimNW9O8O8/s1600/search-box.png) no-repeat;height:27px;width:202px}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;margin:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px "Arial Narrow",Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiI5FLucGnzjG16DbGEvEnZdtBpHmirc46PbP00mnA3DL53LWQdsIJhlQt4PRq8DfIFRvImghyphenhyphenBdrS-Cl8gL-w_jBlLMJPSAuK_GKDR6-MRsTrhAalZccmGdFNFbjBufwaPMvivCvucdhce/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc1TSB96rkvcf6UQEpHyWRk_6YdjHUdktRSB9ed3yt64u6qmG5g7Je_XJJ_ccC5GXQPfjm5fVvK7BFKXiJ5gvERw8JWf-p9-fmxv5X3R9QuXaCDh6fVp1kukG_mpL9eNPkGJE08-6K5uPY/s1600/search-button-hover.png) no-repeat}#button-submit::-moz-focus-inner{border:0}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>
5
<style type="text/css">
#searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggDV9VZjGSBZjWnkYLkQkwmr66teyOQ5ykV_YQltEVjuBjRkE4hKTWIb2S05RDqPr1oUSESCNQB__6OGb_SiJgfa5k0bDDZY1gZe_IU08RNWjg4guV1wMCe4TdBYcSdK9vB84lS7q3I6Re/s1600/search-box1.png) no-repeat;width:250px;height:65px}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:2px 0 2px 20px;margin:10px 15px 0 0;border-width:0;font:bold 16px "Brush Script MT",cursive;color:#595959;width:65%;display:inline-table;vertical-align:top}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxOZeNEIo-CZe7VHxw9IEiweSwYbYBvqI5M7poeyc6sUFexBLoQLub8spOWWADFcYg0PAYefLc9IYwB1bY6hVuSLImgZyDJSOfGCtcYlurpWTzruT9vO-QooijLERTEKcvg-xhqIjCCLHL/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-top:10px;width:19px;height:25px}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXdgt_ei2VAuUn5dbK8M8WQTshmuAjGkoLUt9YkumOKy4WFGCbbwfZfyrvvkULJp8nrDnco89fksGhgXHVYRKGISCJHaiv7Bbe8SUvkKr0OW29x6AVRmTWYK3ocoQ2552-w_2QkkTjo0cd/s1600/magnifier-hover.png) no-repeat}#button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXdgt_ei2VAuUn5dbK8M8WQTshmuAjGkoLUt9YkumOKy4WFGCbbwfZfyrvvkULJp8nrDnco89fksGhgXHVYRKGISCJHaiv7Bbe8SUvkKr0OW29x6AVRmTWYK3ocoQ2552-w_2QkkTjo0cd/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="Search here..." /><input id="button-submit" type="submit" value="" /></form>
6
<style type="text/css">
#searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhblm8z02eBruplZH4JUqdUZD3dkPJxg7ysjcxWBK8CzAQq36E2aK6cDt6Op3KoHhJlPcWbFFZRh6KQ-rb6kDSrgvf33SPqas48xsOpQg_gjPg-LKSnZD-LctvqpQ2UEwuvKAoAYH5Coc3s/s1600/search-box.png) no-repeat}#searchbox input{outline:none}input:focus::-webkit-input-placeholder{color:transparent}input:focus:-moz-placeholder{color:transparent}input:focus::-moz-placeholder{color:transparent}#searchbox input[type="text"]{background:transparent;border:0;font:14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}#searchbox input[type="text"]:focus{color:#fff}#button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2aIGxhxbp_I-nQsp__eS8IZzA9GqvSxMqEcKYCcxkSYeQNnHK3Oh9JYSkYhDwuUuVtDyZ33pfyjLOGxDtY52M7a9Xoz51DQVWXMYHOCpYPB_vxSAGoNOp9fV1D3SuJIPn1odeHuTa7pFI/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px;cursor:pointer}#button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP73AR6P4iO7fjVnlcFcsUx539yuwQVq-zVlqkvpC-6xlmZbSNhawSYNQBUUkkmirBrWfCzqr4IIoI4YMTUcVuRbJWzKcJz3V5bunzavm05CEcl6cF17pVCY1ZOu60jun2FbypZvPTBm9E/s1600/search-icon-hover.png)}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." /><input id="button-submit" type="submit" value=" "/></form>
Lalu Bagaimanakah Cara Menambahkannya ke Blogger?
1. Masuk ke akun Blogger kamu, kemudian pilih Tata letak > klik Tambahkan Gadget 'link di sisi kiri.
2. Pilih "HTML / JavaScript" lalu dari jendela pop-up / di kolom yang disediakan > pastekan kode yang sudah kamu pilih salah satunya diatas ke kotak kosong.
3. Tekan Save
4. Tuliskan komen diartikel ini untuk mengucapkan Terima Kasih hehey
(6
___; )
((
Itu dia kawan!
Kini kamu sudah memilikinya, 6 pilihan gaya yang akan membiarkan kamu mengambil keuntungan dari semua manfaat besar dari menggunakan kotak pencarian ini, Sementara masih membantu kamu membuat blog kamu menonjol. Setelah menambahkan bar pencarian baru kamu, pengunjung kamu akan dapat menavigasi melalui situs kamu dan mendapatkan ke tempat yang sama menggunakan kedua kotak dan bar navigasi.
Selamat Mencoba yaa!
