اضافة خاصية اتصل بنا منبثقة V1

في تدوينة تخص إضافات بلوجر طرحت لكم إضافة خاصية إتصل بنا منزلقة طبعا وكما ذكرت في السابق أهمية نموذج الإتصال في أي موقع كان أو حتى في الحياة اليومية وهذه التدوينة تشمل أيضا إضافة إتصل بنا لكن هذه المرة بشكل أخر ومغاير بالكامل عن الإضافة السابقة من حيث الشكل والتأثير الذي هو عبارة عن صندوق ينفتح لتصبح الخلفية سوداء ونموذج الإتصال واضح ويسمى بـ LightBox للمعاينة إذهب لآخر الصفحة

شرح طريقة التركيب

1. توجه لقالب >> تحرير
2. ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>

#contacts-forms{width:100%;margin-bottom:10px} #widget-contact{ position: fixed; top: 15%; left: 50%; width: 300px; height: auto; z-index: 1000; display: none; margin: 0 0 0 -200px; background-color: #fff; border: 4px solid #E74C3C;} #widget-contact h3.juduls{background: #444; color: #fff; position: relative; margin: 0; padding: 15px; text-transform: uppercase; text-align: center; font-size: 11px;text-shadow: 0px -2px 0px rgba(0, 0, 0, 0.15);} #widget-contact h3.juduls:hover {background: #D13F30;} #widget-contact h3.juduls a{position:absolute;left:15px;color:#fff;font-size:30px;text-decoration:none;cursor:pointer;top: 1px;font-weight: bold;} #ContactForm1 h2{display:none} #area-overlay{position:fixed!important;z-index:999;top:0;right:0;bottom:0;left:0;background-color:#000;display:none} #ContactForm1_contact-form-email-message{ width: 110%; background: #FAFAFA; outline: none; border: 1px solid #C7C7C7; overflow: hidden; height: 150px; color: #444; margin: 0 10px 10px; padding: 7px; max-width: 1100px;} #ContactForm1_contact-form-submit{font-weight:700;background:#E74C3C;position:relative;cursor:pointer;float:right;width:100px;outline:none;border:none;margin:0 10px 10px;color:#fff;font-family: Electrolize,ge_ss_tvbold;} #ContactForm1_contact-form-submit:hover{background:#C0392B} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:250px;margin-top:10px;color: #444;} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width: 110%; background: #FAFAFA; color: #444; outline: none; border: 1px solid #C7C7C7; margin: 0 10px 10px; padding: 10px; max-width: 1100px;} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{border:1px solid #1e90ff} .contact-form-widget p{margin:0} .contact-form-widget{ padding: 5px; font: normal 13px Droid Arabic Naskh; line-height: 2em; text-align: right; font-weight: 600; color: #676363;} .buka-contact { position: relative; z-index: 2; display: inline-block; font-size: 12px; top: 10px; font-weight: normal; padding: 0 12px; color: #fff; float: left; height: 25px; line-height: 27px; background-color: #E74C3C; font-family: Droid Arabic Naskh; cursor: pointer; right: -15px; } .buka-contact:before{ content: ""; border: 8px solid #E74C3C; border-left-color: rgba(0, 0, 0, 0); border-top-color: rgba(0, 0, 0, 0); position: absolute; left: -16px; top: -0px; }

إبحث عن <body/> ثم ضع الكود التالي قبله

$(function(){$('.buka-contact').click(function(){$('#widget-contact').show();$('#area-overlay').fadeTo("normal",0.8);return false});$('#widget-contact .close').click(function(){$('#area-overlay, #widget-contact').hide();return false})});

</script>

ضع الكود التالي فوق <body/>

<b:section class='kontaks' id='kontaks' maxwidgets='1' preferred='yes'/>

</div>

</div>

احفظ العمل ثم توجه لتخطيط وأضف أداة نموذج الإتصال بـ kontaks