نموذج اتصل بنا بشكل قائمة منزلقة لبلوجر

نموذج اتصل بنا بشكل قائمة منزلقة لبلوجر

نموذج اتصل بنا بشكل قائمة منزلقة لبلوجر


تعد صفحة اتصل بنا Contact us  من بين الإضافات المهة لأي مدونة أو موقع فهي من الأسباب التي تكسب بها ثقة الزوار بالإضافة أنها تضفي نوع من الاحترافية لمدونتك أو موقعك، ولكي لا أطيل عليك عزيزي القارئ نمر الى الشرح.
هذا هو شكل الصفحة بعد اضافتها:


نموذج اتصل بنا بشكل قائمة منزلقة لبلوجر


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

1. توجه لقالب >> تحرير 
2. ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
الكود

/*Floating Contact Form by BloggerItems.com*/
.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: #09f;
color: white;
font-weight: bold;
display: inline-block;
*display: block;
zoom: 1;
}
.floating-ct-body {
height: 285px;
background: white;
border: 1px solid #09f;
padding: 10px;
display: none;
}
.floating-ct-head {
text-align: right;
}
.floating-ct-body .ContactForm {
margin: 0;
display: block!important;
}


3. إبحث عن <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>

احفظ العمل ثم توجه لتخطيط وأضف أداة نموذج الإتصال

نموذج اتصل بنا بشكل قائمة منزلقة لبلوجر

شرح فيديو مشاهدة ممتعة




ليست هناك تعليقات