انشاء منتدى مجانيشرح ] إضافة شريط البحث فى أسفل المنتدى The Globetrotter
منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى :: :: التقنيات المتقدمة :: أكواد الجافا إسكريبت JAVA
صفحة 1 من اصل 1
شرح ] إضافة شريط البحث فى أسفل المنتدى The Globetrotter
من طرف Mahmoud Eslam الجمعة 5 يونيو 2015 - 15:35
![شرح ] إضافة شريط البحث فى أسفل المنتدى The Globetrotter 613623](https://2img.net/u/1811/68/54/94/smiles/613623.gif)
السلام عليكم ورحمة الله وبركاته ..
![شرح ] إضافة شريط البحث فى أسفل المنتدى The Globetrotter 103798](https://2img.net/u/1811/68/54/94/smiles/103798.gif)
أهلاً وسهلاً بكم أعضاء الدعم الكرام ..
اتمنى ان ينال الشرح اعجابكم ..
![شرح ] إضافة شريط البحث فى أسفل المنتدى The Globetrotter Theme](https://2img.net/i/fa/admin/icones/theme.png)
[ شريط البحث اسفل المنتدى ]
![شرح ] إضافة شريط البحث فى أسفل المنتدى The Globetrotter 708172](https://2img.net/u/1811/68/54/94/smiles/708172.gif)
>> كود جافا + Css لإضافة شريط البحث أسفل منتداك ..
![شرح ] إضافة شريط البحث فى أسفل المنتدى The Globetrotter 851176](https://2img.net/u/1811/68/54/94/smiles/851176.gif)
أولاً كود الجافا :-
طريقة الوضع : لوحة الإدارة - عناصر إضافية - اكواد جافا وهتمل - ااكواد جافا سكربت - ثم اضف كود جديد ..
- ضعه على اى مكان تختاره ويفضل الصفحة الرئيسية او جميع الصفحات ..
ثانياً كود الCss :
طريقة الوضع : لوحة الإدارة - مظهر المنتدى - الصور والالوان - الوان - ورقة تصميم Css ..
- ضعه على اى مكان تختاره ويفضل الصفحة الرئيسية او جميع الصفحات ..
ثم ضع الكود التالى :-
- الكود:
$(document).ready(function(){
$('body').append('<br><center><div><span
id="pesqButton">اكتب هنا ما تريد كتابته على الشريط</span><div
id="formPesq"><form target="_blank" action="/search"><input
type="text" id="pesquisaCaixa" name="search_keywords"><input
id="pesquisaButton" type="submit"
value="OK"></form></div><br></div></center>');$('#pesquisaCaixa').val('البحث...');
$('#pesquisaCaixa').focus(function(){if($(this).val() == "البحث..."){$(this).val('');}});
$('#pesquisaCaixa').blur(function(){if($(this).val() == ""){$(this).val('البحث...');}});
$('#formPesq').hide();$('#pesqButton').click(function(){$('#formPesq').focus();$('#formPesq').slideToggle();movimento('formPesq');});});
function movimento(para) {jQuery('html,body').animate(
{scrollTop: jQuery("#"+para).offset().top}, 500);}
ثانياً كود الCss :
طريقة الوضع : لوحة الإدارة - مظهر المنتدى - الصور والالوان - الوان - ورقة تصميم Css ..
ثم ضع الكود :
- الكود:
#pesquisaButton:hover{background: rgba(50, 50, 50, 0.9);}
#pesquisaButton{
margin-left: 10px !important;padding:
5px;cursor:pointer;padding-left: 12px;border: 1px solid
black;background: rgba(50, 50, 50, 0.7);padding-right: 9px;font-weight:
800;}
#pesquisaCaixa{height: 30px;background: #121212;color: white;border-top:0px;
border-right:0px;border-bottom:0px;border-left: 2px solid #181818;font-weight: 800;font: arial;
width:300px;}
#formPesq{max-width:400px;padding:14px;margin-top:7px;border: 2px solid
#181818;border-bottom-left-radius: 8px;border-bottom-right-radius:
8px;background: #252525;}
#pesqButton:hover{color:black;adding: 9px;border-top: 2px solid #121212;border-left: 2px solid #181818;
border-right: 2px solid ##121212;color: white;font-weight:bold;font: verdana;cursor:pointer;
border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;background: #181818;
transition-duration: 2s;
transition-duration: 4s;
transition-duration: 6s;
transition-timing-function: linear;
transition: color 2s ease 3s;
-webkit-transition: all 2s linear;
-moz-transition: all 2s linear;
-o-transition: all 2s linear;
transition: all 2s linear;
}
#pesqButton{padding: 9px;border-top: 2px solid #181818;border-left: 2px solid #181818;
border-right: 2px solid #181818;color: #fafafa;font-weight:bold;font: verdana;cursor:pointer;
border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;background: #121212;
margin-top: -10px !important;}
صورة للكود بعد الوضع
![شرح ] إضافة شريط البحث فى أسفل المنتدى The Globetrotter Icon_arrow](https://2img.net/i/fa/i/smiles/icon_arrow.gif){kind=icon}
:![شرح ] إضافة شريط البحث فى أسفل المنتدى The Globetrotter 44444410](https://i.servimg.com/u/f18/13/91/22/87/44444410.jpg)
https://i.servimg.com/u/f18/13/91/22/87/44444410.jpg ,
![شرح ] إضافة شريط البحث فى أسفل المنتدى The Globetrotter Medal-10](https://i.servimg.com/u/f10/12/10/25/45/medal-10.gif)
مع خالص تحياتى لكم The Globetrotter
The Globetrotter
اخوكم المتطوع المساعد ..
![شرح ] إضافة شريط البحث فى أسفل المنتدى The Globetrotter 221706](https://2img.net/u/1811/68/54/94/smiles/221706.gif)
عدل سابقا من قبل The Globetrotter في الثلاثاء 9 يونيو 2015 - 21:20 عدل 2 مرات
Mahmoud Eslam-
-
عدد المساهمات : 2367
معدل النشاط : 8062
السُمعة : 53 -
♔ اَلَملَكهَ بَلَقَيــس♔ يعجبه هذا الموضوع
مواضيع مماثلة» شرح طريقة عمل محرك البحث Google فى منتداك
» إستفسار عن إضافة عدد الزوار أسفل المنتدى
» إمكانية إضافة عناصر أعلى أو أسفل صفحة المنتدى
» إضافة ركن "إحصائيات" المنتدى و ركن "المتواجدون الآن" أسفل رئيسية نسخة الجوال الحديثة
» شريط أسفل المنتدى يظهر فى كل الصفحات
» إستفسار عن إضافة عدد الزوار أسفل المنتدى
» إمكانية إضافة عناصر أعلى أو أسفل صفحة المنتدى
» إضافة ركن "إحصائيات" المنتدى و ركن "المتواجدون الآن" أسفل رئيسية نسخة الجوال الحديثة
» شريط أسفل المنتدى يظهر فى كل الصفحات
منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى :: :: التقنيات المتقدمة :: أكواد الجافا إسكريبت JAVA
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى