الأربعاء، 8 أكتوبر 2014

اضافه مربع بحث انيق لكل مدونة css

السلام عليكم
اضافه مربع بحث انيق لكل مدونة css
اضافه مربع بحث انيق لكل مدونة css
مربع بحث صغير و انيق ويجذب الاشخاص لبحثعن موضوع معين بالفعل فهو جذاب و لا يحمل اى ملف جافا سكربت او صورة ليصبح هكذا خفيف و بسيط ويستحق ان يكون فى مدونتك

طريقة التركيب
نذهب الى لوحة تحكم المدونة ← التخطيط ← اضافة اداة جديدة HTML/JavaScript
ونضع هذا الكود
<form id="abt-css3-search" action="/search" method="get">
<input id="search" name="q" type="text" placeholder="اكتب ماتريد البحث عنو" />
<input id="submit" type="submit" value="Search" />
</form>
<style>
#abt-css3-search{background:#5cd1ff;background-image:0;-moz-border-radius:35px;border-radius:35px;width:270px;height:35px;overflow:hidden;border-color:#c4d9df #a4c3ca #83afb7;border-style:solid;border-width:1px;padding:10px}
#search,#submit{float:left}
#search{height:23px;width:180px;border:1px solid #a4c3ca;font:normal 13px 'trebuchet MS', arial, helvetica;background:#f1f1f1;-moz-border-radius:50px 3px 3px 50px;border-radius:50px 3px 3px 50px;-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);box-shadow:0 1px 3px rgba(0,0,0,0.25) inset, 0 1px 0 rgba(255,255,255,1);padding:5px 9px}
#submit{background:#ff5c80;background-image:0;-moz-border-radius:3px 50px 50px 3px;border-radius:3px 50px 50px 3px;-moz-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;-webkit-box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;box-shadow:0 0 1px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.3) inset;height:35px;width:60px;cursor:pointer;font:bold 14px Arial, Helvetica;color:#23441e;border-color:#7eba7c #578e57 #447d43;border-style:solid;border-width:1px;margin:0 0 0 10px;padding:0}
#submit:hover{background:#ffdc5c;background-image:0}
#submit:active{background:#95d788;outline:none;-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset}
#submit::-moz-focus-inner{border:none}
#search.placeholder{color:#9c9c9c!important;font-style:italic}
#search:focus{background:#fff;outline:none;border-color:#8badb4}
#search::-webkit-input-placeholder,#search:-moz-placeholder{color:#9c9c9c;font-style:italic}
</style>

0 التعليقات:

إرسال تعليق

راسلنا

تواصل معنا

هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق.

عنوان الشركة:

88000 ـ اسم المدينة، اسم الشارع، المكان 232

أوقات العمل:

من الإثنين إلى الجمعة ـ من 9 صـ إلى 4 مـ

الهاتف:

595 12 34 567