اضافة خاصية اتصل بنا بشكل مدونة عرب ويب [منزلقة]

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

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

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

1 . نتوجه لقالب >> تحرير 

2. ابحث بإستعمال CTRL+F عن  <b:skin/><[[

3. ضع الكود التالي قبله [ فوقه ]

لتغير الإتجاه إلى اليمين غير ما باللون  الأصفر  إلى right

/* CSS Contact Form */
.ContactForm, .ContactForm .title {
 display:none;
}
.floating-ai {
 position:fixed;
 width:250px;
 left:0;
 bottom:0;
 z-index:999;
}
.floating-ai-head a {
 padding:5px 10px;
 background:#2997e0;
 color:#fff;
 font-weight:400;
 display:inline-block;
 font-family:Oswald,sans-serif;
 text-transform:uppercase;
 *display:block;
 zoom:1;
 transition:all 0.3s linear;
}
.floating-ai-head a:hover {
 background:#2588ca;
 color:#fff;
}
.floating-ai-body {
 height:285px;
 background:#fff;
 padding:10px;
 display:none;
 box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
}
.floating-ai-head {
 text-align:left;
}
.floating-ai-body .ContactForm {
 margin:0;
 display:block!important;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
 background:#eee;
 margin-bottom:10px;
 border:none;
 color:#8f8f8f;
 padding:2px;
 width:75%;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
 background:#f5f5f5;
 transition:all 0.3s linear;
}
#ContactForm1_contact-form-email-message {
 background:#eee;
 margin-bottom:10px;
 border:none;
 color:#8f8f8f;
 font-family:Oswald,sans-serif;
 padding:5px;
 width:95%;
}
#ContactForm1_contact-form-submit {
 width:100px;
 color:#fff;
 font-family:Oswald,sans-serif;
 text-transform:uppercase;
 font-weight:400;
 font-size:14px;
 cursor:pointer;
 background:#57ad68;
 border:none;
 float:left;
 transition:background 0.3s linear;
}
#ContactForm1_contact-form-submit:hover {
 background:#468a53;
}/* ---- Code www.ar1web.com ---- */

4. ابحث عن : <body/> 

5. ضع الكود التالي قبله [ فوقه ]

<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Contact</a></div><div class="floating-ai-body"></div></div>');
$('.ContactForm').appendTo('.floating-ai-body');
var slide_up_ai = false;
$('.floating-ai-head a').click(function(){
 if (!slide_up_ai) {
 slide_up_ai = true;
 $('.floating-ai-body').slideDown();
 } else {
 slide_up_ai = false;
 $('.floating-ai-body').slideUp();
 }
});
//]]>
</script>

6 .قم بالحفظ ثم توجه إلى التخطيط وأضف أداة > نموذج الإتصال .. ويفضل أن تكون بالسيدبار