Chia sẻ thanh tìm kiếm với hiệu ứng bằng CSS và jQuery tuyệt đẹp

Chào các bạn, hôm nay mình sẽ giới thiệu đến các bạn mẫu thanh tìm kiếm được thiết kế phẳng, đẹp sử dụng CSS và jQuery để thêm hiệu ứng.
Xem demo  

 

Thanh search này do mình chỉnh sửa lại từ template của Arlina Design, mặc định thì không được vậy đâu. Mình đã chỉnh sửa CSS, thêm jQuery để có hiệu ứng đẹp hơn đấy!

Để thực hiện các bạn thực hiện các bước sau:

Bước 1: Đăng nhập Blogger ➜ Mẫu ➜ Chỉnh sửa HTML.
Bước 2: Chèn đoạn CSS dưới đây vào trước thẻ ]]></b:skin> trong template.

.searchbutton{cursor:pointer}
.searchbutton2{background:#848889;border:none;outline:none;cursor:pointer;color:#fff;padding:15px 20px;text-transform:uppercase;font-weight:400;font-size:16px;font-family:'Roboto',sans-serif;transition:.3s ease-in-out;position:relative;top:1px}
.searchbutton.active:after{color:#fff}
.search-form{display:none;position:fixed;bottom:0;background:#fff;padding:0;width:100%;z-index:99;margin:0 auto}
.searchform{margin:0 auto;text-align:center;line-height:55px}
.searchbar{background:transparent;border:none;width:1080px;padding:0 10px;font:300 38px "Roboto",sans-serif;color:#666;margin:0 auto;outline:0;line-height:100px;transition:.3s ease-in-out;letter-spacing:-1.55px}
.searchbar:focus{color:#666}
.searchsubmit{background:#848889 url(https://4.bp.blogspot.com/-SDiaGMyrAAM/WEF-onfl5fI/AAAAAAAABbc/2DQ3OSgdhL8JFrH5OKU8pFh9-eh6shchQCLcB/s1600/search-icon.png) no-repeat center center;background-size:60%;border:none;outline:none;cursor:pointer;color:#fff;padding:15px 25px;text-transform:uppercase;font-weight:400;font-size:16px;font-family:'Roboto',sans-serif;transition:.3s ease-in-out}
.searchsubmit:hover,.searchbutton2:hover{background-color:#55579e;color:#fff}
.searchsubmit:focus,.searchbutton2:focus{background-color:#55579e;color:#fff}
.darkshadow2{display:none;position:fixed;top:0;background:rgba(0,0,0,.5);left:0;margin:0;z-index:97;width:100%;height:100vh}

Bước 3: Chèn đoạn javascript sau vào trên thẻ </head> trong template.

<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('4s(4l(p,a,c,k,e,d){e=4l(c){4k(c<a?\'\':e(4r(c/a)))+((c=c%a)>35?4n.4q(c+29):c.4v(36))};4p(!\'\'.4m(/^/,4n)){4o(c--){d[e(c)]=k[c]||e(c)}k=[4l(e){4k d[e]}];e=4l(){4k\'\\\\w+\'};c=1};4o(c--){4p(k[c]){p=p.4m(4t 4w(\'\\\\b\'+e(c)+\'\\\\b\',\'g\'),k[c])}}4k p}(\'3p(3e(p,a,c,k,e,d){e=3e(c){3f(c<a?\\\'\\\':e(3r(c/a)))+((c=c%a)>35?3j.3n(c+29):c.3l(36))};3g(!\\\'\\\'.3i(/^/,3j)){3h(c--){d[e(c)]=k[c]||e(c)}k=[3e(e){3f d[e]}];e=3e(){3f\\\'\\\\\\\\w+\\\'};c=1};3h(c--){3g(k[c]){p=p.3i(3m 3k(\\\'\\\\\\\\b\\\'+e(c)+\\\'\\\\\\\\b\\\',\\\'g\\\'),k[c])}}3f p}(\\\'1V(1P(p,a,c,k,e,d){e=1P(c){1Q(c<a?\\\\\\\'\\\\\\\':e(2W(c/a)))+((c=c%a)>35?1R.2S(c+29):c.1Y(36))};1T(!\\\\\\\'\\\\\\\'.1S(/^/,1R)){1U(c--){d[e(c)]=k[c]||e(c)}k=[1P(e){1Q d[e]}];e=1P(){1Q\\\\\\\'\\\\\\\\\\\\\\\\w+\\\\\\\'};c=1};1U(c--){1T(k[c]){p=p.1S(1W 1X(\\\\\\\'\\\\\\\\\\\\\\\\b\\\\\\\'+e(c)+\\\\\\\'\\\\\\\\\\\\\\\\b\\\\\\\',\\\\\\\'g\\\\\\\'),k[c])}}1Q p}(\\\\\\\'M(m(p,a,c,k,e,d){e=m(c){l c};y(!\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\'.t(/^/,N)){s(c--){d[c]=k[c]||c}k=[m(e){l d[e]}];e=m(){l\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\w+\\\\\\\\\\\\\\\'};c=1};s(c--){y(k[c]){p=p.t(P K(\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\b\\\\\\\\\\\\\\\'+e(c)+\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\b\\\\\\\\\\\\\\\',\\\\\\\\\\\\\\\'g\\\\\\\\\\\\\\\'),k[c])}}l p}(\\\\\\\\\\\\\\\'F(o(n,L,f,i,h,q){h=o(f){j f};x(!\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.z(/^/,B)){u(f--){q[f]=i[f]||f}i=[o(h){j q[h]}];h=o(){j\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\E+\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'};f=1};u(f--){x(i[f]){n=n.z(H D(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\v\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'+h(f)+\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\v\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'A\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'),i[f])}}j n}(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'1g(13(17,12,10,16,11,15){11=13(10){19 10.r(1h)};C(!\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.J(/^/,1f)){I(10--){15[10.r(12)]=16[10]||10.r(12)}16=[13(11){19 15[11]}];11=13(){19\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\1e+\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'};10=1};I(10--){C(16[10]){17=17.J(1b 1c(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\18\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'+11(10)+\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\18\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'1d\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'),16[10])}}19 17}(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'$(0(){$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.18\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').3(0(){$(1).2(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'4\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.8-9\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').10("12")})});$(0(){$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.15\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').3(0(){$(1).2(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'4\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.8-9\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').6("12")})});$(0(){$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.18\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').3(0(){$(1).2(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'4\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.5\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').10("7")})});$(0(){$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.15\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').3(0(){$(1).2(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'4\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.5\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').6("7")})});$(0(){$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.5\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').3(0(){$(1).2(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'4\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.8-9\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').6("7")})});$(0(){$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.5\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').3(0(){$(1).2(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'4\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.5\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').6("7")})});\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',14,14,\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'13|1i|1j|1p|1q|1a|1n|1k|1l|1m|1r|W|R|S\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.T(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'|\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'),0,{}))\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',10,Q,\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'||||||||||f|h|L|o||q|i|n|v|j|1L|x|u|z|B|A|D|E|H|F|1J|1K|1N|1O|G|1M||1I|1E|1x|1w|1v|1F|1t|1u\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.G(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'|\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'),0,{}))\\\\\\\\\\\\\\\',10,1z,\\\\\\\\\\\\\\\'||||||||||||||||||||||||||||||||||||||||||||||c|e|k|m|l|p|d|b|s|t|y|P|w|K|M|N|g|O|a|1y|1D|1B|1A|1G|1H|1C|1o|V|Z|1s|Y|X|U\\\\\\\\\\\\\\\'.O(\\\\\\\\\\\\\\\'|\\\\\\\\\\\\\\\'),0,{}))\\\\\\\',1Z,2t,\\\\\\\'|||||||||||||||2v||2w|2o|2s||1Q|1P|2U|2y||3d|20|1U|1S|2e|2i||2d|1T|2x|1Z|2p|21|2n|2l|2m|2q|2r|22|23|1X|2u|1V|1R|2a|1W|2k|33|35|34|2j|2c|32|2b|2h|2f|||||||||||2g|28|26|25|27|24|29|36|2T|39|38|37|31|2R|2P|2Q|2V|30|3b|3c|3a|2Z|2X|2Y|2O|2N|2D|2E|2C|2B|2z|2A|1Y|2F|2G|2L|2M|2K|2J|2H|2I\\\\\\\'.2a(\\\\\\\'|\\\\\\\'),0,{}))\\\',3o,3E,\\\'|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||3e|3f|3j|3i|3g|3h|3p|3m|3k|3l|3o|||||||||||3q|3C|3F|3K|3G|3I|44|3H|3B|3J|45|3z|3u|3t|48|3s|3v|3A|3w|3y|3x|46|47|3D|49|4d|4c|4b|4a|4f|4e|4j|4i|4g|3Z|3P|3Q|3O|3L|3M|3S|3X|41|43|3n|40|3U|42|3r|3T|3V|3W|||||||||||3R|3N|3Y|4h\\\'.3q(\\\'|\\\'),0,{}))\',4u,4K,\'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||4l|4k|4p|4o|4m|4n|4w|4v|4t|4q|4u|4s|4x|4r|4H|59|4I|4E|50|4J|4C|58|57|53|4y|55|4z|4D|54|4A|4B|4F|56|4Z|5f|5g|5a|5c|5b|5d|5e|4X|51|4P|4O|4N|4L|4M|||||||||||4Q|4R|4W|4V|4Y|4U|4S|52|4T|4G\'.4x(\'|\'),0,{}))',62,327,'||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||return|function|replace|String|while|if|fromCharCode|parseInt|eval|new|62|toString|RegExp|split|fadeIn|200|form|searchbutton2|113|100|63|searchbutton|fadeOut|61|60|64|268|70|77|toggleClass|65|72|300|darkshadow2|78|75|active|71|68|67|this|76|||||||||||73|69|74|66|click|79|search'.split('|'),0,{}))
//]]>
</script>

Bước 4: Chèn đoạn Code HTML sau vào sau thẻ <body> hoặc trước thẻ </body> trong template.

<div class='darkshadow2 active'/>
<div class='search-form'>
   <form action='/search' class='searchform' method='get'>
      <input class='searchbar' id='s' name='q' onblur='if(this.value==&apos;&apos;){this.value=&apos;Nhập từ khóa tìm kiếm...&apos;;}' onfocus='if(this.value ==&apos;Nhập từ khóa tìm kiếm...&apos;) {this.value=&apos;&apos;; }' placeholder='Nhập từ khóa tìm kiếm...' type='text' value='Nhập từ khóa tìm kiếm...'/>
      <input class='searchsubmit' type='submit' value=''/>
      <a class='searchbutton2'><i class='fa fa-times'/></a>
   </form>
</div>

Bước 5: Sử dụng đoạn sau để đặt icon tìm kiếm ở nơi bạn muốn (trong thanh menu, widget sidebar chẳng hạn).

<a class='searchbutton active'><i class='fa fa-search'></i></a>

Bổ sung

Nếu trong template bạn chưa có Font Awesome thì phải thêm đoạn này sau thẻ <head> nhé.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>