Membuat Fixed Search Button Dengan Javascript

Pada Kesempatan hari ini saya akan membagikan sebuah tutorial Blogger membuat mesin pencarian yang super keren dan cocok untuk blog sobat. selain itu mesin pencarian ini tidak memberatkan loading blog. Bagi sobat blogger yang mau memasang mesin pencarian ini silahkan ikuti langkah - langkah dibawah ini.

Demo

Letakan CSS di bawah ini tepat di atas ]]></b:skin> atau </style>

/* CSS Fixed Search Button */
.ahmadshared-search {position:relative;padding:0;height:0;margin:0 auto;}
.main-nav ul li.searchbutton {background:transparent;margin:0;padding:7px 18px;display:inline-block;text-transform:Capitalize;line-height:44px;cursor:pointer;z-index:93;}
.main-nav ul li.searchbutton.active {color:#e8eaef;}
.main-nav ul li.searchbutton:after {content:&quot;\f002&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;color:#6b6c71;position:relative;}
.main-nav ul li.searchbutton.active:after {color:#fc4f3f;}
.search-form {display:none;position:fixed;bottom:0;left:0;background:rgba(31,32,37,0.90);
padding:5px 0;width:100%;z-index:91;margin:0 auto;box-shadow: 0px -1px 3px 0px rgba(0,0,0,0.16);}
.searchform {margin:0 auto;text-align:center;line-height:45px;}
.searchbar {background:transparent;width:70%;font-weight:400;font-size:20px;font-family:&#39;Roboto&#39;,sans-serif;color:#6b6c71;margin:0 auto;border:none;outline:none;line-height:45px;transition:background-color 1s ease-out 0s;}
.searchbar:focus {color:#9eb2c0;}
.searchsubmit {background:#07ACEC;border:none;outline:none;cursor:pointer;
color:#fff;padding:0 25px;text-transform:uppercase;font-weight:400;font-size:16px;
font-family:&#39;Roboto&#39;,sans-serif;line-height:45px;
transition:background-color 1s ease-out 0s;}
.searchsubmit:hover {background:#2e3138;color:#fff;box-shadow: inset 0 0 0 2px #07ACEC;}
.searchsubmit:active {background:#fe4e3f;color:#fff;box-shadow:none;border:none;outline:none;}
.searchblanter{position:absolute;top:10px;right:47px;text-align:center;padding:0;color:#292929;font-size:44px;font-weight:400;line-height:25px;cursor:pointer;transition:all .4s ease-in-out;}
.searchblanter:hover{color:#07ACEC;}

Letakan JAVASCRIPT ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
$(function(){
$('.searchblanter').click(function(){
  $(this).toggleClass('active');
  $('.search-form').slideToggle('normal');
});
});
//]]>
</script>

Letakan HTML ini di bawah <body> atau daerah lainnya...

<div class='ahmadshared-search'>
</div>
  <div class='search-form'>
<form action='/search' class='searchform' method='get'>
  <input class='searchbar' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here'/>
  <input class='searchsubmit' type='submit' value='Search'/>
</form>
</div>
  <div class='searchblanter'><i class='icon-search' style='font-size: 20px;'/></div>

Bagi yang belum memasang Font Awesome, letakan CSS ini di atas </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css' rel='stylesheet'/>

Semoga Tutorial ini Bermanfaat. Jangan lupa Like, Share dan komentarnya ya.

Posted by Admin

Membuat Fixed Search Button Dengan Javascript

0 Response to "Membuat Fixed Search Button Dengan Javascript"

Post a Comment