0

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

للمعاينة إنزل قليلا وإضغط على ( هل لديك إستفسار .. سؤال )



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

1 . نتوجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن  <b:skin/><[[

3. ضع الكود التالي قبله [ فوقه ]


#contacts-forms{width:100%;margin-bottom:10px}
#widget-contact{border:2px solid #E74C3C;position:fixed;top:15%;left:50%;width:400px;height:auto;background-color:#fff;z-index:1000;display:none;margin:0 0 0 -200px}
#widget-contact h3.juduls{background:#E74C3C;color:#fff;font:normal 18px Tahoma,Sans-Serif;position:relative;margin:0;padding:15px;text-transform:uppercase}
#widget-contact h3.juduls a{position:absolute;top:10px;right:15px;color:#fff;font-size:22px;text-decoration:none;cursor:pointer}
#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:355px;background:#222;outline:none;border:1px solid #E74C3C;overflow:hidden;height:150px;color:#fff;margin:0 10px 10px;padding:7px}
#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;padding:7px}
#ContactForm1_contact-form-submit:hover{background:#d00}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:250px;margin-top:10px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:350px;background:#222;color:#fff;outline:none;border:1px solid #E74C3C;margin:0 10px 10px;padding:10px}
#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}
.buka-contact{width:100%;padding:10px;background:#E74C3C;color:#fff;font-size:16px;cursor:pointer}
.buka-contact:hover{background:#d00}

4. ابحث عن : <body/> 

5. ضع الكود التالي قبله [ فوقه ]
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<script type='text/javascript'>
$(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>

6. ابحث عن : <div id='sidebar-wrapper'>

7. ضع الكود التالي بعده [ أسفله ]

<div id='contacts-forms'>
<div id='widget-contact'>
<h3 class='juduls'>اتصل بنا<a href='#' class='close' title='إغلاق'>&#215;</a></h3>
<b:section class='kontaks' id='kontaks' maxwidgets='1' preferred='yes'/>
</div>
<div id='area-overlay'></div>
<button class='buka-contact'>اتصل بنا</button>
</div>

8. احفظ العمل ثم توجه لتخطيط وأضف أداة نموذج الإتصال 
أتمنى أن يكون الشرح واضح لقائنا مع إضافة وتدوينة أخرى .. في أمان الله .

إرسال تعليق

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).

 
Top