لضافة اداة اتصل بنا عائمة لمدونات بلوكر

السلام عليكم ورحمه الله وبركاته .

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

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

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

 والان كخطوة اخيرة قم بالبحث عن </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>

لعد ذلك اضغط على حفظ ومبروك عليك الاضافة ، اركم في تدوينة جديدة انشاء الله .