lihat contoh berikut selain untuk menambah unik tampilan, trik kotak pencarian seperti ini juga bisa di gunakan untuk menghemat ruang dan kolom. bagaimana caranya, ikuti langkah berikut ini.
Kami sedang mencari agen iklan untuk periklanan media nasional disetiap desa atau kelurahan di seluruh Indonesia, yang mau bekerja secara partime atau paruh waktu baik melalui online maupun nyata, dan ini tidak terikat target khusus.
Silahkan login terlebih dahulu di editor template blogger anda.
setelah itu letakkan kode HTML kotak pencarian berikut ini di elemen yang anda inginkan, misalnya di header, di menu, atau di sidebar blog anda. berikut ini adalah kode HTML kotak pencariannya:
setelah itu, letakkan kode CSS berikut ini di dalam kelompok dimana CSS blog anda di simpan:
.input-wrapper {
border:1px solid #333;
width:26px;
height:26px;
background-color:#eee;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
overflow:hidden;
position:relative;
}
.input-wrapper input,
.input-wrapper input:focus {
border:none;
background:none;
margin:0 0;
padding:0 16px;
display:block;
width:200px;
height:26px;
font:italic bold 12px/26px Arial,Sans-Serif;
color:#333;
outline:none;
}
.input-wrapper.focus {
background-color:#eee;
border-color:#000;
}
.input-wrapper .sc {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGOSURBVDhPrZJPSwJRFMXPokD6BkFQyzaRQUGrKII21a5Vu9oHLVq07hNUSFSYWqOmwjSGY0aRQqsCXUQJlaXSaEZamI2mTnV7WguNMUR6cHiX98793fv+AP8+9gvd2P9cYuKZdPDQYH01/NSMPcWCYyIcVMjL4r13AT7S/A1yFZzM+J3sUZYZbByisojDEuCD4C4GGKRJHbIjj+DoxyjI2iqTmGuHq/AIt0JwFgdqAF4dcOUJvDynanDK8xCLBCHjrQF48WE3S9h+61A18C/97DiEnXRaHWBPiuDTBHtqQtXgSE1BkAm2pF8dYHuYheOJYE3kVQ3WRACOVGl/uvZLmOMxWO4JW9IFzLExcNFWcNIouNgJrGzdHCup+oKraJzUBlM4DovE7iJB5YqlmbsjbEYfsBXJwp5k8U1v7S6MEQ2MoRnob5/L3RhvMzCEFrDmb4H+ugebkSI2Qp8w3HTV9zt/u0yhIQbMwRjOw3De1xhkNTiM9eAHTFHC2mVnYxDdqRb6KwUrZ5ONASqyvgCU5N7E8iBBBAAAAABJRU5ErkJggg==') no-repeat 50% 50%; -webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
sekarang tambahkan kode jQuery berikut agar fungsi berjalan dengan baik:
$(function() {
$('.search-form .sc').on("click", function() {
$(this).hide()
.parent().addClass('focus')
.stop().animate({width:200}, 120, "swing")
.find('input').trigger("focus")
.on("focusout", function() {
$(this).next().show()
.parent().removeClass('focus')
.stop().animate({width:26}, 120, "swing");
});
return false;
});
});
Kami agen situs penerbit content placement Indonesia, jasa kerjasama penerbitan, menerima jasa content placement dengan pemasangan content placement untuk jangka pendek dengan minimal satu kali mengirim content placement, dan menerima kerjasama jangka panjang yang anda inginkan.
Perlu anda sesuaikan: ubah lebar sesuai dengan tampilan di blog anda, dengan mengatur kode berikut .stop().animate({width:200}, 120, "swing"
setelah itu simpan dan lihat hasilnya, demikan saja semoga berguna.
