Cara Membuat Search Di Blog Seperti Arlina Design

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.
First

6 komentar

Write komentar
Unknown
AUTHOR
28 Mei 2017 pukul 07.06 delete

Wkwkwk kunjungi balik bro..

Reply
avatar
Unknown
AUTHOR
28 Mei 2017 pukul 07.06 delete

www.sumberdunia.cf kunbal bro

Reply
avatar
ZamRoniye
AUTHOR
4 Oktober 2018 pukul 06.05 delete

tidak bisa kak. bagus cie tp belum bisa

Reply
avatar
gaman
AUTHOR
4 Desember 2018 pukul 15.00 delete

WKWKWKWKWK. liat blog dia. kalau kucar kacir gak paya ikut tutorial nya.wkwkwkwkw

Reply
avatar

Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM. ConversionConversion EmoticonEmoticon