السلام عليكم ورحمة الله تعالى وبركاته
مع جديد الإضافات الخاصة ببلوجر نقدم لكم الإضافة الخاصة وهي نموذج الإتصال بشكل مبهر وإحترافي ، تعتبر خاصية الإتصال بالمواقع أو المدونات حتى في الشبكات الإجتماعية وأيضا في الحياة الإجتماعية ، من أهمها وما يميز الإضافة أنها لا تأخذ مساحة ولا تحتاج صفحة لإضافتها ، فهي مثبتة على المدونة كاملة في النزول أو الصعود وهذا ايضا سيسهل على الزائر التواصل بضغطة زر لكي تظهر وبضغطة زر لكي يرسل الرسالة
جميلة أليست كذلك ولهذا سأترككم لتركبوها لمدونتكم.
ملاحظة : تمّ إضافة شكل ثاني جديد بتاريخ 31/08/2015
شرح طريقة التركيب
1. داخل القالب ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
.ContactForm, .ContactForm .title {
display:none;
}
.floating-ai {
position:fixed;
width:250px;
right:15px;
bottom:0;
z-index:999;
}
.floating-ai-head a {
padding:5px 10px;
background:#2997e0;
color:#fff;
font-weight:bold;
display:inline-block;
font-family:droid arabic kufi;
text-transform:uppercase;
*display:block;
zoom:1;
transition:all 0.3s linear;
}
.fa-envelope-o:before {
content: "\f003";
margin-left: 5px;
font-weight: bold;
background: rgba(68, 68, 68, 0.27);
padding: 5px;
}
.floating-ai-head a:hover {
background:#2588ca;
color:#fff;
}
.floating-ai-body {
height:400px;
background:#fff;
padding:10px;
display:none;
box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
}
.floating-ai-head {
text-align:right;margin-right: 15px;}
.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:droid arabic kufi;
padding:5px;
width:95%;
}
#ContactForm1_contact-form-submit {
width:100px;
color:#fff;
font-family:droid arabic kufi;
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;
}
2. إبحث عن </body> وضع الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move"><i class="fa fa-envelope-o"></i>إتصل بنا</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>
3 .قم بالحفظ ثم توجه إلى التخطيط وأضف أداة نموذج الإتصال
________________________________________________________________________
داخل القالب ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
#contact{position: fixed;bottom: 0;right: 1%;background-color: #434E52;color: #555;width:250px;z-index: 999999;}
#contact h2.title{font-weight: 400;color: #FFF;padding: 8px 15px;font-size: 16px;cursor: pointer;text-align: center;background-color: #2B2B2B;border-bottom: none; font-family: electrolize,'Droid Arabic Naskh', serif; ;}
#contact h2.title .fa{position:absolute;left:10px;top:12px}#contact h2.title:before { content: "\f1d8"; font-family: FontAwesome; float: left; background-color: #434E52; padding: 15px; margin-top: -8px; margin-left: -15px; }
#contact .contact-form-widget{padding: 0px; display: none; padding-right: 10px; width: 240px;}
#contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message{background-color:#DDD;color:#111;border:0;padding:10px 5px;}
.contact-form-widget {margin-right:0;max-width:250px;padding:0;padding-top:0;
width:100%;height:auto;}
.contact-form-email, .contact-form-email-message, .contact-form-name {max-width:100%;
width:100%;}#contact *{transition:all 0 ease;-webkit-transition:all 0 ease;-moz-transition:all 0 ease;-o-transition:all 0 ease}
.contact-form-email, .contact-form-name {background:#dce1e2;border:none;border-top:none;box-sizing:border-box;color:#2e3639;display:inline-block;font-family:'Arial',sans-serif;font-size:13px;height:24px;margin:0;margin-top:5px;padding:10px;vertical-align:top;transition:.3s linear;}
.contact-form-email-message {background:#dce1e2;border:none;border-top:none;box-sizing:border-box;color:#2e3639;display:inline-block;font-family:'Arial',sans-serif;font-size:13px;margin:0;margin-top:5px;padding:10px;vertical-align:top;transition:.3s linear;}
.contact-form-email:hover, .contact-form-email:focus, .contact-form-name:hover, .contact-form-name:focus, .contact-form-email-message:hover, .contact-form-email-message:focus {background:#fff;border:none;border-top:none;outline:none;box-shadow:none;transition:.3s linear;}
form {color:#dce1e2;}
.contact-form-button-submit {width:100%;height:30px;background-color:#55849E;background-image:none;border:none;color:#fff;transition:.3s linear; margin-top: 5px; font-family: electrolize,'Droid Arabic Naskh', serif;}
.contact-form-button-submit:hover,.contact-form-button-submit:focus {background-color:#4DB2EC;background-image:none;;border:none;outline:none;color:#fff;cursor:pointer;transition:.3s linear;}
.contact-form-error-message-with-border {background:#FC4F3F;border:none;
bottom:0;box-shadow:none;color:#fff;font-size:11px;
font-weight:700;line-height:19px;margin-right:0;opacity:1;position:static;
text-align:center;transition:all 0.1s linear;}
.contact-form-success-message {background:#e1dae7;border:none;bottom:0;
box-shadow:none;color:#6a5b7a;font-size:11px;line-height:19px;margin-right:0;
opacity:1;position:static;text-align:center;transition:all 0.1s linear;}
2. إبحث عن </body> وضع الكود التالي فوقه
<script type='text/javascript'>
;$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");});
</script>
3. ضع الكود التالي في مكان فوق الفوتر أو </body>
<b:section class='contact section' id='contact' maxwidgets='1' >
<b:widget id='ContactForm1' locked='false' title='اتصل بنا' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
<p/>
<data:contactFormEmailMsg/> <span style='font-weight: bolder;color: #F32525;'>*</span>
<br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
<p/>
<data:contactFormMessageMsg/> <span style='font-weight: bolder;color: #F32525;'>*</span>
<br/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
<p/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<p/>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
