To Learn the HTML Trick, just copy paste this Code below and you're good to go. If you want to change the colors or designs, just go on in CSS style sheets and learn the trick. I will possibly add some of it here soon. Note: This will just search only the topic inside your blog page, this won't search the entire web, so be sure to have Search Descriptions on your articles.
<style type="text/css">#hbz-searchbox { background-color: #F5F5F5; border: 1px solid #EDEDED; padding: 5px; border-radius: 10px; margin: 10px auto; min-width: 238px; max-width: 288px; }#hbz-input { background-color: #FEFEFE; border: medium none; font: 12px/12px "HelveticaNeue", Helvetica, Arial, sans-serif; margin-right: 2%; padding: 4%; box-shadow: 2px 1px 4px #999999 inset;border-radius: 9px; width: 60.33%; }#hbz-input:focus { outline: medium none; box-shadow: 1px 1px 4px #0D76BE inset; }#hbz-submit { background: transparent linear-gradient(to bottom, #34ADEC 0%, #2691DC 100%) repeat;border-radius: 9px; border: medium none; color: #FFF; cursor: pointer; font: 13px/13px "HelveticaNeue", Helvetica, Arial, sans-serif; padding: 4%; width: 28%; }#hbz-submit:hover { background: transparent linear-gradient(to bottom, #2691DC 0%, #34ADEC 100%) repeat; }</style><form id="hbz-searchbox" action="/search" method="get"><input type="text" id="hbz-input" name="q" placeholder="Type Here..." /><input type="hidden" name="max-results" value="8" /><input id="hbz-submit" type="submit" value="Search" /></form>
Thank you and have a nice day.
