More

كود اضافة البحث بشكل جديد واحترافيه لمدونات بلوجر

" Here you can search for everything you want and you will find it as soon as possible "
بسم الله الرحمن الرحيم

قالب,معرب,مطور,مدونات,بلوجر,تحميل,اضافات,معاينة,صور,blogger,template,addition,فيسبوك,تويتر,facebook,الربح من الانترنت,جوجل,ادسنس,فيديو,شرح,طريقة,تقنية,معلومات,محترف,مدونة,طريقة,تغير,شكل,الماوس,مدونة,بلوجر,كود ,واحترافيه ,البحث ,search

مرحبا بكم في مدونة مسطرة … و موعدنا اليوم مع درس من دروس بلوجر و هو كود اضافة البحث بشكل جديد واحترافيه لمدونات بلوجر

كود اضافة البحث بشكل جديد واحترافيه لمدونات بلوجر

اثناء تجوالي اليومي على المواقع الأجنبية وجدت اداة جميلة جدا تستخدم خوالص الـ 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; }

دمتم بود .
You may also like  10 طرق لخسارة الوزن بدون ريجيم
Show More
" Here you can search for everything you want and you will find it as soon as possible "

Scorpion

Welcome To The Biggest Site For Android Games And Apps You Can Find New Modded Games And Game Cheat & CrossFire Hacks You Can Find Daily Update Only Here Don’t Forget To Like Page in Facebook And Subscribe To Blog

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Close

Adblock Detected

Please consider supporting us by disabling your ad blocker