Inout search engine v10 - Add Search Box To Your Site

Add Search Box to Your Site

Search Type Display Style
Drop Down Text Link
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.

<link href="https://inout-searchengine-demo.inoutscripts.net/css/fontawesome.css" rel="stylesheet" type="text/css" />
<style>

.position-absolute {
    position: absolute !important;
}

.position-relative {
    position: relative !important;
}


.add-to-srch{
	width: 100%;
	float: left;	
}
.add-srch-btn:hover {
    background: #6ea052;
}
.add-srch-btn {
    padding: 8px 17px;
    margin-top: 30px;
	margin-bottom: 30px;
    border: none;
    background: #7cb55c;
    color: #fff;
    font-size: 15px;
    border-radius: 9px;
    letter-spacing: .2px;
    transition: .3s ease;
}
.brd-bt {
    border-bottom: 1px solid #e9e9e9;
}
.add-srch-div {
    max-width: 720px;
    margin: 0px auto;
    text-align: center;
	position: relative;
}
.add-srch-logo {
    margin-bottom: 20px;
    width: 175px;
}
.ad-srch-bx {
    width: 100%;
    display: table;
    height: 54px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.3	);
	overflow: hidden;
	margin-bottom: 15px;
}
.ad-srch-inpt-out {
    width: 100%;
    display: table-cell;
}
.ad-srch-bt-out {
    display: table-cell;
}
.add-srch-inpt {
    width: 100%;
    border: none;
    height: 54px;
    padding-left: 15px;
    color: #717171;
    letter-spacing: .2px;
    font-size: 18px;
}
.add-src-bt {
    width: 75px;
    height: 54px;
    border: none;
	background: transparent;
}
.ad-srch-ic {
    right: 75px;
    border-right: 1px solid #e9e9e9;
    top: 50%;
    transform: translateY(-50%);
	padding: 5px 10px;
    cursor: pointer;
}
.ad-srch-ic-st {
    color: #a9a9a9;
    margin-right: 5px;
}

.add-srch-drp {
    left: 40px;
    right: 40px;
	top: 100px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
	opacity: 0;
	visibility: hidden;
	padding: 5px;
	transition: .3s ease;
	z-index: 99;
}
.add-srch-drp.active {
	top: 145px;
    left: 0px;
    right: 0px;
	opacity: 1;
	visibility: visible;
}
.srch-drp-list:hover {
    background: #f1f1f1;
}
.srch-drp-list {
    width: 10%;
    text-align: center;
    float: left;
    padding: 5px 0px;
    border-radius: 5px;
    transition: .3s ease;
    cursor: pointer;
}
.srch-drp-list-txt {
    font-size: 14px;
    margin-top: 2px;
    color: #575757;
    font-weight: bold;
    margin-bottom: 0px;
	margin-top: 5px;
}
.srch-drp-list-spn {
    color: #a9a9a9;
    font-size: 15px;
}
.srch-txtarea-hd {
    font-size: 14px;
    color: #575757;
    padding-bottom: 15px;
    margin-bottom: 0px;
}
.srch-code {
    width: 100%;
    padding: 0px 10px;
    font-size: 14px;
    height: 200px;
    border: none;
}
.srch-code-div {
    box-shadow: 0px 0px 20px 0px #e2e0df;
    margin-bottom: 30px;
    border-radius: 12px;
    overflow: hidden;
    padding: 10px;
    background: #fff;
    margin-top: 10px;
}
.srch-lst-ic {
    color: #a9a9a9;
    margin-right: 7px;
    font-size: 13px;
}


.head-drp-main1 {
  overflow: hidden;
  width: 100%;
}

.head-drp-main1 ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.head-drp-main1 ul li { float: left; }

.head-drp-main1 ul li.more-bt-drp {
  width: 3em;
  text-align: center;
  display: none;
}

.head-drp-main1 ul li.more-bt-drp1:hover ul#drp-ovrflw1 {
  opacity: 1;
  visibility: visible;
}

.head-drp-main1 ul li a, .head-drp-main1 ul li span {
    display: block;
    color: #575757;
    text-decoration: none;
    padding: 15px 10px;
    cursor: pointer;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    font-size: 14px;
    letter-spacing: .2px;
    font-weight: bold;
}

.head-drp-main1 ul li a:hover,
.head-drp-main1 ul li span:hover { color: #7CB55C; }





.head-drp-main1 #drp-ovrflw1 {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  text-align: left;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  z-index: 99;
  background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
padding: 7px;
}

.head-drp-main1 #drp-ovrflw1 li { float: none; }

.head-drp-main1 #drp-ovrflw1 li a {
  white-space: nowrap;
}

.head-drp-main1 #drp-ovrflw1 li a:hover { background: #f1f1f1;border-radius: 5px;}


.head-drp-main1 #drp-ovrflw1 li a {
    padding: 10px 8px;
    margin: 0px;
}
@media only screen and (max-width: 740px){	
.srch-drp-list {
    width: 20% !important;
}
}
@media only screen and (max-width: 400px){	
.srch-drp-list {
    width: 33.33% !important;
}
}

</style>

<script type="text/javascript" src="https://inout-searchengine-demo.inoutscripts.net/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(".ad-srch-ic").click(function(){
		$(".add-srch-drp").toggleClass("active");
	});	
	$(".srch-drp-list").click(function(){
		$(".add-srch-drp").removeClass("active");
	});







function Determine(loopvalue,enginecount,engine)
{



	
	for(i=0;i<enginecount;i++) 
	{
		$("#engine"+i).removeClass("active");
		//$("#cat"+i).addClass("inactive_cat");
	}

document.getElementById('type').value=engine;
$("#engine"+loopvalue).addClass("active");

	//$("#cat"+loopvalue).removeClass("inactive_cat");
	//$("#cat"+loopvalue).addClass("active_cat");
	//$('.cata_full').fadeOut(200);
	
}
//$(document).ready(function() {
	//$("#cat0").removeClass("inactive_cat");
	//$("#cat0").addClass("active_cat");
//});

</script>




			 <div class="fullwidth brd-bt mb-4 pb-4">
			    <div class="add-srch-div">
<input type="hidden" id="type" name="type" value="Web">
				   <!--  <img class="add-srch-logo" src="https://inout-searchengine-demo.inoutscripts.net/images/search-engine-black.png" alt="logo"> -->
				     <img class="add-srch-logo" src="https://inout-searchengine-demo.inoutscripts.net/userdata/webmasterlogo.jpeg" alt="logo">
					<div class="ad-srch-bx position-relative">
					<div class="ad-srch-inpt-out">
<form name="searchform" id="searchform" enctype="multipart/form-data" method="post"  action="https://inout-searchengine-demo.inoutscripts.net/index.php?page=search/redir">
					<input type="text" class="add-srch-inpt" name="search" id="search" value="" onKeyUp="javascript:keymovement(event,this.value);">

					</div>

					<div class="ad-srch-bt-out">
					<button class="add-src-bt" type="submit">
					    <img src="https://inout-searchengine-demo.inoutscripts.net/images/search-grn.png" alt="serach" width="22px">
					</button>
					</div>
					    <span class="position-absolute ad-srch-ic"><i class="fas fa-globe ad-srch-ic-st"></i></span>
					</div>
					<div class="add-srch-drp position-absolute">
                                        					    <div class="srch-drp-list" id="engine0">
						   <a id="Web_link" href="javascript:Determine(0,21,'Web');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Web</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine1">
						   <a id="News_link" href="javascript:Determine(1,21,'News');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">News</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine2">
						   <a id="Images_link" href="javascript:Determine(2,21,'Images');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Image</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine3">
						   <a id="Videos_link" href="javascript:Determine(3,21,'Videos');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Video</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine4">
						   <a id="Maps_link" href="javascript:Determine(4,21,'Maps');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Maps</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine5">
						   <a id="iTunes_link" href="javascript:Determine(5,21,'iTunes');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">iTunes</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine6">
						   <a id="Twitter_link" href="javascript:Determine(6,21,'Twitter');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Twitter</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine7">
						   <a id="Articles Search_link" href="javascript:Determine(7,21,'Articles Search');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Articles Search</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine8">
						   <a id="Products_link" href="javascript:Determine(8,21,'Products');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Products</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine9">
						   <a id="Prodotti_link" href="javascript:Determine(9,21,'Prodotti');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Prodotti</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine10">
						   <a id="planet4d_link" href="javascript:Determine(10,21,'planet4d');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">planet4d</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine11">
						   <a id="Fillme_link" href="javascript:Determine(11,21,'Fillme');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Fillme</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine12">
						   <a id="Fillme load board_link" href="javascript:Determine(12,21,'Fillme load board');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Fillme load board</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine13">
						   <a id="Bio_link" href="javascript:Determine(13,21,'Bio');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Bio</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine14">
						   <a id="Fresh_link" href="javascript:Determine(14,21,'Fresh');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Fresh</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine15">
						   <a id="RssEngine_link" href="javascript:Determine(15,21,'RssEngine');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">RssEngine</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine16">
						   <a id="Jobs_link" href="javascript:Determine(16,21,'Jobs');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Jobs</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine17">
						   <a id="Jobs2_link" href="javascript:Determine(17,21,'Jobs2');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Jobs2</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine18">
						   <a id="Poetry_link" href="javascript:Determine(18,21,'Poetry');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Poetry</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine19">
						   <a id="Poetry Contests_link" href="javascript:Determine(19,21,'Poetry Contests');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Poetry Contests</p></a>


						</div>
                                          					    <div class="srch-drp-list" id="engine20">
						   <a id="Epoch Online_link" href="javascript:Determine(20,21,'Epoch Online');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Epoch Online</p></a>


						</div>
                                          

</form>
	</div>
				</div>
Login

Add Search Box to Your Site

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.

Email this link found in Inout search engine v10.
