كود اضافة البحث بشكل جديد واحترافيه لمدونات بلوجر
بسم الله الرحمن الرحيم
مرحبا بكم في مدونة مسطرة ... و موعدنا اليوم مع درس من دروس بلوجر و هو كود اضافة البحث بشكل جديد واحترافيه لمدونات بلوجر
اثناء تجوالي اليومي على المواقع الأجنبية وجدت اداة جميلة جدا تستخدم خوالص الـ css3 لتقدم اضافة كود بحث للمدونة في منتهى الجمال والاحترافيه معنى ذلك ان موضوع اليوم سيكون عن كود البحث لمدونات بلوجر ...
قبل أن اسرد لكم الكود أحب ان اشارككم خاطره جميله وهي بخصوص العالم الغربي .. اجمل مافي العالم الغربي هو الشغف .. في حال نزول موقع فيس بوك فورا وجدنا قالب فيس بوك جاهز لمدونات البلوجر والووردبريس اضافة الى سكربتات مواقع وصفحات اجتماعية عديدة .. على نفس النهج كان حال مواقع اخرى مثل التويتر واليوتيوب وغيرها .. ولعل هذه الاضافة هي اكبر مثال اشرحه فاضافة اليوم هي عبارة عن هاك البحث المستخدم في موقع ابل ماكنتوش الرسمي (موقع الاي فون والاي باد ومتصفح السفاري ونظام التشغيل ماك ) يمكنك مشاهدة الإضافة على الطبيعه من خلال موقعهم APPLE .
مميزات كود البحث :
- البحث مباشرة في المدونة دون الحاجة الى موقع جوجل في البحث .
- تظهر نتائج البحث على طريقة ظهور أقسام المدونة .
- توفر الوقت والجهد للزوار خصوصا في المدونات متشبعة المحتوى .
- تعطي مظهر جمالي جدا لمدونتك .
- قابلة للتخصيص بشكل كامل " تعديل احجام - تغيير ألوان - تغيير مواضع " وما الى ذلك .
طريقة تركيب الاضافة :
طريقة تركيب الاضافة ستكون على جزئين الأول اضافة جافا سكربت عادية والاخرى هي خواص الـ css3 .
نبدأ بعون الله ..
قم بتركيب الكود التالي في المدونة عن طريقة اضافة HTML/JavaScript .
كود بلغة HTML:<form method="get" action="/search" id="search"> <input name="q" type="text" size="40" placeholder="ابحث في هذه المدونة" /> </form>
ثانياً واخيراً قم بالبحث عن الكود التالي :
كود بلغة HTML :
]]></b:skin>
وقم بوضع أحد الأكواد الثلاثة التاليه فوقه مباشرة ..
- الكود الأول : لون غامق وعند الضغط عليه يتوسع ويتغير الى أبيض .
- صورة توضيحيه .
الكود الخاص بها من هنا
كود بلغة HTML:#search { } #search input[type="text"] { background: url(search-white.png) no-repeat 10px 6px #444; border: 0 none; font: bold 12px Arial,Helvetica,Sans-serif; color: #d7d7d7; width:150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } #search input[type="text"]:focus { background: url(search-dark.png) no-repeat 10px 6px #fcfcfc; color: #6a6f75; width: 200px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); }
- الكود الثاني : لون غامق قبل وبعد الفتح .
- صورة توضيحيه .
الكود الخاص بها من هنا
كود بلغة HTML:#search { } #search input[type="text"] { background: url(search-dark.png) no-repeat 10px 6px #444; border: 0 none; font: bold 12px Arial,Helvetica,Sans-serif; color: #777; width: 150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } #search input[type="text"]:focus { width: 200px; }
- الكود الاخير : لونه أبيض قبل وبعد .
- صورة توضيحية .
الكود الخاص بها من هنا
كود بلغة HTML:#search { } #search input[type="text"] { background: url(search-white.png) no-repeat 10px 6px #fcfcfc; border: 1px solid #d1d1d1; font: bold 12px Arial,Helvetica,Sans-serif; color: #bebebe; width: 150px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } #search input[type="text"]:focus { width: 200px; }
دمتم بود .
0 الرد على " كود اضافة البحث بشكل جديد واحترافيه لمدونات بلوجر"
إرسال تعليق