يعد مربع البحث أداة لا غنى عنها في كل مدونة، فهو سيساعد القراء في الحصول على مزيد من المعلومات حول مدونتك. تحتوي معظم القوالب بالفعل على مربع بحث مضمن، ولكن إذا كنت تريد إنشاء مربع بحث واحد، فإن هذه المقالة تعد خيارًا رائعًا.
طريقة التركيب مربع بحث بسيط وجميل لموقع مدونتك.
قمت بتسجيل الدخول إلى مدونة بلوجر
ثم قم بإدراج الكود أدناه في أداة HTML أو في أي مكان تريده أن يظهر في قسم تحرير HTML .
<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text {font-size: 14px;color: #ddd;border-width: 0;background: transparent;padding:10px;width:100%}
#search-box input[type="text"]{width: 90%;padding: 11px 0 12px 1em;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 42px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 42px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='ابحث في الموقع' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
معاينة
ثم احفظ وشاهد النتائج. لاحظ أنه يمكنك ضبط CSS بشكل أكبر ليتوافق مع العرض الموجود على مدونتك.
