أداة إتصل بنا المنبثقة لمدونات البلوجر

 بسم الله الرحمن الرحيم

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

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

 صورة من الأداة
قبل الضغط على زر إتصل بنا

 بعد الضغط على زر إتصل بنا

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

 لتركيب هذه الاضافة اولاً عليكم اضافة اداة اتصل بنا من التخطيط وضعها في اي مكان
قم بالذهاب الى قالب >> تحرير وابحث عن ]]></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;
} 

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

 تحميل الكود 

هذا كل شى اتمنى ان تكون قد حازت على رضاك لا تحرمنا من رددوك المشجعة اترك تعليق