Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog

Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog - Hallo sahabat Belajar Internet Gratis, Pada Artikel yang anda baca kali ini dengan judul Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog , kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog
link : Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog

Baca juga


Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog

Berikut kami akan jelaskan bagaimana memasang search engine di Blospot:

Kotak Pencarian 1
Caranya :
1. Login ke akun Blogger
2. Klik Menu Layout
3. Klik Tab Page Element
4. Klik Pada Add a Gadget
5. Lalu Pilih "Kotak Penelusuran"
6. Nah disitu ada beberapa pilihan, silahkan pilih sesuaikan dengan keinginan.
7. Simpan [ Finish ] -> Search Box / Kotak Pencarian akan segara tampil di blog.

Kotak Pencarian 2
Caranya :
1. Login ke akun Blogger
2. Klik Menu Layout
3. Klik Tab Page Element
4. Klik Pada Add a Gadget
5. Lalu Klik HTML/Javascript
6. Dan Pastekan Kode dibawah ini :

<form action="http://mazinubersahabat.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://mazinubersahabat.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.

7. Lalu Save dan Lihat hasilnya!

Kotak Pencarian 3
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMfjhoOjLthPc00kA946X12Z9M756LIBCEmqdk0O3Ki2KK44cJ2Gb1DXCtUhwLR4LPqSRXme_ie0A3HphZROldprE3IkI2pPyM1G2-92V0hHvenD72swP-91nudq3Ntj8uTA1qkv2Ul40K/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>

Keterangan : Ganti Tulisan warna merah sesuai keinginan kalian, itu berfungsi untuk menampilkan tulisan ditengah-tengah kotak komentarnya!

Dan Hasilnya nanti seperti ini :

Kotak Pencarian 4
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

 <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/AVvXsEihF7IesOK4YmXkSD0jbizhhL7lu-ECs7ONliqmxaq63cCY4f0tIXA15SB6OYinFgVUf1kXJ-2KEModIMJR_l6yo-MPfSO4ocybECj0wdY_TPcC8DQdtbNXnmzprM4yczS-BtXIpBHHbr8/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

NB : Ganti warna merah sesuai dengan selera dan kebutuhan kalian yang  nanti tulisan itu akan muncul di tengah kotak pencariannya. Dan warna biru itu ukuran kotak pencariannya, silahkan kalian rubah sesuai dengan kebutuhan!

Yang hasilnya nanti seperti ini :


Kotak Pencarian 5
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

<style type="text/css">#mediablogger-searchbox {    border-radius: 5px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDKfaMgtlSwhfwTV-_VuRRPk9UAxCvL6n5NI0gs_vhx9wluUtw0ce7Pn3IoivS5UXUBxK37PGNpoeFXGStKvAIWgflS9PVpm8f7VWvj8_F4UMRajZgqf7QvvbzPCk5h3njcUTOsHvsWGS5/s1600/impoint.blogspot.com-green.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>

Keterangan :
Ganti Warna Merah dengan berbagai macam pilihan style dibawah ini :

Gaya Pencarian warna hijau :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDKfaMgtlSwhfwTV-_VuRRPk9UAxCvL6n5NI0gs_vhx9wluUtw0ce7Pn3IoivS5UXUBxK37PGNpoeFXGStKvAIWgflS9PVpm8f7VWvj8_F4UMRajZgqf7QvvbzPCk5h3njcUTOsHvsWGS5/s1600/impoint.blogspot.com-green.png

Gaya Pencarian warna merah :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBC6SzWOmHG4DQ4pNQmuCtlA-h0p5NijpL7OWW-8x4HMRduBwD5lWlGWrcKguxsiU4icSKcF7VCcafz1Knr0T96NDkC4ehSgnYZwPwtlVzF03IF4F1aVwEXj9RdrIh9a-2RByMQsTaOZ9q/s1600/impoint.blogspot.com-red.png

Gaya pencarian warna biru :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVFBSiQ4qpl0mZZHm3OziOQAWSLieyS-KfnJqgH3cuAgYZ9bEWQAEQL36NosMNKsHRthKwLoG75Lb_UZxYxSG8ki51Cdv18wTAc7Z0GS8JWP4SQx0EHmKHEbASjIHXEYiYWPMuQGEqACUK/s1600/impoint.blogspot.com-blue.png

Gaya Pencarian warna orange :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3lGo7dmwz_To-Vc7WkKeeqBSMXfSD9gG5fzhe8G-4gDwSE1_qbb8FJq-M8q0Vp_Z2oRU6qOABe4t5GgeCbD5tqmY8ns11SWoQPdWtLxAhMxNP0Hkd41yOqEJhgTjVmkhI9Mq45wvm4xEY/s1600/impoint.blogspot.com-orange.png
Dan salah satu contoh hasilnya nanti seperti ini :


Kotak Pencarian 6
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_rImfHJHUeSqufkHp2dHvLsyoyPl3jiZgNf0GM34LC_mzduI5CYXd4O1qY2sDc-VeRQT24MOVBZRLUsC9uGovdtI3zOA-IVzI9ZYxVxtBHWiajmoSZ-NzvMNXyAZkEnSuXY-mmOorn4TM/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>

Yang hasilnya nanti seperti ini :

Keterangan :
Silahkan kalian ganti warna merah diatas dengan kode dibawah ini, untuk mengganti tipe dan style selera kalian,,

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw8SN0GgEHF5H_XsW-hOKyU6bPKW85p-Iuh1Z10L41femabuixDpJCA_xIIRhK0PungIXAFdMX_-yq5Tqgc6_xRArh3UTGHzhx3uEpvGGHnUs2-YkbWJW2CmRbkgSOpDV4zoWPvnrjMSsr/s1600/lostsector-search-box-gray.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvdOdlexjJBzpt-gQo6YMmp3dyc2B-oZE2a6FlScmHIQmVqvwkA351fuep8sA1RLSZBrRNU-WTcOJMqSAuK_gjgJv0oFOx3Hj5sYOQuvP6ADqijRAc577moD4iMEDO8D_Lw1pTvyyqTF57/s1600/lostsector-search-box-black.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFlIZO-71vRsKB90AZffuOs0NG6ppXmo2-7pKlT89MJuhpkCs9pgp-YzJznca7XhU0ucjjYkpFYqSRiFJbmucjlYVSn5anG6QALqWURr6KRnNfNVtRP0TUwNwRzSFn6b1tXkgFrx0rdsRo/s1600/lostsector-search-box-red.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN2ve8_ziyWO6O9eRGAWyN2qJcilXmmqYHKtohL8fw8Ijj0mceeJlm4Hp7a8FBybYGNwX-wBSGRtI2bzSwNL8RxXP9YKqRL1v4J0nQY8ytn6d1yNW9PRwULPnj0JJor9IMXzdH5zwjlCOt/s1600/lostsector-search-box-yellow.png

Sources:http://mazinubersahabat.blogspot.com/2013/05/6-cara-membuat-kotak-pencarian-paling.html


Demikianlah Artikel Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog

Sekianlah artikel Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog dengan alamat link https://ilmutentanginternet.blogspot.com/2014/01/cara-terbaik-membuat-kotak-pencarian.html

1 Response to "Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog "

  1. waaahh.. mantap nih artikelnya... tinggal pilih model kotak pencarian yang dipergunakan. cantik-cantik lagi..
    sukses selalu mas....
    jangan lupa... mampir juga di blog saya..

    http://miniblogger28.blogspot.com

    BalasHapus