{formstart:webmastertools:{url:(search/generatesearchboxcode)}:post}

{cfn:getmessage(628)}

{cfn:getmessage(627)}

{cfn:getmessage(81)} {cfn:getmessage(79)}

{if($choose_engine_status==1)}

{cfn:getmessage(82)}

{loopstart:engines:100}

{cfn:getenginename($engines[0])}

{loopend:engines}

{endif}

{formend:webmastertools} {if($displaystyle==1)} {formstart:searchform:{url:(search/redir)}:post}

{loopstart:finalenginearray:100}

{cfn:getenginename($finalenginearray[0])}

{loopend:finalenginearray} {formend:searchform}

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="{$imagepath}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="{$imagepath}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="{$imagepath}images/search-engine-black.png" alt="logo"> -->
				     <img class="add-srch-logo" src="{$logopath}" alt="logo">
					<div class="ad-srch-bx position-relative">
					<div class="ad-srch-inpt-out">
{formstart:searchform:{url:(search/redir)}:post}
					<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="{$imagepath}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">
                                        {loopstart:finalenginearray:100}
					    <div class="srch-drp-list" id="engine{loop:finalenginearray}">
						   <a id="{$finalenginearray[1]}_link" href="javascript:Determine({loop:finalenginearray},{$enginecount},'{$finalenginearray[1]}');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">{cfn:getenginename($finalenginearray[0])}</p></a>


						</div>
                                          {loopend:finalenginearray}


{formend:searchform}
	</div>
				</div>

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="{$imagepath}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="{$imagepath}js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="{$imagepath}js/fontawesome.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");



	});

</script>

<script type="text/javascript">
function Determine(engine,loopvalue,enginecount)
{
	
	//for(i=0;i<enginecount;i++) 
	//{
		//$("#li"+i).removeClass("active_cat");
		//$("#li"+i).addClass("inactive_cat");
	//}
	//$("#li"+loopvalue).removeClass("inactive_cat");
	//$("#li"+loopvalue).addClass("active_cat");
	document.getElementById('type').value=engine;
}
$(document).ready(function() {
	//$("#li0").removeClass("inactive_cat");
	//$("#li0").addClass("active_cat");
});

</script>



{formstart:searchform:{url:(search/redir)}:post}

			  <div class="fullwidth brd-bt mb-4 pb-4">
			    <div class="add-srch-div">
				    <img class="add-srch-logo" src="{$imagepath}images/search-engine-black.png" alt="logo">
					<div class="fullwidth float-left position-relative">
					    <nav class="head-drp-main1 active">
  <ul id="head-nav1">
 {loopstart:finalenginearray:100}
<li><a href="javascript:Determine('{$finalenginearray[1]}','{loop:finalenginearray}',{$enginecount});"><i class="fas fa-futbol srch-lst-ic"></i>{cfn:getenginename($finalenginearray[0])}</a></li>

 {loopend:finalenginearray} 

  <li class="more-bt-drp1"> <span style="margin: 3px 0px;"><i class="fas fa-ellipsis-h  srch-lst-ic"></i>More</span>
    <ul id="drp-ovrflw1">
    </ul>
  </li>
</ul>
</nav>
					</div>

					<div class="ad-srch-bx position-relative">
					<div class="ad-srch-inpt-out">
					<input type="text" class="add-srch-inpt" id="search" name="search">
<input type="hidden" id="type" name="type" value="Web">

					</div>
					
					<div class="ad-srch-bt-out">
					<button class="add-src-bt" type="submit">
					    <img src="{$imagepath}images/search-grn.png" alt="serach" width="22px">
					</button>
					</div>
					</div>
					
				</div>
			 </div>
			 {formend:searchform}

		</div>
					</div>
					
				</div>
			 </div>


		</div>
					</div>
					
				</div>
			 </div>
<script>
window.onresize = navigationResize;
navigationResize();

function navigationResize() {  
  $('#head-nav1 li.more-bt-drp1').before($('#drp-ovrflw1 > li'));
  
  var $navItemMore = $('#head-nav1 > li.more-bt-drp1'),
  		$navItems = $('#head-nav1 > li:not(.more-bt-drp1)'),
      navItemMoreWidth = navItemWidth = $navItemMore.width(),
      windowWidth = $('#head-nav1').width(),
      navItemMoreLeft, offset, navOverflowWidth;
  
  $navItems.each(function() {
    navItemWidth += $(this).width();
  });
  
  navItemWidth > windowWidth ? $navItemMore.show() : $navItemMore.hide();
    
  while (navItemWidth > windowWidth) {
    navItemWidth -= $navItems.last().width();
    $navItems.last().prependTo('#drp-ovrflw1');
    $navItems.splice(-1,1);
  }
  
  navItemMoreLeft = $('#head-nav1 .more-bt-drp1').offset().left;
  navOverflowWidth = $('#drp-ovrflw1').width();  
  offset = navItemMoreLeft + navItemMoreWidth - navOverflowWidth;
    

}
</script>