02‏/08‏/2014

في تدوينة تخص إضافات بلوجر طرحت لكم إضافة خاصية إتصل بنا منزلقة طبعا وكما ذكرت في السابق أهمية نموذج الإتصال في أي موقع كان أو حتى في الحياة اليومية وهذه التدوينة تشمل أيضا إضافة إتصل بنا لكن هذه المرة بشكل أخر ومغاير بالكامل عن الإضافة السابقة من حيث الشكل والتأثير الذي هو عبارة عن صندوق ينفتح لتصبح الخلفية سوداء ونموذج الإتصال واضح ويسمى بـ 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; } 
3. إبحث عن <body/> ثم ضع الكود التالي قبله
<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>
4. ضع الكود التالي فوق <body/>
<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. احفظ العمل ثم توجه لتخطيط وأضف أداة نموذج الإتصال بـ kontaks

في تدوينة تخص إضافات بلوجر طرحت لكم إضافة خاصية إتصل بنا منزلقة طبعا وكما ذكرت في السابق أهمية نموذج الإتصال في أي موقع كان أو حتى في الحياة اليومية وهذه التدوينة تشمل أيضا إضافة إتصل بنا لكن هذه المرة بشكل أخر ومغاير بالكامل عن الإضافة السابقة من حيث الشكل والتأثير الذي هو عبارة عن صندوق ينفتح لتصبح الخلفية سوداء ونموذج الإتصال واضح ويسمى بـ 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; } 
3. إبحث عن <body/> ثم ضع الكود التالي قبله
<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>
4. ضع الكود التالي فوق <body/>
<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. احفظ العمل ثم توجه لتخطيط وأضف أداة نموذج الإتصال بـ kontaks

15 Blogger تعليقات
Disqus
15 التعليقات
المشرف
avatar

إضافاتك كلها لم تصلح لي يبدو أن أكوادك خاطئة

المشرف
avatar

يبدو أنك لا تقم بالأمور كما هي :)
المعاينة بها نفس التطبيقات

المشرف
avatar

اشكرك لا شيء خطا :-d
لكن انا عنديقالب انا صممته يا ليت تساعدني على الاضافات

المشرف
avatar

يمكنك إرسال القالب وسيتم الإضافة
أو بما أنك مصمم قوالب ما المشكل الذي واجهك

المشرف
avatar

اخي لم اجد الكود الثالث ممكن كود بديل له رجاء وشكرا جزيلا:-bd

المشرف
avatar

رابط مدونتك

المشرف
avatar

http://cayberspece.blogspot.com/

المشرف
avatar

اخي حسام انا لم اجد الكود الثالث
ماذا افعل ؟
مدونتي : http://tekny-net.blogspot.com/

المشرف
avatar

ضع اسفل هذا الكود #footer-wrapper

المشرف
avatar

ابحث عن هذا sidebar-kanan

المشرف
avatar
المشرف
avatar

]]> اخي لم اجد هذه الكلمة في قالبي

المشرف
avatar

ابحث عنها هكذا : skin

المشرف
avatar

الطريقه ما عملت معى

المشرف
avatar

من فضلك انا عندي حساب علي جوجل ادسنس والعلانات لم تظهر في المدونه ماذا افعل ارجو الرد

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة