أضف نموذج مراسلة بلوجر بشكل مميز فى صفحة مستقلة
بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين
فى إطار التحديثات التى تقدمها جوجل لتطوير منصة بلوجر ، فقد قامت فى الآونة الأخيرة بتوفير نموذج الإتصال أو المراسلة من ضمن أدواتها وقد عرضنا بموضوع سابق كيفية إضافة نموذج المراسلة الرسمى لبلوجر بالعمود الجانبى لقالب المدونة.
ولكن يفضل كثير من المدونين تركيب النموذج بصفحة مستقلة أو مشاركة ، لذلك سأشرح طريقة إضافة النموذج الرسمى لبلوجر بشكل جديد ومختلف لصفحة مستقلة.
شكل نموذج الإتصال بعد تنسيقه والتعديل عليه
كيفية تركيب نموذج اتصال بلوجر فى صفة مستقلة
1. قم بتركيب الإضافة من أدوات بلوجر بالعمود الجانبى كما هو موضح بالموضوع السابق (تابع الشرح)
2.إضافة صفحة جديدة ثم أضف الكود التالى إلى وضع Html للصفحة
إنسخ الكود التالى كاملا
.condaianllkhirform {
background-image:url('https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_u6qPJtE2ThzoIJxQg2S81iHLNLH5zuP3bUpEyhzUhBX2-xCBzhxQlsru4sm3pWZ4nUtgypCuoz9eCS7HYHPEsXSzC9fIKNDnQ67VHV-YD5m8czrbJ1=s0-d');background-repeat:no-repeat;
margin: 50px auto;
padding: 60px 10px 40px 10px;
text-align: center;
width: 530px;
height: 350px;
-webkit-padding-end:40px;
}
.contact-form-widget {
max-width: 80%;
position: absolute;
right: 70px;
width: 80%;
height:100%;
}
.contact-form-name,.contact-form-email,.contact-form-email-message {
border: 1px solid #BBBBBB;
color: #605F5F;
max-width: 80%;
padding: 3px 5px 5px;
width: 80%;
font-size:16px;
font-family: tahoma;
text-align:right;
}
.contact-form-email-message {
margin-bottom:10px;
min-height:70px
}
.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
border: 1px solid #8F8F8F;
color:#000;
}
.contact-form-button-submit {
background: #85cfec;background: -moz-linear-gradient(top,#85cfec,#2895c0);background: -webkit-linear-gradient(top,#85cfec,#2895c0);
border:0;
color:#000;
font-size:16px;
padding:0 15px 26px;
font-family: tahoma;
box-shadow: 0 0 1px 0 #F86401;
border-radius:5px;
}
.contact-form-button-submit:hover {
background:#85cfec;
border:0;
color:#000;
box-shadow: 0 0 1px 0 #F86401;
border-radius:5px;
}
#ContactForm1_contact-form-submit2 {
background: #000;background: -moz-linear-gradient(top,#d22e2c,#000);background: -webkit-linear-gradient(top,#d22e2c,#000);
box-shadow: 0 0 1px 0 #000;
color:#fff;
font-size:16px;
padding:0 15px 26px;
font-family: tahoma;
border:0;
border-radius:5px;
}
#ContactForm1_contact-form-submit2:hover {
background:#424242;
box-shadow: 0 0 1px 0 #000;
color:#fff;
border:0;
border-radius:5px;
}
3. الآن لدينا نموذجين للإتصال، لإخفاء نموذج الإتصال الذى يظهر بالعمود الجانبى إذهب إلى تحرير القالب
ثم إنتقل إلى أداة contact Form 1 ثم قم بتوسعة كود الأداة عن طريق الضغط على الأسهم السوداء
ثم إحذف الأكواد الموجودة بين هذين الكودين
كما موضح بالصورة
ثم حفظ النموذج.يجب ملاحظة أن أداة contact Form 1 لابد أن تأخذ رقم 1 وإن إختلف الرقم قم بتبديله إلى رقم 1 .
يمكن الإطلاع على كيفية التعامل مع محرر القالب لأكواد Html بمدونات بلوجر
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا