كيفية تثبيت نموذج الأتصال بشكل ثابت لمدونات بلوجر

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

طريقة تخصيص الأداة

1-توجة الى لوحة تحكم بلوجر وأختر "المظهر"
2-من المظهر أختر تحرير HTML
3-قم بنسخ ولصق الكود التالي فوق الوسم أو كود ]]></b:skin>

/* 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;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}

4-قم بنسخ الكود التالي ولصقة فوق </body>

<script type='text/javascript'>
//<![CDATA[
// Fixed Contact Form
$("body").append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">أتصل بنا</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>

5-قم بعملية حفظ القالب وشاهد النتيجة بنفسك

*ملاحظة:في حال لم يظهر زر "الأرسال" في الأداة قم بالبحث عن كود p, blockquote, pre, table, figure, hr, form, ol, ul, dl وقم بتغيير القيمة الخاصة بة الى أن يظهر الزر ,وأنت حر في أستخدام هذه الطريقة أن لم يظهر زر "الأرسال".
بالنسبة لأولئك الذي يرغبون بالمزيد من الأدوات أنا أقترح :
أضافة نموذج البريد الألكتروني على شكل صفحة منبثقة لمدونات بلوجر
3 نماذج للمشاركات الشائعة سوف تعجبك حتما