كيفية عمل البحث فورم بتقنية CSS3 – بشكل جميل – شرح كاملة لـ WordPress – vBulletin

السلام عليكم ورحمة الله وبركاته – بسم الله الرحمن الرحيم

اخباركم يالغاليين ان شاء الله تكون بخير دايماً ، وصحة يا رب

دلوقتي ستقدم الشرح كيفية عمل البحث فورم بتقنية CSS3

1. انسخ الكود التالي ثم الصق فى اخر قالب الهيدر او اى مكان تريده

<form action="search.php?do=process" method="get">
<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<p><input type="text" name="query" placeholder="ادخل كلمات البحث" id="search" required></p>
<p><input type="submit" value="ابحث" id="submit"></p>
</form>

2. انسخ اكواد CSS التالي ثم الصق فى تعاريف CSS الإضافية

/* مربع البحث */
.form-wrapper {
width:450px; /* مقاس العرض */
padding:8px;
margin:20px auto;
overflow:hidden;
background:#f3f3f3; /* لون خلفية */
/* منحني */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
/* ظل الخلفية */
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 15px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}

.form-wrapper p {
margin:0px;
padding:0px;
}

/* كتابة البحث */
.form-wrapper #search {
width:330px; /* مقاس العرض */
height:20px; /* مقاس الطول */
padding:10px 5px;
float:right;
font:12pt Tahoma; /* نوع وحجم الخط */
border:1px solid #bababa; /* حدود الخلفية */
text-align:right;
background:#e7e7e7; /* لون الخلفية */
color:#999; /* لون الخط */
/* عمل ظل الخلفية داخلي */
-moz-box-shadow: inset 0px 0px 10px 0px #d0d0d0;
-webkit-box-shadow: inset 0px 0px 15px 0px #d0d0d0;
box-shadow: inset 0px 0px 10px 0px #d0d0d0;
}

/* كتابة البحث عند الضغط بالماوس */
.form-wrapper #search:focus {
outline:0;
border-color:#ccc;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}

/* زر ابحث */
.form-wrapper #submit {
float:left;
width:100px; /* مقاس العرض */
height:42px; /* مقاس الطول */
padding:0;
cursor:pointer;
font:bold 12pt Arial; /* نوع وحجم الخط */
color:#fafafa; /* لون الخط */
text-transform:uppercase;
background:#af3131; /* لون الخلفية */
border:1px solid #932929; /* حدود الخلفية */
}

/* زر ابحث عند الضغط بالماوس */
.form-wrapper #submit:hover, .form-wrapper #submit:focus {
background-color: #932929; /* لون الخلفية */
border:1px solid #af3131; /* حدود الخليفة */
}

.form-wrapper #submit:active {
-moz-box-shadow: inset 0px 0px 10px 0px #320f0f;
-webkit-box-shadow: inset 0px 0px 15px 0px #320f0f;
box-shadow: inset 0px 0px 10px 0px #320f0f;
}

1. انسخ اكواد التالي ثم الصق اخر فى ملف Header.php او اى مكان تريده

<form action="<?php bloginfo('siteurl'); ?>"  id="searchform" method="get">
<input type="text" name="s" id="search" placeholder="ادخل كلمات البحث" required>
<input type="submit" value="go" id="submit">
</form>

2. انسخ اكواد CSS التالي ثم الصق اخر فى ملف style.css

/* مربع البحث */
.form-wrapper {
width:450px; /* مقاس العرض */
padding:8px;
margin:20px auto;
overflow:hidden;
background:#f3f3f3; /* لون خلفية */
/* منحني */
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
/* ظل الخلفية */
-moz-box-shadow: 0px 0px 10px 0px #000;
-webkit-box-shadow: 0px 0px 15px 0px #000;
box-shadow: 0px 0px 10px 0px #000;
}

.form-wrapper p {
margin:0px;
padding:0px;
}

/* كتابة البحث */
.form-wrapper #search {
width:330px; /* مقاس العرض */
height:20px; /* مقاس الطول */
padding:10px 5px;
float:right;
font:12pt Tahoma; /* نوع وحجم الخط */
border:1px solid #bababa; /* حدود الخلفية */
text-align:right;
background:#e7e7e7; /* لون الخلفية */
color:#999; /* لون الخط */
/* عمل ظل الخلفية داخلي */
-moz-box-shadow: inset 0px 0px 10px 0px #d0d0d0;
-webkit-box-shadow: inset 0px 0px 15px 0px #d0d0d0;
box-shadow: inset 0px 0px 10px 0px #d0d0d0;
}

/* كتابة البحث عند الضغط بالماوس */
.form-wrapper #search:focus {
outline:0;
border-color:#ccc;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}

/* زر ابحث */
.form-wrapper #submit {
float:left;
width:100px; /* مقاس العرض */
height:42px; /* مقاس الطول */
padding:0;
cursor:pointer;
font:bold 12pt Arial; /* نوع وحجم الخط */
color:#fafafa; /* لون الخط */
text-transform:uppercase;
background:#af3131; /* لون الخلفية */
border:1px solid #932929; /* حدود الخلفية */
}

/* زر ابحث عند الضغط بالماوس */
.form-wrapper #submit:hover, .form-wrapper #submit:focus {
background-color: #932929; /* لون الخلفية */
border:1px solid #af3131; /* حدود الخليفة */
}

.form-wrapper #submit:active {
-moz-box-shadow: inset 0px 0px 10px 0px #320f0f;
-webkit-box-shadow: inset 0px 0px 15px 0px #320f0f;
box-shadow: inset 0px 0px 10px 0px #320f0f;
}

ااتمنى اكون وفقت فى شرح هذا الدرس بطريقة مبسطه ، فان اصبت فمن الله وان أخطأت فمن نفسي والشيطان .

وانتظروني مع المفاجئات القادمه باذن الله راح تعجبكم

دمتم بخير دائماً وأبدا ، أخوكم ومحبكم في الله أحمد حسين