Croinn - 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.

<link href="https://croinn.com/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://croinn.com/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://croinn.com/images/search-engine-black.png" alt="logo"> -->
				     <img class="add-srch-logo" src="https://croinn.com/userdata/webmasterlogo.jpg" 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://croinn.com/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://croinn.com/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,14,'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="Images_link" href="javascript:Determine(1,14,'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="engine2">
						   <a id="Videos_link" href="javascript:Determine(2,14,'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="engine3">
						   <a id="News_link" href="javascript:Determine(3,14,'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="engine4">
						   <a id="Sports_link" href="javascript:Determine(4,14,'Sports');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">Sports</p></a>


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


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


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


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


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


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


						</div>
                                          					    <div class="srch-drp-list" id="engine11">
						   <a id="Twitter_link" href="javascript:Determine(11,14,'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="engine12">
						   <a id="iTunes_link" href="javascript:Determine(12,14,'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="engine13">
						   <a id="RSS_link" href="javascript:Determine(13,14,'RSS');"> <div class="srch-drp-list-spn">
                                                     <i class="fas fa-futbol"></i>
                                                       </div>
					
<p class="srch-drp-list-txt">RSS</p></a>


						</div>
                                          

</form>
	</div>
				</div>
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 .

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 .
