-->
العربي ويب العربي ويب
recent

آخر الأخبار

recent
recent
جاري التحميل ...

إضافة أداة إتصل بنا منبثقة احترافية 2017

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


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

لمعاينة أداة إتصل بنا


خطوات تركيب أداة إتصل بنا منبثقة

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك  من هنا 
2 - التخطيط >> إضافة نموذج إتصل بنا >>

3 - قالب (المظهر) >> تحرير HTML >>

4 - إبحث عن الوسم التالي بالضغط Ctrl+F

]]></b:skin> 
أو
</style>
5 - أضف الكود التالي أعلاه (فوق)
/* Fixed Contact Form */
.ContactForm,.ContactForm .title{display:none}
.floating-ai{position:fixed;width:280px;right:30px;bottom:0;z-index:99}
.floating-ai-head a{padding:8px 10px;background:#2997e0;color:#fff;font-weight:400;display:inline-block;transition:all .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 2px 5px 0 rgba(0,0,0,.26)}
.floating-ai-head{text-align:right}
.floating-ai-body .ContactForm{margin:0;display:block!important}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{background:#fff;border:0;padding:10px 0;color:#999;font-weight:normal;width:100%;max-width:initial;border-bottom:1px solid #ccc;transition:.2s ease all}
#ContactForm1_contact-form-email-message{background:#fff;border:none;color:#8f8f8f;padding:10px 0;width:100%;max-width:initial;border-bottom:1px solid #ccc}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-name:hover,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email-message:hover{background:#fff;box-shadow:none;border-bottom-color:#ff3c3c;transition:all .3s linear}
#ContactForm1_contact-form-submit{position:relative;color:#fff;font-weight:400;font-size:12px;cursor:pointer;background:#57ad68;border:none;float:left;box-shadow:0 0 0 0 rgba(0,0,0,0.19);transition:all .3s linear}
#ContactForm1_contact-form-submit:hover{background:#468a53;}
#ContactForm1_contact-form-submit:active{box-shadow:0 4px 15px 0 rgba(0,0,0,0.19);}
.contact-form-widget form{display:table;margin:0 auto;}
.contact-form-widget {max-width:initial;}
.floating-ai-body{-moz-box-sizing:initial;-webkit-box-sizing:initial;box-sizing:initial}
6 - الآن إبحث عن هذا الوسم
</body>
7 - أضف الكود التالي فوقه مباشرة
<script type='text/javascript'>
//<![CDATA[
// Fixed Contact Form
$("body").append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Contact Form</a></div><div class="floating-ai-body"></div></div>'),$(".ContactForm").appendTo(".floating-ai-body");var slide_up_ai=!1;$(".floating-ai-head a").click(function(){slide_up_ai?(slide_up_ai=!1,$(".floating-ai-body").slideUp()):(slide_up_ai=!0,$(".floating-ai-body").slideDown())});
//]]>
</script>
8 - إستبدل العبارة Contact Form بـ إتصل بنا أو تواصل معنا
9 - إضغط حفظ المظهر 
الآن توجه لمدونتك وشاهد النتيجة


تم بحمد الله ...

 أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها
باب التعليقات مفتوح للجميع

كاتب الموضوع

محمد العربي

0 تعليق على موضوع : إضافة أداة إتصل بنا منبثقة احترافية 2017

  • اضافة تعليق

  • الأبتساماتأخفاء الأبتسامات



    ஜ العربي ويب ஜ | ஜ شعارنا إثراء المحتوى العربي ஜ

    إضغط على | إنضم لموقعنا + متابعتنا عبر مواقع التواصل | وكن أول من يتوصل بجديدنا

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

    إتصل بنا

    اخر تعليقات بلوجر

    تغريداتي علي التويتر

    زوار المدونة

    Statistics

    احصاءات المدونة

    جميع الحقوق محفوظة لـ

    العربي ويب

    2017

    –>