Membuat Kotak Pencarian Keren Pada Blog Admin : Unknown

Assalamu'alaikum,wr.wb

Cara Membuat Kotak pencarian / Search Box diblogger - Kotak pencarian memang penting,Sangat berfungsi  memudahkan pengunjung untuk menemukan posting blog yang dimaksudkan. Nah disini saya mau menerapkan cara membuatnya,selain otomatis dari bawaan blogger kita juga bisa memasangnya sendiri dengan fariasi yang berbeda tentunya. Memang setiap template yang kita pakai kebanyakan sudah tersedia,tapi kadangkala kita kurang menyukai tampilannya,malah ada juga yang tidak ada. Nah berikut ini catatansaif kasih solusi dan semoga sobat suka..

Ada banyak model dan perintah kode script,diantaranya saya pilih 4 dibawah ini, silahkan disimak :

Langkah-langkah pemasangan.

• Pertama login ke blogger
• Kemudian pilih menu Tata Letak
• Pilih Tambahkan Gadget
• Setelah itu masukkan kode perintah CSS di bawah ini ( ada 4 pilihan silahkan dipilih salah 1 )
• Langkah terakhir simpan dan lihat hasilnya.

Untuk kode perintah dan modelnya silahkan pakai yang mana boleh,dibawah ini adalah kode perintah dan gambar tampilannya masing masing. silahkan pilih salah satu diantara kode tersebut :

Kode perintah 1

<style type="text/css">#mediablogger-searchbox { border-radius: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8nC7BHd9hXyIykALdaR6T68q-xIUtp2mkerA_2F1MzNZfz2Bfm_hTdTw1ceKSAYuy8NLOs1zMXC4Re3sKVTWlZ08sLY65UZAjx6jG9SDgqacB1ZO7wc3Aje42GpRml-Xa6FrRbGWooIC5/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent;width: 300px; height: 80px; disaply: block;} form#mediablogger-searchform { display: block; padding: 9px 16px; margin: 0;} form#mediablogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 150px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent;} form#mediablogger-searchform#sbutton { margin: 0; padding: 0; height: 40px; width: 74px; vertical-align: top; border: none; background: transparent;}</style><div id="mediablogger-searchbox"> <form id="mediablogger-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}' /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form></div>

Catatan :
warna Pink  ganti dengan Url gambar yang diinginkan.
warna Kuning Width : lebar gambar | Hight : tinggi gambar
warna hijau Width : lebar kotak tulisan.
Untuk gambar yang berbeda width dan hight nya bisa diatur sendiri.

Untuk modelnya sudah saya persiapkan Url gambarnya,sobat tinggal pilih yang disuka/bisa cari yang lainnya.

Url Gambar Model Search Box

- Style Red ( Merah )

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuybe0KN9qW-XTwzX9eFkBvfkIUlepNqHBfTk1e6o287gtjEPuHLvazlp9InVUoNQcUSe7oeDUVgiU8b1sr0TvhfIJYhFAeXQMnFSm1obh8zhDfTH0qljUv7fEm47SoU0r8vw9YNZLnJAD/s1600/impoint.blogspot.com-red.png

- Style Blue ( Biru )

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYthhsfl7uuj_ElxMpxMnL3t375HGuwDMnXBfdhtCVaWiHqLZdRggrhtnBwCzZaXpcALMDCtg6Vr8EfAl8owJnIIAM8zReDrGwOeLuPX2Do_PMY7ndeYc79MMPlULIjxfxQOyFHZdeYdI6/s1600/impoint.blogspot.com-blue.png

-Style Orange

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidZTL_JLO5hyo_5BgzpRcJQgLqfw63V7ikllVdebO08tJQ_qabACvf4QFhbdsQyaltOPHsD7bPqmUr-NMcMzO-2DPrKDIOftz54QLUpwoU6lzEMGHJ7nBHbRVeiZhKIlvu3qKWleWcSTmd/s1600/impoint.blogspot.com-orange.png

 

-Style Black ( Hitam )

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibR3nzdn5TzVqm58uapLxVZiG3SndlLxHKJeiDxlV2K2wtCJYd2YOPLG180BNbP_LRZHQZE8KJIgMCpzG1Ywb80UPHFk2m3DoHx83lv07KdhN-nm0eX2gsg7rToqGyjsVc13E98JE22g/s1600/Black-Search-Engine.png

- Style Red ( Merah )

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNsEvrs2Dq-rP7y-sojfMB3HZlSoS_qbO7WRElIHuYIypjpPf_pvMP6DDWYC5LtX5V7y1FgGNBYCU2nqmBFlzkkz_NXwuZtBZVsZvYvsQtw_j6lFMjK6_P54T97S8YYxn_W19g5NwZZg/s1600/Red-Search-Engine.png

- Style Blue ( Biru )

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-fnpYs8TCF1bW3Ggmf4nFMNvezcw_i21mq0SUTfnaoF2MtxKWonvQHgfkha8_4Kl9bpmu-fSTr7Q_szBo0IkRXh_Gs6VsjEH3exDbzbX0YqEM94DaxCvA2WJ95nEPrfGz-yEfXE6syg/s1600/Blue-Search-Engine.png

- Style Green ( Hijau )

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZKCb-RPmWA36JHcA7ZjLK2oXSl3_rBUfcRfQzN6vNT8aycMybDXvEzFkMgCWYus8L65A_F9kiwTh3kET9ZN9n-Yf-QKbQoPMqwM8Io6p9apcA5mTX3k2yWBIOAHIwGDTwaSj7bE9Kg/s1600/Green-Search-Engine.png

Sementara cukup itu dulu modelnya,masih banyak sebenarnya,cuman untuk nyingkat waktu saya silahkan sobat cari sendiri di google dan kita ambil Url gambarnya.

Kode Perintah 2

<form action="/search" style="display:inline;" method="get">

<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/></form><style>

#s { margin: 0 auto;  -webkit-appearance: none;  -moz-appearance: none; padding: 12px 48px 12px 12px; -webkit-border-radius: 200px;-moz-border-radius: 200px; border-radius: 200px;

 width: 200px;height: 16px;color: #3a4449;border: none;outline: none;-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);position: relative;z-index: 2; background: #fff url(http://2.bp.blogspot.com/RdCoLqn34t4/UDeUFSTJ17I/AAAAAAAAKqg/GxdClZ5RjXg/s1600/Search.png) center right no-repeat;} #s::-webkit-input-placeholder, #s:-moz-placeholder {color: #607078;}</style>

Catatan :
warna kuning untuk menyesuaikan lebar dan tingginya.
warna orange silahkan ganti dengan tulisan yang diinginkan.
untuk model yang satu ini memang tampilannya seperti itu.

Kode Perintah 3

<span style='float:right;'>

<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC6F4wB-Z9ud01IL60eYDHQAW0ej1BSXCxKz0nCQrYX3Wt4NORQ2l5XKngXctIThyRjsW7lEkwsplLJngK-FWTMzIBeM3NqKRAZEmdU274oJCWM6iWdB8vZmbAKoJ_TgW2Sl5r6s4CP2j6/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get">    <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div></span>

Catatan :
warna orange silahkan ganti dengan tulisan yang diinginkan.
untuk model yang satu ini memang tampilannya seperti itu.

Kode Perintah 4

<form action="http://catatansaif.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Catatan :
warna biru silahkan ganti dengan Url blog sobat.
warna hijau adalah panjang / lebar kotak
untuk model yang satu ini memang tampilannya seperti itu.

Demikianlah yang dapat saya sampaikan,selebihnya silahkan bertanya jika ada yang kurang dimengerti..