Membuat Search Box Keren - Hallo sahabat trick terbaru, Pada Artikel yang anda baca kali ini dengan judul Membuat Search Box Keren , kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Search Box Keren
link : Membuat Search Box Keren

Membuat Search Box Keren

Membuat Search Box Keren - Search box adalah kolom kotak pencarian yang disediakan untuk pengunjung berguna mencari konten artikel yang mereka butuhkan, keberadaan widget search box ini sangat berguna, namun sayangnya widget search box bawaan google tampilannya menurut para blogger kurang menarik, nah untuk itulah saya akan share membuat search box ini menjadi keren caranya pun cukup mudah tinggan tambahkan widget lalu masukkan kodenya lalu simpan, ttinggal anda letakkan widget tersebut sesuai keinginan anda semua:

Semua widget search ini cara membuatnya hampir sama yaitu:
1. Log in ke blogger
2. Masuk tata letak
3. Tambahkan widget pilih HTML/ Javascript lalu masukkan kodenya
4. Simpan

Membuat Search Box versi 1:

<style>
#search-box {
position: relative;
width: 100%;
margin: 0;
}
#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get'
target='_top'>
<input id='search-text' name='q'
placeholder='Search Keyword Here....' type='text'/>
<button id='search-button'
type='submit'><span>Search</span></button>
</form>
</div>

gg  Ganti kode sesuai kode warna pada gambar diatas sesuai warna kesukaan anda

Membuat Search Widget versi 2:

<style type="text/css">
#mediablogger-searchbox {border-radius: 5px; background: url(http://1.bp.blogspot.com/17dWPUuCMEE/UQr5WvW2inI/AAAAAAAAAWM/xWAzhlw4ez0/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...";}' />       
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"/>   
</form>
</div>

Ganti kode yang saya blog dengan warna hitam dengan url gambar kesukaan anda dibawah ini:

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1sf04T7nuPX0vLx4FoXuMUCQZMA0sJIPTUgRN5hh4DP_Ktil7lGiF63frP9fp3Fp7f40hxVAprskERbbaXdtLbpQHjyhkxD-QWopNamDXZwIabkcWBU3M1ybGRWzgbdfdY0j5Zc2bNvYG/s1600/impoint.blogspot.com-red.png

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCmX6mA0RWZPsxXHKkf1NuIjGfuJ0u3eX5auZm0OhSAn_hfyCh_6Apa1mL6KId81ii-Cpgt3TZVZG5tmlcai32n2eCyPm9gpYLx7T0wBI_RppABHP7Uio9dyNuosXPk-pvoNInMGK3iXvo/s1600/impoint.blogspot.com-blue.png

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpz8Rj11nVBcac67qz3lY9r07g4aZflPEvEM6Zp1M-fTKR_yd80uom56lRSPkB7F10EyVgRovnSuigufSCe6fKXVIFbERKNz1Mq1Ct7HKntLgPFVstMeDLugqFd9mNEY-r535JEn3ce6c/s1600/impoint.blogspot.com-orange.png

Membuat Search Widget Versi 3

<style type="text/css"> 
#a-searchbox{background:url(http://lh5.googleusercontent.com/Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.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: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>

Ganti url yang saya blok sesuai dengan warna yang anda inginkan dibawah ini:

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1jgRP6fydYM3KX843WNkfKZkgpSZxrzAUvoMWgixU9N2PkB5fepfqgzHMCbJaTj_7VDbkaaaJkW8Lop4X32yEFx9iTvMxqItfafkKK8u6pz0Mh-FpXk4EGr4MsZrB4ospUVg3IGqUeGa3/

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6X-JrqxE2mNDTtO2nZePo7upLcijWEwaAzTpGSsO8tjCm6mBytAIvltQA2QomaFO6DNWCJCVo0Y_hMhgahDLnkfE4QF2SgyuZsSBhs2hpfLNlbS3sGmYBJjoJlJfPvj3_s2j83pLhY755/

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt4Qvyd7QF6VFUj3oNaQT0n-VcvQzmCeEnGzL7_s6q1h0m2cBd51eUwj18RrUDILs9JUR7FPKh1gxR-4TJ3hn-naWdoH8hHdswAD96DXUv1YJUCFu3gIy8b5idJIJcDkSZtO5hPq8HKs8n/

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCP5aRfVvQKIa1nkzyb6-Hptw8wtM6HL87IsD9jwUaqGrZNGS6CHxtV0Dw7nVbHLrRbrthUbePA7xvKJM3o3rpWsGvDjnxSjB0UOw4os_TBmIqQ9wd0ekwLFnUZOo8eN5YgwijZB13cmYF/

gg   https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNhOdWc26eoayfBE8HK79MKfM8MSk4CKhunUXIWPQxDsHfmRSqSMj8Q8DQJmgs1uOC0SOk8IAnn9g71a3ho1WfOI5_8GNzz0RFBji3BtApUIvSwwAnK7YIrOmPR0rX7d1_jFpjptwlNxUk/

Demikian tutorial cara membuat search box keren, mungkin anda juga perlu membaca:
Membuat bermacam-macam popular post keren
Membuat Label keren
Menghias link kredit footer
Membuat Navigasi nomor di bawah halaman
Membuat Header 2 kolom

Demikianlah Artikel Membuat Search Box Keren

Sekianlah artikel Membuat Search Box Keren kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Search Box Keren dengan alamat link https://trickterbaruagar.blogspot.com/2014/07/membuat-search-box-keren.html

Tweet