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

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

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

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

شرح كيفية تركيب فى منتديات vBulletin

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;
}

شرح كيفية تركيب فى المدونة WordPress

<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;
}

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

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

 

يسمح لكم بنقل الموضوع بشرط ذكر المصدر : كيفية عمل البحث فورم بتقنية CSS3 – بشكل جميل – شرح كاملة لـ WordPress – vBulletin | TATWEERWEB

 

ساهم في نشر الموضوع ولك جزيل الشكر !

أضف تعليقك عن طريق الفيسبوك :

ثغرات اسكربتات و منتديات