كود البحث فى موقعك بشكل مميز

اضافة كود خدمة البحث فى موقعك بشكل مميز

1- الكود الاول تضع فى المكان الذى تريد ان يظهر بيه

<form method="get" id="search" action="<?php bloginfo('url'); ?>/">
  <input type="text" required  <?php the_search_query(); ?> name="s" id="s" onClick="this.value=''" onBlur="this.value=!this.value?' ابحث هنا .... ':this.value;"/>
</form>

2- الكود الثانى تضعه فى ملف CSS3 فى موقعك

/* search */
form {
	position: relative;
	display: inline-block;
	margin: 20px auto;
}
input {
	outline: none
}
input[type="text"] {
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	background: white;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	height: 20px;
	border: 1px solid rgba(0,0,0,0.2);
	width: 170px;

	padding: 3px 23px 3px 8px;
}
input[type="reset"] {
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAGFBMVEUAAAC/v7+/v7+/v7+/v7+/v7+/v7+/v7+hAPa4AAAAB3RSTlMAQNCwkKDgPaU3lgAAAEZJREFUeNplj9EKACAIA2dm+/8/bkj4sI6wDsIpRCRFBprNxx4bD12LrwRSDxRZkCcoCqVDIW1v+9Q+W6sOOhNkY9iQtsIFhO0DtcbsWN0AAAAASUVORK5CYII=');
	width: 14px;
	height: 14px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	border: 0;
	text-indent: -999px;
	position: absolute;
	right: 8px;
	top: 7px;
	cursor: pointer;
}
 input[type="text"]:invalid {
 outline: none;
 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
 background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAIVBMVEW/v7+/v78AAAC/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v79QUkolAAAAC3RSTlOLYAAJeoMjRhpOcbsbtd4AAABJSURBVHjaVc1JDsAgDATB9uAF8v8Hx0QcSN9KssZI5eClDj18PRsFlmlQDcfUGd6A3EgYP1xncQ+sa5qYOk9jRQt1Y0izhU5bL2o2AW3ZQKeJAAAAAElFTkSuQmCC) 10px 6px no-repeat;
}
input[type="text"]:invalid + input[type="reset"] {
 visibility:hidden;
}
/*End search */