<scriptsrc='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Kustomisasi Lengkap
CSS.sb-search {
position: relative;
margin-top: 10px;
width: 0%;
min-width: 60px;
height: 60px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
transition: width 0.3s;
-webkit-backface-visibility: hidden;
}
.sb-search-input {
position: absolute;
top: 0;
right: 0;
border: none;
outline: none;
background: #fff;
width: 100%;
height: 60px;
margin: 0;
z-index: 10;
padding: 20px 65px 20px 20px;
font-family: inherit;
font-size: 20px;
color: #2c3e50;
}
input[type="search"].sb-search-input {
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
.sb-search-input::-webkit-input-placeholder {
color: #efb480;
}
.sb-search-input:-moz-placeholder {
color: #efb480;
}
.sb-search-input::-moz-placeholder {
color: #efb480;
}
.sb-search-input:-ms-input-placeholder {
color: #efb480;
}
.sb-icon-search,
.sb-search-submit {
width: 60px;
height: 60px;
display: block;
position: absolute;
right: 0;
top: 0;
padding: 0;
margin: 0;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.sb-search-submit {
background: #fff; /* IE needs this */
-ms-filter: "progid:DXImageTransform.Microsoft.
Alpha(Opacity=0)"; /* IE 8 */
filter: alpha(opacity=0); /* IE 5-7 */
opacity: 0;
color: transparent;
border: none;
outline: none;
z-index: -1;
}
.sb-icon-search {
color: #fff;
background: #e67e22;
z-index: 90;
font-size: 22px;
font-family: 'FontAwesome';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.sb-icon-search:before {
content: "\f002";
}
/* Open state */
.sb-search.sb-search-open,
.no-js .sb-search {
width: 100%;
}
.sb-search.sb-search-open .sb-icon-search,
.no-js .sb-search .sb-icon-search {
background: #da6d0d;
color: #fff;
z-index: 11;
}
.sb-search.sb-search-open .sb-search-submit,
.no-js .sb-search .sb-search-submit {
z-index: 90;
}
JS
function buttonUp(){
var valux = $('.sb-search-input').val();
valux = $.trim(valux).length;
if(valux !== 0){
$('.sb-search-submit').css('z-index','99');
} else{
$('.sb-search-input').val('');
$('.sb-search-submit').css('z-index','-999');
}}
$(document).ready(function(){
var submitIcon = $('.sb-icon-search');
var submitInput = $('.sb-search-input');
var searchBox = $('.sb-search');
var isOpen = false;
$(document).mouseup(function(){
if(isOpen == true){
submitInput.val('');
$('.sb-search-submit').css('z-index','-999');
submitIcon.click();}});
submitIcon.mouseup(function(){return false;});
searchBox.mouseup(function(){return false;
});submitIcon.click(function(){
if(isOpen == false){
searchBox.addClass('sb-search-open');
isOpen = true;} else {
searchBox.removeClass('sb-search-open');
isOpen = false;}
});});
HTML
<div id="sb-search" class="sb-search">
<form><input class="sb-search-input"
placeholder="Enter your search term..."
type="search" name="search" id="search">
<input class="sb-search-submit"
type="submit" value="">
<span class="sb-icon-search"></span>
</form>
</div>
Kode HTML bisa sobat tempatkan dimana saja
selamat Pagi Sob... sebelum saya pasang saya mau tanya dulu apakah setelah memasang Tombol Search ini tidak akan membuat Blog berat Sob ?
BalasHapusSaya rasa biasa saja ko .. paling 2 ons hehe
HapusIni mah keren pisan atuh kang...responsive pula mantab deh
BalasHapusHehe lumayan daripada manyun mas ..........
Hapuslangsung diterapkeun hehe.... hatur nuhun,mantap pisan
BalasHapusMuhun mangga hehe
Hapusselamat siang mas, saya langsung coba deh scripnya
BalasHapushabisnya mantap mas sudah support responsive lagi
thanks mas :)
Monggo silahkan !!
HapusKeren kang Ruli
BalasHapusSupport buat semua jenis template ndak kang :)
suport mas untuk semua mas !!
Hapusihh keren euy di klik langsung kaluar jadi panjang hehe,hebat si master yang satu ini heuheu
BalasHapushehe pan kitu kang ari kuya mah
HapusKeren Kang eta bisa maju mundur kitu...
BalasHapusSaya praktekan dulu yah...
Undur-undur pan kang hehe... !!
Hapuswah keren jadinya kalau dimodif seperti itu...
BalasHapuslumayan mas
HapusNice Posting Bro :) ,,,...
BalasHapusthax sob
HapusWahh keren banget yang ini mas
BalasHapusLumayan sob
Hapuskalo dipasang di blog saya gk bakal hidup ini, bentrok sama yang lain, kelahi :D
BalasHapushehehe .. mungkin juga
Hapussetelah lihat demonya keren sekali mas rully :D
BalasHapusIya sih emang lumayan keren mas
Hapusgak lumayan lagi mas emg jos gandos =D
Hapushehe
HapusWah keren banget tombol searchnya mas, ijin copy scriptnya mas untuk dipasang pada template buatan saya nantinya
BalasHapusOks silahkan mas ...
Hapuskeren ya mas tombol sharenya responsive :) makasih sharingnya sangat bermanfaat bagi newbie seperti saya :D
BalasHapusWoh sama dong kalau newbie ..hihi
Hapusiya kang sama saya juga newbie :)
Hapusmantap dah, reponsive..:)
BalasHapusSangat-sangat responsive
Hapuswah otomatis muncul nih kalau d seret kursor hehe keren kang :)
BalasHapusmantapzzz
Hapuswah otomatis muncul nih kalau d seret kursor hehe keren kang :)
BalasHapusYups bener sob ....
Hapuskeren gan tutornya, wajib dipraktekan :D
BalasHapusSilahkan sob
Hapusini dia yang ane cari,mantap gan :D
BalasHapussilahkan mas !!
Hapuskeren banget Tombol share nya mas.
BalasHapusresponsiveee Fullllllll :D thanks yaa
bukan share tapi search sob ??hehe
HapusKomentar ini telah dihapus oleh pengarang.
BalasHapusgede juga ya kalau dilihat dari codi scriptnya :-bd
BalasHapusIya kali ya .. tapi saya lihat bbrp blog yg pake ini aman-aman saja sis
Hapustanya mas...(http://ronniratnanh.blogspot.com/)
BalasHapusuntuk ganti tulisan pencarian di blog saya gmana ya mas ? tulisan FL biar bsa diganti "search ato "cari"....mohon pencerahannya mas
makasih mas ruly
FontAwasome'y gak jalan sob .. coba update kembali link'y , biar keluar logo search'y
Hapusada tidak selain ini
BalasHapusjavascript yang bisa diopen dan close?
Simple tapi menarik untuk dicoba kang
BalasHapus