Blog + Search + Icon Bendera

Cara Membuat Kotak Search ( Pencarian ) Di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم


 Menampilkan kotak search bawaan BLOG :
1. Login ke akun Blogger.
2. Klik Tata Letak
3. Kemudian Pilih Add a Gadget.
4. Lalu Pilih "Kotak Penelusuran"
5. Nah disitu ada beberapa pilihan, silahkan pilih sesuaikan dengan keinginan.
6. Simpan [ Finish ] -> Search Box / Kotak Pencarian akan segara tampil di blog.


Menambahkan kotak search dengan JavaScript :
1. Login ke akun Blogger.
2. Klik Tata Letak
4. Kemudian Pilih Add a Gadget.
5. Lalu Klik HTML/Javascript.
6. Dan Pastekan Kode dibawah ini :


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

Keterangan :
Ganti http://blogklopedia.blogspot.com/ dengan nama blog Kalian.
Angka 40 = menunjukkan panjang kotak (search box) yang akan tampil di blog anda, semakin banyak angkanya maka semakin panjang box-nya, maka silahkan kalian ganti sesuai selera kalian.
Lalu Save dan lihat hasilnya.


Kode.2
<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMtNXw3viDiqPIB8BuAumDeYYty4LPGtas8v_jv-y-76YmaK3zFS-4DLfRgbU9Lmtz5yLyeCibMiyXkIUEhUG1c1ewdR79nUP9bUVqXSWHlzlETkpDkSOoJ38ZZ3wtCt8w9H57W-slucUe/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>

Keteranagan : Tulisan yang berwarna Merah,bisa kamu ganti dengan kalimat yang kamu sukai.Contohnya :
"Cari artikel menarik lainnya disini".

Maka hasilnya akan seperti ini :






Kode.3
 <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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbIVSv-k60wCNi0Y-uLw2vuaYmmey3cjzF-n9ZUh8-0y_kIFlTJbEMQDdSs0IPvvBkrPhJHQoS0kfoqjvIGQ-eWyoNBycHNtP1nPPoAmwZvVGoE3tm0dEzFBV6xOdBfPlGg3s6fuQp_Hw/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>
NB : Ganti warna merah sesuai dengan selera  tulisan anda. Dan itu akan muncul di tengah kotak pencariannya. Dan warna biru itu ukuran kotak pencariannya, silahkan kalian rubah sesuai dengan kebutuhan!                                                       

                                                           Maka hasilnya akan seperti ini :
Kode.4
<style type="text/css">#mediablogger-searchbox {    border-radius: 5px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEwnELFtONZReuBleieRhyifEyNmkPtJLsVmyOcmB7ctUONKWECFGkkeKvhyphenhyphenbB4KBJoihDTPlwkX7MPke-bAhGBbNxAzmwNyqVlzc9q226yneo4smF36ZoP4WdY3435qZxLvcSgBala_HE/s1600/impoint.blogspot.com-red.png) no-repeat scroll center center transparent;    width: 307px;    height: 50px;    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: 198px;    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...";}' /></form></div>


                                                          Maka hasilnya akan seperti ini :

Keterangan :
Untuk tulisan yang berwarna Merah adalah URL gambar kotak search.Anda juga bisa mengubah warna kotak pencarian dengan warna kesukaan anda.Dan beikut saya tampilkan beberapa warna yang bisa anda sesuaikan dengan blog anda. 

Warna Hijau :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvne0VY4TEXBgE2e92fLtUUkfBbupemRLjDFhpbFWqnx5CjvSunxrRtU-9LzRE560deMBHshjt0F6tbo9r2mAAN6vb0zYoEwWVoGAZVl-MCEy1BOU0HR3zOLU1VhM2Rst7UkO12ZC61MBO/s1600/impoint.blogspot.com-green.png
*******************************************************************************
Warna Merah :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEwnELFtONZReuBleieRhyifEyNmkPtJLsVmyOcmB7ctUONKWECFGkkeKvhyphenhyphenbB4KBJoihDTPlwkX7MPke-bAhGBbNxAzmwNyqVlzc9q226yneo4smF36ZoP4WdY3435qZxLvcSgBala_HE/s1600/impoint.blogspot.com-red.png
*******************************************************************************

Warna Biru :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW2QduqOTEPG4wt5nYLzqWfrUOpzYmMfpItUiPzmQOl8abEUeyQf7r1m6F-_Ek-36AH747uLe8NtNSiIg9ATGalBjIkidmQ95UPS-hUl8PWErkJlmS77E5xi9CStSliYRnKobWxUTBvtfF/s1600/impoint.blogspot.com-blue.png
*******************************************************************************
Warna Orange :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjus2AxIEslreD9xqIc_TNHQFwr_EfvvYmPM3Z2QnnGLwYLzsA3vcP_HOq3FeAq4pU22jhx2YjCdhCMN-L4Ht3-kKHFXwqawg0XOuekq9mHsb6CIPUqwVysw-FklfkLu-k2KsDhWEZVPPR6/s1600/impoint.blogspot.com-orange.png 

Kode.5
<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm9lGaSOrf6vYaZ_g4_zghdOYIyYxU264lsgGT3MPN4H0FeKNEDHEAzTC-QTrEpIaSKlq3Qa_JYFgOaZlLj00cyK3a2JRnQS-_BfBN72fk0qRc2848mpRpK_ZnMhbHk90yb-pEQgfHflHq/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;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>
<center>
<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></center>


                                                          Maka hasilnya akan seperti ini :

Keterangan :

Tulisan yang berwarna Merah,adalah URL gambar kotak search.Anda juga dapat merubah URL tampilan kotak pencarian dengan url gambar di bawah ini :

Url.1
http://3.bp.blogspot.com/-jukSBGryNx4/UPgqKoLKi2I/AAAAAAAAC38/V7A3wruYzgo/s1600/lostsector-search-box-darkgrey.png

Url.2

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsIYVrPmf1gvjslqQIDKkPsKnIIqWeNloAVIHpAplHuBTzIsh5mUhnCFiaAxQaTfX_d-_CRaZYEVuPR9Fbfu37MLYojKH21oiC3dhYjJUvujcSX6FvfV7VbKKKXraj61iaW7ExeXTP-oEt/s1600/lostsector-search-box-gray.png

Url.3

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXRdW-6knutJBksBgdJFSpRKLsZHzkk7P4ORl_n4nNAZ88mGVPxjwihpfdKWrRyE_HOHtlN8_AOQLiQ1tpr1tEpokw9Wn_EDUHgvPK15fM5D29sLhcnNOKBWpVp_N5T7RIaCQWPa_xOC_/s1600/lostsector-search-box-black.png

Url.4
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH7CLx0vP2WkdiP_iCv4R7lIdxoOyQODJBSyN66XQbYD9yS_npqTlLLM3fVfWk4db2isuz5bLoDYZ1bSPJsYb207hjwNOU-HKRwIuUDSvJctPE0MZeRAtPar9FBmXot-E-FH9wRZCTnVfW/s1600/lostsector-search-box-red.png

Url.5

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKy_Ld2GrBdgoWd1k2i9JZa_CnCqjmyqIe4UwAB1lv9sNv-_Jr6jgZXRCJ06dhkdh8LD4KelHi-EprFUoMDpL1i-MEdnV_OYbPuVAbz0687Q_epjQudSBx6BPj4RrwqYXHOMwLpHZM0irh/s1600/lostsector-search-box-yellow.png

Berikut adalah contoh kotak pencarian keren di blog.
Untuk lebih jelasnya,sobat dapat mengunjungi Mazinubersahabat. Di :
http://mazinubersahabat.blogspot.com/2013/05/6-cara-membuat-kotak-pencarian-paling.html

Disini
Share On Facebook




Terjemahkan Halaman Ini







Comments
0 Comments

Tidak ada komentar:

KETERANGAN GAMBAR

Langganan: Posting Komentar (Atom)




Copyright ©2013 Blogklopedia Desain By Ardhyan ID
█║▌│█│║▌║││█║▌│║█║▌ © Official Profile Facebook 2013