Selamat pagi Mina-san!
Kali ini aku kasih tips cara bikin Kotak Pencarian di blog...
Ada 4 macam di sini....
Caranya:
- Login ke akun Blogger kalian.
- Klik "Tata letak" atau "Layout"
- Pilih HTML/Javascript
- Dan Nanti paste kode di bawah
Pertama
<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisLRAFhgTj4Ym6lhjA6nMIsql8qmoVjonH95rAj89SVjBjhmlCTnHsqUrTUCJ3FzyoPJtsVdsMwouUZgDqHqQMhYjnYyNmnRHCq0U62iH010kXzqMXE0YOZbUgcdU-7oLeiUah-OwODFJz/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>
NB: Tulisan Search... Bisa di ubah sesuka kalian.
- Kedua
.jpg)
<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/AVvXsEipAzWJxb8E-kYoMgi-h0AjMC9N-csaf5tovN14jqArImNPAiEVuifz-KNSABw5myCEVJigJeDnMyXOvpR5ktp_86w9lIbHwMZ-kxmCUha_c82hyQ27WusEpQntwKC2baW_VdIlLjCLKZI/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
color: #607078;
}
</style>
- Ketiga
<style type="text/css">#mediablogger-searchbox { border-radius: 5px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-mkPCAdm-5SW6b8vfsOWX94kVjaipB2IURLRwQAH9YQ6YxvncXWxMqaDEf1oFNcXbnPiZUqgBp0xqSdPYIVTDOPj7g-89kotnujQpBivRP_yZEP_lQrgPuuyItf1dZ_PobeV7EceeDb8N/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>
Ganti tulisan merah dngan pilihan style ini:
Hijau:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-mkPCAdm-5SW6b8vfsOWX94kVjaipB2IURLRwQAH9YQ6YxvncXWxMqaDEf1oFNcXbnPiZUqgBp0xqSdPYIVTDOPj7g-89kotnujQpBivRP_yZEP_lQrgPuuyItf1dZ_PobeV7EceeDb8N/s1600/impoint.blogspot.com-green.png
Demo:
Merah:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0BtJBdpdwV-jra3S6k0fFffJ0MLey9frdu5RV2iDlqEhMwk6F33wCYI9AkocRiAP-8GpKaMBkRKhmCahvesrZHdxQXgGtEanaFXCdSpQUn7B9TBlNEWgSvkDXEin3NsT0MtkQJgyr_EXH/s1600/impoint.blogspot.com-red.png
Demo:
Biru:
http://1.bp.blogspot.com/-yWZnkjCe4tY/UQr5OeN8MXI/AAAAAAAAAWE/- EFf5XtroXU/s1600/impoint.blogspot.com-blue.png
Demo:
Orange:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZJ_as3YVEeba0rwm8SI2B8xFFe1-j7Cu3RJi67S02TJYG8E0DlvxkWnRbgD49dhTytHcWqRbx3eTf4X3Q7sdXAmmYfk7Ii14xGSbu8soBSlW1x8PbnAHmrS21t42h4Vc_R0Q1uOITuv41/s1600/impoint.blogspot.com-orange.png
Demo:
- Keempat
<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisG1lZldkaQQmSTK1-l5lrbiOF2cub1PwV9pdGf95y1tDhy_07_1xDfMraEM1dAVclS4gXrn5EJDSSSvF7PVxzAN5LSIv7u5iDKGjxchcu_ya_cu8G1Ub1ddjqNP2oWPWfGF37pLsdLxOr/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>
Style:
Dark Gray:
http://3.bp.blogspot.com/-jukSBGryNx4/UPgqKoLKi2I/AAAAAAAAC38/V7A3wruYzgo/s1600/lostsector-search-box-darkgrey.png
Demo:
Gray:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhphGTvxkuKil2c_ElH_ru73LmlZ_SPL1As70tYJRhhYlCSUD8w-iqGET8RP3uER2aN1owFWOuLMlsxaMCJ34gtiXzfYEyqaLB0oKUlpkyYL-b_zfHGjBuHaM0tqphTpPVN7RkOMJ20MvXS/s1600/lostsector-search-box-gray.png
Demo:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj64JRPDO6SV8zba1hwGtckoDevNzAxnZXIOQayWZ1HvZs3AptSS-lniZQHyOmy-VTrWkT0sI3d74ECX3aNZVvsoNGoX9t7yxaDsaiBdB2dL6xUpPgQsrdRCFlSuIuAS3Skyq284krRy-mr/s1600/lostsector-search-box-black.png
Demo:
Red:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBnz-ykk-48R2NGf8Y-wgq_2wKAdJccbufsD40rF9rT5iR4N0_RV6vjqkzUt3nfjCtTwI9SKQYeW5hot7ApP02hGu8mQO8-zkb610ettkg0uDO2dE9kCXHraDrNcyxKXm2FtgV5yahBaTN/s1600/lostsector-search-box-red.png
Demo:
Gold:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNYOvZrODikdZIYyA8FaX_z8qe1-0lblTBSId5yzId9yTS_QeyN1VcnnDgPi6zVYSgUFDLulwURZSrfi3GJ5PBxNSlah59eJmxeCIsdD0_AeKYlivASV0Pynu2z_yEH4HbzqzsXRO_Ujyr/s1600/lostsector-search-box-yellow.png
Demo:
Terimakasih, Semoga bermanfaat! ^_^
Enjoy Blogging! ^_^
0 komentar:
Posting Komentar