Top Ad unit 728 × 90

اخر المشاركات

اخر المشاركات

اضافة خاصية اتصل بنا منزلقة بشكل احترافي

اضافة خاصية اتصل بنا منزلقة

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


51


6027


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



ملاحظة : تمّ إضافة شكل ثاني جديد بتاريخ 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,&#39;Droid Arabic Naskh&#39;, serif; ;}
#contact h2.title .fa{position:absolute;left:10px;top:12px}#contact h2.title:before { content: &quot;\f1d8&quot;; 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:&#39;Arial&#39;,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:&#39;Arial&#39;,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,&#39;Droid Arabic Naskh&#39;, 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'>
;$( &quot;#contact h2.title&quot; ).click(function() {$( &quot;#contact .contact-form-widget&quot; ).toggle(&quot;fast&quot;);});
</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 != &quot;&quot;'>
    <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 + &quot;_contact-form-name&quot;' 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 + &quot;_contact-form-email&quot;' 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 + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' 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 + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
اضافة خاصية اتصل بنا منزلقة بشكل احترافي Reviewed by محترفي الويب on 9:51:00 م Rating: 5

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

All Rights Reserved by محترفي الويب © 2014 - 2015
Powered By Blogger, Designed by Sweetheme

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

يتم التشغيل بواسطة Blogger.