موضوعنا سيكون عن أدة البحث على مونات بلوجر
نتمنى من الله لنا ولكم التوفيق ويرفع الله من شأننا جميعاً نحن العرب والمسلمين في كل مكان
وكم تمنيت أن يكون للعرب والمسلمين السبق في كل شئ ولكن للأسف..!!عموماً هناك بحر من الكلام عن هذا الموضوع وليس هذا مكانه المناسب ولندخل في موضوعنا
إضافة كود البحث الخاض بموقع ابل لمدونتك
يمكنك مشاهدة الإضافة على الطبيعه من خلال موقعهم
APPLE .
مميزات كود البحث :
البحث مباشرة في المدونة دون الحاجة الى موقع جوجل في البحث .
تظهر نتائج البحث على طريقة ظهور أقسام المدونة .
توفر الوقت والجهد للزوار خصوصا في المدونات متشبعة المحتوى .
تعطي مظهر جمالي جدا لمدونتك .
قابلة للتخصيص بشكل كامل " تعديل احجام - تغيير ألوان - تغيير مواضع " وما الى ذلك .
طريقة تركيب الاضافة :
طريقة تركيب الاضافة ستكون على جزئين الأول اضافة جافا سكربت عادية والاخرى هي خواص الـ css3 .
نبدأ بعون الله ..
قم بتركيب الكود التالي في المدونة عن طريقة اضافة HTML/JavaScript .
كود بلغة HTML:
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="ابحث في هذه المدونة" />
</form>
ثانياً واخيراً قم بالبحث عن الكود التالي :
كود بلغة HTML:
]]></b:skin>
وقم بوضع أحد الأكواد الثلاثة التاليه فوقه مباشرة ..
ركزوا الله يرضى عليكم واحد فقط من الثلاث الأكواد الثلاثة اللي تحت مو يجي واحد يحط الثلاثة مع بعض .
- الكود الأول : لون غامق وعند الضغط عليه يتوسع ويتغير الى أبيض .
- صورة توضيحيه .
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRItZ6ND04hQ2_HBIb3JI6_ZBjbhqFOdxp61-mD0uJy_aBlP9Fv1F-XnkF2yDjf32kNRSDX1LAF_1GnjuUK92LI_jUIgSz44VZYahxP9bBV1pCw9JVBaHoS8cZW3ddwLYR6_QjpFXpTrE/s1600/search-apple-like.jpg
الكود الخاص بها من هنا
كود بلغة 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);
}
- الكود الثاني : لون غامق قبل وبعد الفتح .
- صورة توضيحيه .
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWH8VWizQwpDKWQtbtt5btYIu-XHdWUCGY9VWR1MVsR2Yxw1i-NEZ-g2Vgb8gvlAWQcxZvvikMbTkGvv8a16rQaYQef7lTVf-MNFdpv0OxnqVMMXPQ9nYyqRfSoeZQbDswd_iczRVbVMc/s1600/search-box-dark.jpg
الكود الخاص بها من هنا
كود بلغة 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;
}
- الكود الاخير : لونه أبيض قبل وبعد .
- صورة توضيحية .
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJcqp2JC_NiznqpHbx93VNIuhHT_7kqAN-FozsugvwQ1EaaoFFnWezK02RqcAWqOYlbQ4kJ3hok0fm9Algnbjd6f2Su7P7gm3wp5GVKjeo7hXppFg84lUd5e1m72UH9eGvW72aEbPMMf4/s1600/search-box-white1.jpg
الكود الخاص بها من هنا
كود بلغة 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;
}
منقول
نتمنى من الله لنا ولكم التوفيق ويرفع الله من شأننا جميعاً نحن العرب والمسلمين في كل مكان
وكم تمنيت أن يكون للعرب والمسلمين السبق في كل شئ ولكن للأسف..!!عموماً هناك بحر من الكلام عن هذا الموضوع وليس هذا مكانه المناسب ولندخل في موضوعنا
إضافة كود البحث الخاض بموقع ابل لمدونتك
يمكنك مشاهدة الإضافة على الطبيعه من خلال موقعهم
APPLE .
مميزات كود البحث :
البحث مباشرة في المدونة دون الحاجة الى موقع جوجل في البحث .
تظهر نتائج البحث على طريقة ظهور أقسام المدونة .
توفر الوقت والجهد للزوار خصوصا في المدونات متشبعة المحتوى .
تعطي مظهر جمالي جدا لمدونتك .
قابلة للتخصيص بشكل كامل " تعديل احجام - تغيير ألوان - تغيير مواضع " وما الى ذلك .
طريقة تركيب الاضافة :
طريقة تركيب الاضافة ستكون على جزئين الأول اضافة جافا سكربت عادية والاخرى هي خواص الـ css3 .
نبدأ بعون الله ..
قم بتركيب الكود التالي في المدونة عن طريقة اضافة HTML/JavaScript .
كود بلغة HTML:
<form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="ابحث في هذه المدونة" />
</form>
ثانياً واخيراً قم بالبحث عن الكود التالي :
كود بلغة HTML:
]]></b:skin>
وقم بوضع أحد الأكواد الثلاثة التاليه فوقه مباشرة ..
ركزوا الله يرضى عليكم واحد فقط من الثلاث الأكواد الثلاثة اللي تحت مو يجي واحد يحط الثلاثة مع بعض .
- الكود الأول : لون غامق وعند الضغط عليه يتوسع ويتغير الى أبيض .
- صورة توضيحيه .
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRItZ6ND04hQ2_HBIb3JI6_ZBjbhqFOdxp61-mD0uJy_aBlP9Fv1F-XnkF2yDjf32kNRSDX1LAF_1GnjuUK92LI_jUIgSz44VZYahxP9bBV1pCw9JVBaHoS8cZW3ddwLYR6_QjpFXpTrE/s1600/search-apple-like.jpg
الكود الخاص بها من هنا
كود بلغة 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);
}
- الكود الثاني : لون غامق قبل وبعد الفتح .
- صورة توضيحيه .
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWH8VWizQwpDKWQtbtt5btYIu-XHdWUCGY9VWR1MVsR2Yxw1i-NEZ-g2Vgb8gvlAWQcxZvvikMbTkGvv8a16rQaYQef7lTVf-MNFdpv0OxnqVMMXPQ9nYyqRfSoeZQbDswd_iczRVbVMc/s1600/search-box-dark.jpg
الكود الخاص بها من هنا
كود بلغة 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;
}
- الكود الاخير : لونه أبيض قبل وبعد .
- صورة توضيحية .
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJcqp2JC_NiznqpHbx93VNIuhHT_7kqAN-FozsugvwQ1EaaoFFnWezK02RqcAWqOYlbQ4kJ3hok0fm9Algnbjd6f2Su7P7gm3wp5GVKjeo7hXppFg84lUd5e1m72UH9eGvW72aEbPMMf4/s1600/search-box-white1.jpg
الكود الخاص بها من هنا
كود بلغة 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;
}
منقول