إضافة اتصل بنا المنبثقة والعائمة لمدونات بلوجر

مقدمة :

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

صورة الإضافة

صورة الإضافة بعد الضغط عليها

شكل رائع وجذاب كما قلت لكم والآن أليكم

طريقة التركيب

1- من لوحة التحكم --> القالب --> تحرير HTML --> قم البحث على 

]]></b:skin>

ضع فوقه الكود التالى

.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a {
 padding: 5px 10px;
 background:#0F83A0;
 font-family:tahoma;
 text-size:14px;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
}
.floating-ct-body {
 height:335px;
 background: white;
 border:5px solid #0F83A0;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

2- قم البحث ايضاً على

</body>

ضع فوقه الكود التالى

<script type='text/javascript'>
//<![CDATA[
/*Floating Contact Form by BloggerItems.com*/
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">إتصل بنا</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>
</script>

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

مقدم من مدونة العرابى و لا تنسوا متابعتنا عبر المواقع الاجتماعية

و تعليقاتكم المشجعة فى الأسفل فى رعاية الله .