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.
Sign up here with your email
6 komentar
Write komentargajadi broo :(
ReplyWkwkwk
ReplyWkwkwk kunjungi balik bro..
Replywww.sumberdunia.cf kunbal bro
Replytidak bisa kak. bagus cie tp belum bisa
ReplyWKWKWKWKWK. liat blog dia. kalau kucar kacir gak paya ikut tutorial nya.wkwkwkwkw
ReplyKomentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM. ConversionConversion EmoticonEmoticon