مربعات بحث متنوعة للبلوجر

عمليات البحث مهمة جدا لموقعك حيث تساعد زوارك و تسهل عليهم طرق الكشف عن المواضيع التي تهمهم , و يمكنهم بسهولة معرفتها , و بذلك تزداد ثقة زوارك لموقعك .

يوجد عدة نماذج متنوعة و ببساطة تامة بإمكانك و ضع الأكواد بواسطة لوحة التحكم في التخطيط و اختيار الأداة التي تناسبك .

1. مربع البحث الأول :

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text"/>
<input id="search-btn" value="Search" type="submit"/>

</form>

 الجزء الملون بالأحمر قابل للتغيير بما يناسبك و حسب رغبتك .

2.مربع البحث الثاني :

 

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #585858; border: 1px solid #E0ECF8"/>
<input id="search-btn" value="Search" type="submit"/>

</form>

  الجزء الملون بالأحمر قابل للتغيير بما يناسبك و حسب رغبتك .

3.  مربع البحث الثالث :

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" style="background: #A9D0F5; border: 1px solid #2E2EFE"/>
<input id="search-btn" value="Search" type="submit" style="background: #2E2EFE; border: 1px outset #01DF01; color: #ffffff; font-weight: bold;"/>
</form>

  الجزء الملون بالأحمر قابل للتغيير بما يناسبك و حسب رغبتك .

4.  مربع البحث الرابع :

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="cari di blog ini..."/>
<input id="search-btn" value="Search" type="submit"/>
</form>

الجزء الملون بالأحمر قابل للتغيير بما يناسبك و حسب رغبتك .

5.  مربع البحث الخامس :

<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="search-box" name="q" size="25" type="text" value="Cari artikel disini..."/>
<input id="search-btn" value="Search" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilinclga4t_lCjbI70xYR_A1rpDBBDLS14vzUvbe2tCI77yeNWqPjQwFiumYi4OZsi9_-LR040UJp_8xYJo4qSG2mQkSpDSIUw5uc3-gRAv_k9QBMoaEJ6DWwY6RE3VnjaoCDrhXHZ037t/s1600/1zehw2f_th.jpg.png" style="margin-left: 5px; margin: 3px 0 0 5px;"/>
</form>

اذا واجهتكم اي مشاكل اكتبها في رد وان شاء الله نحلها مع بعض ، ولمن لا يعرف كيفيه اضافه اكواد html الي المدونه يتفضل بالضغط هنــا .

الأقسام: أدوات بلوجر