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

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

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

ننصحك بقراءة:  اضافة نموذج اتصال مدون محترف

معاينة

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

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>

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

8/26/2015

مواضيع ذات صلة

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

4 / 5

بواسطة مدون محترف

مدون محترف 8/26/2015 15 تعليقات