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

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

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

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

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

للمعاينة

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

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك  من هنا 

2 - التخطيط >> إضافة نموذج إتصل بنا >>

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

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

]]></b:skin> 

أو

</style>

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 - الآن إبحث عن هذا الوسم

</body>

7 - أضف الكود التالي فوقه مباشرة

<script type='text/javascript'>
//<![CDATA[
// Fixed Contact Form
$("body").append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Contact Form</a></div><div class="floating-ai-body"></div></div>'),$(".ContactForm").appendTo(".floating-ai-body");var slide_up_ai=!1;$(".floating-ai-head a").click(function(){slide_up_ai?(slide_up_ai=!1,$(".floating-ai-body").slideUp()):(slide_up_ai=!0,$(".floating-ai-body").slideDown())});
//]]>
</script>

8 - إستبدل العبارة Contact Form بـ إتصل بنا أو تواصل معنا

9 - إضغط حفظ المظهر 

الآن توجه لمدونتك وشاهد النتيجة

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

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

باب التعليقات مفتوح للجميع