افزونه جستجو

[maldo 1]

سلام. ممنون از سایت خوبتون .

میخواستم بدونم امکانش هست با افزونه یا هر چیز دیگری یه نوار جستجو به شکلی که در این اول این سایت هست در سایت خودم ایجاد کنم؟ مهم برام اینکه که پشت نوار جستجو یه بکگراند به این شکل قرار بگیره: 

این سایت

[estedadrap 4]

در 45 دقیقه قبل، maldo گفته است :

سلام. ممنون از سایت خوبتون .

میخواستم بدونم امکانش هست با افزونه یا هر چیز دیگری یه نوار جستجو به شکلی که در این اول این سایت هست در سایت خودم ایجاد کنم؟ مهم برام اینکه که پشت نوار جستجو یه بکگراند به این شکل قرار بگیره: 

این سایت

سلام

دوست عزیز این باکس رو خیلی راحت میشه طراحی کرد

فقط کافیه یمقدار به css تسلط داشته باشی

<div class="bglayer" id="bglayer"> 
  
<img src="اینجا عکس بکگراند موردنظر رو میزاری"/>
     
  این استایل ها رو بده به عکس
  <style>
     transform: scale(1.2)!important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width:100%;
    height:100%;
  </style>
</div>
	<?php get_header(); ?>

< اینجا باکس سرچ رو قرار میدی و بهش پوزیشن absolute میدی 
       left :50%
       top:50%
       
       
       >
  

  و مابقی ماجرا رو طراحی میکنی
  

من فقط برای بهتر متوجه شدنت کد بالارو نوشتم

درواقع اصل کار یه همچین چیزی هست

اما بازم بدید به یک طراح براتون انجام بده

[asadiy4n 2807]

در 3 ساعت قبل، maldo گفته است :

سلام. ممنون از سایت خوبتون .

میخواستم بدونم امکانش هست با افزونه یا هر چیز دیگری یه نوار جستجو به شکلی که در این اول این سایت هست در سایت خودم ایجاد کنم؟ مهم برام اینکه که پشت نوار جستجو یه بکگراند به این شکل قرار بگیره: 

این سایت

نیاز به افزونه نیست به این شکل انجام بدید

در HTML

<div id="container">
	<div id="searchbar">
		<form action="/" method="get">
		<label for="search"><?php echo home_url( '/' ); ?></label>
		<input type="text" name="s" id="topics" style="float:left" placeholder="Search …" value="<?php the_search_query(); ?>" />
		<input id="btn"  alt="Search" style="float:left" />
		</form>
	</div>
</div>

CSS

#searchbar{
  width:540px;
  height:50px; 
  background:#718fff; 
  border-radius:5px;
  border:3px solid #718fff; 
  box-shadow: 0 0 0pt 10pt rgba(255,255,255,.5);
  margin:auto;
}

#container { 
  background:url('https://webdev.imgix.net/backdrop-filter/hero.jpg');
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover;
width:100%; 
height:300px; position:relative; margin:0 auto; 
padding-top:100px;
}
input { 
  width:400px ; 
  height:30px; 
  font-size:20px; 
  outline:none; 
  padding:10px;
  border:none; 
  background:white
}
#btn {
  background:#4e74ff; 
  width:100px; 
  height:30px; 
  padding:10px; 
  color:white; 
  font-family:"helvetica";
  cursor:pointer;
  text-align:center;
  line-height:30px;
}

 

ویرایش شده اردیبهشت 99 توسط asadiy4n