محمد صبحي
رقم العضوية : 1 تاريخ التسجيل : 17/05/2016 المشاركات : 479 الدولة : مصر |
#1موضوع: شريط البحث اسفل المنتدى الخميس نوفمبر 09, 2017 6:13 am | |
| [ شريط البحث اسفل المنتدى ] [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] >> كود جافا + 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;} صورة للكود بعد الوضع [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة] :[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ,
الرابط [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]
عدل سابقا من قبل محمد صبحي في السبت نوفمبر 11, 2017 1:17 pm عدل 1 مرات |
|
محمد صبحي
رقم العضوية : 1 تاريخ التسجيل : 17/05/2016 المشاركات : 479 الدولة : مصر |
#2موضوع: رد: شريط البحث اسفل المنتدى السبت نوفمبر 11, 2017 1:16 pm | |
| ونفس الكود لكن في اعلى المنتدى - الكود:
-
$(document).ready(function(){ $('body').prepend('<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);} [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] |
|