الخميس، 21 مارس 2019

إضافة نموذج إتصال بلوجر في الصفحة الرئيسية

إضافة نموذج الإتصال بالصفحة الرئيسية في بلوجر

إضافة نموذج إتصال بلوجر في الصفحة الرئيسية - اليوم سوف نشارككم كيفية تثبيت نموذج الإتصال في الصفحة الرئيسية الخاصة بالمدونة و هذا يعني إن الإضافة سوف تظهر بالرئيسية الخاصة بمدونتك في اسفل الزاوية.

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



شرح تركيب النموذج


  1. ادخل إلى لوحة تحكم بلوجر
  2. انقر على تبويب قالب
  3. اضغط على تحرير HTML

ابحث عن الوسم ]]></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:350px;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:0px 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:0px 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;font-family:droid arabic kufi;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}


الان ابحث عن الوسم </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>

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


إضافة تعليق

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *