Update Widget Search Terbaru Ala Arlina Design

Update Widget Search Terbaru Ala Arlina Design, Kali ini gua akan posting widget search dari tetangga kita DTE Site, Yang pasti ane belum paham tu search punya siapa, yang pasti gua akan share ...

Simak Lakah² Berikut

1. Letakkan CSS berikut di atas ]]></b:skin>Atau </style>

/*CSS Search*/

.luna-search {position:relative;padding:0;height:0;margin:0 auto;}
.searchbutton {background:transparent;margin:0;padding:7px 18px;display:inline-block;text-transform:Capitalize;line-height:44px;cursor:pointer;z-index:93;}
.searchbutton.active {color:#e8eaef;}
.searchbutton:after {content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:none;font-size:18px;color:#6b6c71;position:relative;}
.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:88%;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:7px;right:41px;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;}

2. Tambahkan kode dibawah ini diatas </header>

<div class='luna-search'>

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

3.Terakhir tambahkan kode dibawah ini Diatas </body>

<script type='text/javascript'>

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