منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص, يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد, نتشرف بدعوتك لإنشائه.


انشاء منتدى مجاني شبيه بهذا المنتدى

شرح ] إضافة شريط البحث فى أسفل المنتدى The Globetrotter

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

شرح ] إضافة شريط البحث فى أسفل المنتدى The Globetrotter

مُساهمة من طرف Mahmoud Eslam في الجمعة 5 يونيو 2015 - 15:35


السلام عليكم ورحمة الله وبركاته ..
أهلاً وسهلاً بكم أعضاء الدعم الكرام ..
اتمنى ان ينال الشرح اعجابكم ..



[ شريط البحث اسفل المنتدى ]
>> كود جافا + 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;}


صورة للكود بعد الوضع :

http://i18.servimg.com/u/f18/13/91/22/87/44444410.jpg ,

 مع خالص تحياتى لكم The Globetrotter
The Globetrotter
اخوكم المتطوع المساعد ..




عدل سابقا من قبل The Globetrotter في الثلاثاء 9 يونيو 2015 - 21:20 عدل 2 مرات
avatar
Mahmoud Eslam
 
 

ذكر
عدد المساهمات : 2910
معدل النشاط : 5502
السُمعة : 53

http://help-pub.3oloum.org/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى