26 October 2014

Membuat Fixed Search Button Dengan Javascript

Membuat Fixed Search Button Dengan Javascript

Membuat Fixed Search Button Dengan Javascript ~ Mungkin Fixed search button ini sudah tidak asing lagi, saya pertama kali lihat, Versi search ini dari "Blog Arlina Design" dengan template-templatenya yang sangat keren.

Dan karena saya tertarik, saya memasangnya di blog saya, dan ternyata banyak yang bertanya kepada saya, bagaimana cara membuat search seperti itu...

Tombol Search yang mengikuti scroll, dan search form yang tersembunyi, membuat blog terlihat luas dan rapih, jika tombol di klik maka search form akan muncul.


Dan ini dia tutorialnya :


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

 /* CSS Fixed Search Button */
.blanter-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='blanter-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.

Tag Keyword :

  • Membuat Search Seperti Template Minima Colored
  • Membuat Search Seperti Blog Arlina Design
  • Membuat Search Form Mengikuti Ketika di Scroll
  • Membuat Sticky Search Form di Blog
  • Membuat Fixed Search Form Dengan Javascript
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic