Membuat Fixed Search Button Dengan Javascript
26 October 2014
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.
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:"\f002";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:'Roboto',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:'Roboto',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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=''' 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 :
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