Like And Win VIP Hack
Click Like To WIN 30 Day VIP Hack

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

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

Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0
 

بسم الله الرحمن الرحيم

قالب,معرب,مطور,مدونات,بلوجر,تحميل,اضافات,معاينة,صور,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; }

دمتم بود .

Share Now And Win Free ViP HackShare on Facebook0Google+0Tweet about this on Twitter0

0 Comments ON " كود اضافة البحث بشكل جديد واحترافيه لمدونات بلوجر... "
leave a response

*

Copyright © All Rights Reserved 2014→2017 To Add-Fast.CoM