إضافة أداة إتصل بنا منبثقة احترافية 2017

السلام عليكم ورحمة الله تعالى وبركاته


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

لمعاينة أداة إتصل بنا


خطوات تركيب أداة إتصل بنا منبثقة

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك  من هنا 
2 - التخطيط >> إضافة نموذج إتصل بنا >>

3 - قالب (المظهر) >> تحرير HTML >>

4 - إبحث عن الوسم التالي بالضغط Ctrl+F

]]> 
أو
5 - أضف الكود التالي أعلاه (فوق)
/* Fixed Contact Form */
.ContactForm,.ContactForm .title{display:none}
.floating-ai{position:fixed;width:280px;right:30px;bottom:0;z-index:99}
.floating-ai-head a{padding:8px 10px;background:#2997e0;color:#fff;font-weight:400;display:inline-block;transition:all .3s linear}
.floating-ai-head a:hover{background:#2588ca;color:#fff}
.floating-ai-body{height:285px;background:#fff;padding:10px;display:none;box-shadow:0 2px 5px 0 rgba(0,0,0,.26)}
.floating-ai-head{text-align:right}
.floating-ai-body .ContactForm{margin:0;display:block!important}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{background:#fff;border:0;padding:10px 0;color:#999;font-weight:normal;width:100%;max-width:initial;border-bottom:1px solid #ccc;transition:.2s ease all}
#ContactForm1_contact-form-email-message{background:#fff;border:none;color:#8f8f8f;padding:10px 0;width:100%;max-width:initial;border-bottom:1px solid #ccc}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{background:#fff;box-shadow:none;border-bottom-color:#ff3c3c;transition:all .3s linear}
#ContactForm1_contact-form-submit{position:relative;color:#fff;font-weight:400;font-size:12px;cursor:pointer;background:#57ad68;border:none;float:left;box-shadow:0 0 0 0 rgba(0,0,0,0.19);transition:all .3s linear}
#ContactForm1_contact-form-submit:hover{background:#468a53;}
#ContactForm1_contact-form-submit:active{box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);}
.contact-form-widget form{display:table;margin:0 auto;}
.contact-form-widget {max-width:initial;}
.floating-ai-body{-moz-box-sizing:initial;-webkit-box-sizing:initial;box-sizing:initial}
6 - الآن إبحث عن هذا الوسم
7 - أضف الكود التالي فوقه مباشرة
8 - إستبدل العبارة Contact Form بـ إتصل بنا أو تواصل معنا
9 - إضغط حفظ المظهر 
الآن توجه لمدونتك وشاهد النتيجة


تم بحمد الله ...

 أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

تعليقات