السلام عليكم
تابعتم في الدرس السابق تصميم لمحرك بحث بسيط بالفوتوشوب
درس اليوم هو تكويد هذا التصميم و تركيبه على بلوجر أو وردبريس او أي موقع
أول هذا هو محرك البحث الدي تم تصميمه في الدرس السابق
رابط الصورة :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUkt1RtfecvD1TFBBgtApgHBDMM235Z2Jr86fWI_wyloGE4VOQI7VaavTh70Gk7h-BAnpCLGjhuumYbgljzkZheBknIy92I-r_mSuZAnnQquaB9jUTBmcZdOC01QI43pdlnpZU28vcQXBr/s1600/img.png
نبدئ على بركت لله
في منطقة Body نقوم بإنشاء صندوق Div و نعطيه إيدي بإسم searchbox
داخل Div نقوم بإنشاء فورم و نعطيه إيدي بإسم searchform
داخل الفورم نقوم بإنشاء مدخلين:
1- مدخل من نوع Text و له إيدي بإسم s
2- مدخل من نوع submit و له إيدي بإسم sbutton و قيمة فارغة value=" "
لنحصل على هذا الكود في الإخير :
و في المنطقة Head سوف نضع هذا الكود مع الشرح
- ملاحظات
-- في خلفية searchbox نقوم بوضع رابط صورة محرك بحث الذي تم تصميمه بدل img.png
-- إرتفاع و عرض الخلفية هو نفسه إرتفاع و عرض الصورة
-- no-repeat تعني دون تكرار الخلفية
نمر الأن لطريقة تركيب
طريقة التركيب سهلة نقوم بنسخ كود Css السابقة و كود html
على الشكل التالي
ثم ندهب إلى إضافة عناصر HTML/JS بالنسب لكل من البلوجر و ووردبريس و نقوم وضع الكود و مبروك عليك محرك بحث
و هذا مثال له في مدونة أدوات الويب
المشاركات
