Smartspy - Add Search Box To Your Site

Search Box Preview


Please copy the following code in the text area and paste it in the corresponding html file of your website where you want to add the above Search box.
<style> .active_cat .cattext{ color:#fa9018; } .engine_icon{ width:28px; height: 28px; } .box_wrapper { text-align: center; border-color: #999999; } .search_box { max-width: 900px; margin: 0 auto; background: #099ee0; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; -ms-order-radius: 15px; } .insidesearch_box { padding: 10px; position: relative; } .shadw_wrapper { width: 100%; float: left; } .search_area_wrapper { width: 100%; display: table; } .search_field { display: table-cell; width: 100%; } .search_outer { display: table-cell; padding: 0 0px 0 10px; width: 30px; vertical-align: top; } .fllky h2{ font-family: Arial, Helvetica, sans-serif; font-size:9px; color:#00A3E1; padding: 4px 6px 3px; display:block; line-height:none; list-style:none; } .feeling { color: #60CEFF; font-size: 12px; font-style: italic; font-weight: bold; margin-bottom: 3px; margin-top: 2px; width: 100%; } .feeling:hover { color: #085f85; } .search_btn { background: url(http://smartspy.com/images/search_btn_bg.jpg) repeat-x; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; } .search_btn_border { border: inset 1px solid #f2f2f2; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; } .intxt { border: 2px solid #CFCFCF; border-radius: 10px; display: block; height: 42px; line-height: 42px; text-indent: 10px; /padding-right: 150px;/ width: 100%; } .catagories { position: absolute; right: 80px; top: 25%; } .catagories_outline { background: url("http://smartspy.com/images/catagories_ico.png") no-repeat 96% center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; color: #FFFFFF; cursor: pointer; display: table; font-size: 14px; padding: 12px 7px; vertical-align: top; width: 100%; } .searchbutton { background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border: medium none; cursor: pointer; } .catagories_list { background: none repeat scroll 0 0 #F4F4F4; width: 100%; float: left; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0 0 3px -1px rgba(0, 0, 0, 0.5); } .catagories_listul { float: left; } .catagories_listul li { float: left; text-align: center; padding: 0 10px; margin-bottom: 15px; cursor: pointer; } .catagories_listul img { display: inline-block; } .catagories_listul a { color: #000000; line-height: 0; font-size: 12px; } .catagories_listul a:hover { opacity: .8; } .catagories_listul a p { display: table; line-height: 0; padding-top: 10px; width: 100%; } .inside_catagories_list { padding: 40px 10px 30px; float: left; } .tip_c { background: url("http://smartspy.com/images/tip.png") no-repeat center center; float: right; height: 15px; position: absolute; right: 100px; top: -15px; width: 23px; } .cata_full { position: absolute; left: 0; right: 0; top: 84px; z-index: 100; display: none; } .inactive_cat{ display:none; } .catagories_listli { list-style: none; float: left; } .logo{ padding-top:0px; padding-bottom:0px; text-align: left; float: none; display: block; margin: 0 auto; max-width: 300px; } .box_wrapper{ max-width:700px; border: 1px solid; } .box_wrapper2{ margin: 10px 10px; } </style> <script type="text/javascript"> $(document).ready(function(){ $(".catagories").click(function(){ $(".cata_full").fadeToggle(200); }); $('.catagories, .cata_full').click(function(event){event.stopPropagation();}); $(document).click(function(){ $('.cata_full').fadeOut(200); }); $(".user_tab").hover(function(){ $(this).children('.user_tab_area').stop(true,true).fadeIn(300); }, function(){ $(this).children('.user_tab_area').stop(true,true).fadeOut(200); }); }); </script> <script type="text/javascript"> function Determine(loopvalue,enginecount,engine) { for(i=0;i<enginecount;i++) { $("#cat"+i).removeClass("active_cat"); $("#cat"+i).addClass("inactive_cat"); } $("#cat"+loopvalue).removeClass("inactive_cat"); $("#cat"+loopvalue).addClass("active_cat"); $('.cata_full').fadeOut(200); document.getElementById('type').value=engine; } $(document).ready(function() { $("#cat0").removeClass("inactive_cat"); $("#cat0").addClass("active_cat"); }); </script> <form name="searchform" id="searchform" enctype="multipart/form-data" method="post" action="https://smartspy.com/index.php?page=search/redir"> <div class="box_wrapper"> <div class="box_wrapper2"> <div class="logo"> <a href="https://smartspy.com/index.php?page=" id="homepath" alt="Smartspy Home" title="Smartspy Home"> <img style="max-width: 80%;" src="http://smartspy.com/userdata/webmasterlogo.jpg" border="0"></a> </div> <div class="search_box"> <div class="insidesearch_box"> <div class="search_area_wrapper boxsizing"> <div class="search_field boxsizing"><input type="hidden" id="type" name="type" value="Web"> <input type="text" class="intxt boxsizing" onKeyUp="javascript:keymovement(event,this.value);" name="search" id="search" value=""/> <div class="catagories"> <div class="catagories_btn"> <div class="catgores_btn_inside"> <span class="catgrie_name"> <img id="cat0" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/7/web.gif" alt="categories" /> <img id="cat1" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/6/images.png" alt="categories" /> <img id="cat2" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/4/videos.gif" alt="categories" /> <img id="cat3" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/18/translate.png" alt="categories" /> <img id="cat4" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/19/maps.png" alt="categories" /> <img id="cat5" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/2/sports.gif" alt="categories" /> <img id="cat6" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/11/audio.gif" alt="categories" /> <img id="cat7" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/9/forum.gif" alt="categories" /> <img id="cat8" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/10/blog.gif" alt="categories" /> <img id="cat9" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/3/kids.gif" alt="categories" /> <img id="cat10" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/12/wiki.png" alt="categories" /> <img id="cat11" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/1/pdf.png" alt="categories" /> <img id="cat12" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/15/images.png" alt="categories" /> <img id="cat13" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/16/audio.gif" alt="categories" /> <img id="cat14" class="engine_icon inactive_cat" src="http://smartspy.com/userdata/images/5/news.gif" alt="categories" /> </span> </div> </div> </div> </div> <div class="search_outer"> <div class="search_btn"> <div class="search_btn_border"> <button type="submit" class="searchbutton"> <i class="fa fa-search fa_sbtn" title="Search Button"></i> </button> </div> </div> </div> <div class="cata_full"> <div class="tip_c"></div> <div class="catagories_list"> <div class="inside_catagories_list"> <ul class="catagories_listul"> <li class="catagories_listli"><a id="Web_link"; class="activetablink" href="javascript:Determine(0,15,'Web');"><img class="engine_icons" src="http://smartspy.com/userdata/images/7/web.gif" alt="iamges" /><br /><br />Web</a></li> <li class="catagories_listli"><a id="Images_link"; class="activetablink" href="javascript:Determine(1,15,'Images');"><img class="engine_icons" src="http://smartspy.com/userdata/images/6/images.png" alt="iamges" /><br /><br />Image</a></li> <li class="catagories_listli"><a id="Videos_link"; class="activetablink" href="javascript:Determine(2,15,'Videos');"><img class="engine_icons" src="http://smartspy.com/userdata/images/4/videos.gif" alt="iamges" /><br /><br />Video</a></li> <li class="catagories_listli"><a id="Translate_link"; class="activetablink" href="javascript:Determine(3,15,'Translate');"><img class="engine_icons" src="http://smartspy.com/userdata/images/18/translate.png" alt="iamges" /><br /><br />Translate</a></li> <li class="catagories_listli"><a id="maps_link"; class="activetablink" href="javascript:Determine(4,15,'maps');"><img class="engine_icons" src="http://smartspy.com/userdata/images/19/maps.png" alt="iamges" /><br /><br />maps</a></li> <li class="catagories_listli"><a id="Sports_link"; class="activetablink" href="javascript:Determine(5,15,'Sports');"><img class="engine_icons" src="http://smartspy.com/userdata/images/2/sports.gif" alt="iamges" /><br /><br />Sports</a></li> <li class="catagories_listli"><a id="Audio_link"; class="activetablink" href="javascript:Determine(6,15,'Audio');"><img class="engine_icons" src="http://smartspy.com/userdata/images/11/audio.gif" alt="iamges" /><br /><br />Audio</a></li> <li class="catagories_listli"><a id="Forum_link"; class="activetablink" href="javascript:Determine(7,15,'Forum');"><img class="engine_icons" src="http://smartspy.com/userdata/images/9/forum.gif" alt="iamges" /><br /><br />Forum</a></li> <li class="catagories_listli"><a id="Blog_link"; class="activetablink" href="javascript:Determine(8,15,'Blog');"><img class="engine_icons" src="http://smartspy.com/userdata/images/10/blog.gif" alt="iamges" /><br /><br />Blog</a></li> <li class="catagories_listli"><a id="Kids_link"; class="activetablink" href="javascript:Determine(9,15,'Kids');"><img class="engine_icons" src="http://smartspy.com/userdata/images/3/kids.gif" alt="iamges" /><br /><br />Kids</a></li> <li class="catagories_listli"><a id="Wiki_link"; class="activetablink" href="javascript:Determine(10,15,'Wiki');"><img class="engine_icons" src="http://smartspy.com/userdata/images/12/wiki.png" alt="iamges" /><br /><br />Wiki</a></li> <li class="catagories_listli"><a id="PDF_link"; class="activetablink" href="javascript:Determine(11,15,'PDF');"><img class="engine_icons" src="http://smartspy.com/userdata/images/1/pdf.png" alt="iamges" /><br /><br />PDF</a></li> <li class="catagories_listli"><a id="Twitter_link"; class="activetablink" href="javascript:Determine(12,15,'Twitter');"><img class="engine_icons" src="http://smartspy.com/userdata/images/15/images.png" alt="iamges" /><br /><br />Twitter</a></li> <li class="catagories_listli"><a id="iTunes_link"; class="activetablink" href="javascript:Determine(13,15,'iTunes');"><img class="engine_icons" src="http://smartspy.com/userdata/images/16/audio.gif" alt="iamges" /><br /><br />iTunes</a></li> <li class="catagories_listli"><a id="News_link"; class="activetablink" href="javascript:Determine(14,15,'News');"><img class="engine_icons" src="http://smartspy.com/userdata/images/5/news.gif" alt="iamges" /><br /><br />News</a></li> </ul> </div> </div> </div> </div> </div> <div class="shadw_wrapper"> <div class="shdow"> <img style="max-width: 100%" src="http://smartspy.com/images/shadow.png" alt="Shadow" /> </div> </div> </div> </div> </div> </form>

Add Search Box To Your Site

Choose Engines