معهد خبراء بلوجر - إضافة أداة إتصل بنا بشكل جديد وإحترافى

http://1.bp.blogspot.com/-xt-6f7RGMM...hady-store.jpg

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

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

معاينة الإضافة

http://1.bp.blogspot.com/-zzaBmacau2...9%81%D8%A9.png

مدونة هادى ستور تنصح باخذ نسخة إحتياطية تحسباً لأى أخطاء لا قدر الله
الدخول على تحرير القالب والبحث عن ]]></b:skin> وضع الكود التالى قبلة مباشرة

اقتباس:

#mbl-contact .ContactForm {
margin: 0px!important;
}
#mbl-contact .contact-form-button-submit {
max-width: none;
width: 100%;
height: 35px;
border: 0;
background-color: #424242;
cursor: pointer;
font:13px;
font-style: normal;
font-weight: 400;
}
.#mbl-contact .contact-form-button-submit:hover {
background-color: #FF9900;
border: 0;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact .contact-form-widget {
padding: 30px;
display: none;
}
#mbl-contact #contact {
position: fixed;
bottom: 0;
right: 1%;
background-color: #EEE;
color: #555;
width: 300px;
z-index: 1.0E+15;
}
#mbl-contact #contact h2.title {
margin: 0px;
font-weight: 400;
background-color: #424242;
color: #FFF;
padding: 8px 15px;
font-size: 16px;
cursor: pointer;
letter-spacing: 3px;
text-align: center;
}
#mbl-contact #contact h2.title .fa {
position: absolute;
left: 10px;
top: 12px;
}
#mbl-contact #contact .contact-form-widget {
width: 300px;
padding: 30px;
display: none;
}
#mbl-contact #contact * {
transition: all 0 ease;
-webkit-transition: all 0 ease;
-moz-transition: all 0 ease;
-o-transition: all 0 ease;
}
#mbl-contact #contact .contact-form-name,#contact .contact-form-email,#contact .contact-form-email-message {
text-align: right;
background-color: #DDD;
color: #111;
border: 0;
padding: 5px 5px ;
font: normal normal 13px ;
}
#mbl-contact .contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-widget {
max-width: none;
margin-bottom: 15px;
}

مجدداً نبحث عن الكود التالى <body> ونضع الكود التالى أسفلة مباشرة

اقتباس:

<div id='mbl-contact'>
<b:section class='contact' id='contact' maxwidgets='1' showaddelement='yes'>
<b:widget id='ContactForm2' locked='true' title='إتصل بنا' type='ContactForm'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><i class='fa fa-paper-plane'/> <data:title/></h2>
</b:if>
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' expr:placeholder='data:contactFormNameMsg' name='name' size='30' type='text' value=''/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' expr:placeholder='data:contactFormEmailMsg' name='email' size='30' type='text' value=''/>
<textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' expr:placeholder='data:contactFormMessageMsg' name='email-message' rows='5'/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<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:includable>
</b:widget>
</b:section>
</div>
<script type='text/javascript'>
//<![CDATA[
$( "#contact h2.title" ).click(function() {$( "#contact .contact-form-widget" ).toggle("fast");});
//]]>
</script>

إحفظ القالب فى رعاية الله

المصدر| مدونة هادى ستور |

إضافة أداة إتصل بنا بشكل جديد وإحترافى | مدونة هادى ستور