الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
مع جديد الإضافات الخاصة ببلوجر نقدم لكم الإضافة الخاصة بمدونة عرب ويب وهي نموذج الإتصال بشكل مبهر وإحترافي ، تعتبر خاصية الإتصال بالمواقع أو المدونات حتى في الشبكات الإجتماعية وأيضا في الحياة الإجتماعية ، من أهمها وما يميز الإضافة أنها لا تأخذ مساحة ولا تحتاج صفحة لإضافتها ، فهي مثبتة على المدونة كاملة في النزول أو الصعود وهذا ايضا سيسهل على الزائر التواصل بضغطة زر لكي تظهر وبضغطة زر لكي يرسل الرسالة 😎 جميلة أليست كذلك ولهذا سأترككم لتركبوها لمدونتكم.
ملاحظة : تمّ إضافة شكل ثاني جديد بتاريخ 31/08/2015
.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> وضع الكود التالي فوقه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>
<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>
ملحوظة:
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
السلام عليكم
ردحذفعندما ضغطت علي المفتاحين وجدت كلمات انجليزية كثيرة ولم اعرف ماذا افعل ارجو افادتي وشكرا
عليكم السلام :
ردحذفاولا عليك البحث عن هذا الكود ]]> بإستعمال ctrl+f وضعي الكود الذي يخص الإضافة فوقه - ونفس الشيئ للبقية تابعي الصورة -
http://im58.gulfup.com/bPFhMZ.png
http://4.bp.blogspot.com/-8uSUxCcfL2Q/U6gJo_GQX3I/AAAAAAAAEJY/3u3b0czjQzs/s1600/ar1web.png
ردحذفاتبعت ارشاداتكم وعند الضغط علي المعاينة ظهرت الرسالة التالية فماذا افعل افادكم الله
ردحذفحدث خطا اثناء تحليلxml في السطر506 العمود22" open quote isexpeted for attribute '"type associated with an element type script
اختي الكريمة سأحل لك المشكل بنفسي يمكنك إرسال القالب الخاص بك وسيتم إضافة الكود
حذفإرسال القالب عبر الإتصال بنا برابط التحميل .
شكرأ لك اخي على الاضافات الجميله
ردحذفممكن طريقه تصنيف التدوينه اذا كانت ادوات,تحميل,مقاله,اغنيه كما في مدونتك
واكون شاكر لك :)
اخي الفاضل ذلك هاك ( كود ) يتماشى مع القالب ، لا يمكن مشاركته لكن ستكون إضافات قريبة لها في التدوينات القادمة .
حذفاخي انا استخدمتها في قالب عادي ليس بلوجر وما زبط لماذا؟
ردحذفإذ لم يكن قالب بلوجر فلن تعمل
حذفتمت اخي اضافة الاداة ولكن مو بشكل موقعك ......
ردحذفاجريت بعض التغييرات فقط
حذفشكرا اخي هل استطيع اضافة واحدة اخرى على اليمين
ردحذفنعم تستطيع
حذفhttp://www.ar1web.com/
ردحذفالاظافة شغالة شكراااا الدليل http://amine4web.blogspot.com
ردحذفاضافه رائعه شكرا لك تم التركيب بنجاح
ردحذفhttp://yellowbnews.blogspot.com
العفو إخواني ، هنيئا لكم |o|
ردحذفاخي العزيز السلام عليكم شكر على المجهود الجبار بس انا عندي مشكله من ابحث عن <[[ لايوجد بل مدونه
ردحذفابحث عن skin الثاني هو المقصود
حذفاخي 4 خطوه لاتوجد
ردحذفلا يمكن ستجدها في أخر الكود بالقالب
حذفلقد قمت بالتركيب بنجاح ولكن لا اجد زر ارسال الرساله هناك حقل الاسم والبريد والرساله
ردحذفوليس هناك زر ارسال الرساله
رابط مدونتك ليتم مراجعة المشكل
حذفشكرا لك لقد تم حل المشكله بنجاح رابط المدونه
حذفayanatechnecal.blogspot.com
مشكورررررررررررر أخي الكريم
ردحذفمدونة آفاق
http://afaq0.blogspot.com/
أخي ممكن كود
ردحذفاخر التعليقات
الله يخليك أرسله عبر إميلي
MarouanTech@gmail.com
و شكرا لك يا حبيبي
شكرا صديقي
ردحذفارجو منك يا اخي ان تخبرني الحل الرجوك انا عملت كل شئ بالضبط ولاكن لم تظهر عندي ارجوك اخبني ما هو الحل ارجوك وشكرا
ردحذفلم تظهر ؟؟ رابط مدونتك
حذفيا أخي هاهو رابط مدونتيhttp://ahmedfarouk1.blogspot.com يمكن لك فحصعا وتر ان كنت كاذب ام لا:|
ردحذفبالراحة عليك اخي :) لم أقل شيئ يدعوك لتخيل أني كذبتك فقط طلبت منك معاينة لكي أرى المشكل بنفسي
حذفعلى العموم هل اضفت نموذج الإتصال من التخطيط إن لم يكن موجود أضفه
إذ مازال نفس المشكل أنسخ أكواد Css والتي تبدأ من /* CSS Contact Form */ ثم ابحث عن /* CSS Error Page */ وضعها فوقها أكواد Css
موفق.
شكرا لك يا أخي فانت انسان محترم وتستحق كل التقدير
ردحذفالعفو في أي أقت :D
حذفولكن يأخي انا عمل كل شئ ولاكن انظر علي شكلها كبيرها وليست بمكانها وهاهو عنوان المدونة
ردحذفhttp://ahmedfarouk1.blogspot.com/
او عنوان الصورة
http://im88.gulfup.com/dsHcVP.png
اخي أنت تركت الأكواد السابقة احذفها فهي مكررة ابحث عن /* Global Responsive */ فوقها ستجد أكواد /* CSS Contact */ احذفها كاملة ثم أحذف الأكواد التي تركتها ايضا بعد المشكل الأول
حذف:lv
ردحذفالسلام عليكم
ردحذفعندي مشكلة بسيطة جدا
بدل كلمة اتصل بنا تظهر كلمة CONTACT
هذه هيا صورة للمشكلة
https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t34.0-12/10715838_1527879847430137_604196401_n.jpg?oh=5e440504a50dee87e769c7e593e88971&oe=542EB7AC&__gda__=1412413052_5a99049b378c0904dcb8892123b5c917
عليكم السلام
حذفإذا كنت تستخدم اللغة الأجنبية فالبطبع ستظهر Contact غير إلى اللغة العربية من الإعدادات أو جرب تحرير أداة نموذج الإتصال وضع في العنوان اتصل بنا
هل الاضافة عاديةو ام مجانية
ردحذف!!! بالطبع مجانية ويمكن أن تركبها بأي قالب بلوجر
ردحذفلم اجد هذا الكود <[[ ما العمل
ردحذفموضوع جميل هذا رابط موقع أختي :
ردحذفhttp://www.omsaad.com/
إبحث عن skin
ردحذفاخوي طبفت وظهر لي الزر ولاكن عند الضغط عليه لا يظهر شيئ , صفحة بيضاء
ردحذفاضف نموذج الإتصال من التخطيط
حذفاخى لا يوجد نموذج الاتصال فى تخطيط
حذفالشكل الثاني به نموذج الإتصال ضمن الأكواد سيضاف تلقائيا
حذفاخي حسام لو سمحت ممكن الاضافة اللي في قالب المعاينة
ردحذفاللي هي الافضل لكم
لو سمحت ......
كيف اغير اللون الازرق
ردحذفقم بالبحث عن هذا اللون في الكود الأول : #2997e0
حذفوكذلك هذا عندما يمر الماوس عليها : #2588ca
مشكلة عند الضغط على ارسال الزر لا يعمل الحل ايه
حذفالسلام عليكم ... اريد جعل هذا الزر يكون جهة اليسار ... ارجو الحل
ردحذفاخى لقد ذهبت الى التخطيط يقول مُضاف بالفعل ولكنه ليس موجود او ليس مرئيا
ردحذفالسلام عليكم اخي مشكووووووور على الموضوع لكن ايناضع ايمايلي ليصلني رسائل الزوار
ردحذفلو سمحت من فين اجيب نموذج الاتصال
ردحذفالو السلام عليكم انا عرفت كيف اجيب النموذج بس عندي مشكلة ممكن تشوفها
ردحذفمني عارف اشرحلك هي انت ادخل على مدونتي وشوف المشكلة http://qmafia0.blogspot.com/