اضافة نموذج الاتصال بشكل جميل لمدونات بلوجر|SWE-UP
10:20 ص
غير معرف
4 Comments
10:20 ص غير معرف 4 Comments
اضافة نموذج الاتصال بشكل جميل لمدونات بلوجر|SWE-UP
سوف نقوم باضافة نموذج مراسلة لمدونتك حيث يتيح لزوار مدونتك المراسلة الفورية عبر الGmail بخطوات سهلة تابع معي
أولا :عليك التسجيل في بلوجر >>التخطيط>>إضافة أداة>>المزيد من الأدوات>>نموذج الاتصال جديد!! >>حفظ
لقد قمنا بانشاء نموذج اتصال بشكل مبسط لكن الان سوف نقوم بتغير مظهره ليصبح أجمل
ثانيا : عليك انشاء صفحة جديدة في مدونتك>>الصفحات>>صفجة جديدة>>صفحة فارغة>>HTML
نختار اسم الصفحة ولنفرض اتصل بنا او contact us ثم نلصق الكود التالي في الصفحة الجديدة التي أنشئتها للتو ثم نشر
لقد قمنا بانشاء نموذج اتصال بشكل مبسط لكن الان سوف نقوم بتغير مظهره ليصبح أجمل
ثانيا : عليك انشاء صفحة جديدة في مدونتك>>الصفحات>>صفجة جديدة>>صفحة فارغة>>HTML
نختار اسم الصفحة ولنفرض اتصل بنا او contact us ثم نلصق الكود التالي في الصفحة الجديدة التي أنشئتها للتو ثم نشر
بعد حفظ الصفحة نذهب إلى بلوجر>>قالب>>تحريرHTML>>نضع مؤشر الماوس في اي مكان داخل القالب>>نظغط Ctrl+F
<div dir="rtl" style="text-align: right;" trbidi="on">
<br /><div dir="rtl" style="text-align: right;" trbidi="on"><div style="text-align: left;"><div style="text-align: justify;"><h2>نموذج التواصل</h2><div>يمكنك طرح استفساراتك وسوف نجيبك باذن الله.</div></div></div><div class="form"><!-- Custom Contact Form By WG Starts --><br /><form name="contact-form"><div style="text-align: left;"><div style="text-align: justify;"><!-- Name Field --><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == "") {this.value = "الاسم";}" onfocus="if (this.value == "الاسم") {this.value = "";}" size="30" type="text" value="الاسم" /></div></div><div style="text-align: left;"><div style="text-align: justify;"><!-- Email ID Field --><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == "") {this.value = "البريد الالكتروني";}" onfocus="if (this.value == "البريد الالكتروني") {this.value = "";}" size="30" type="text" value="البريد الالكتروني" /></div></div><div style="text-align: left;"><div style="text-align: justify;"><!-- Message Field --><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == "") {this.value = "اترك رسالتك...";}" onfocus="if (this.value == "Leave Your Message..") {this.value = "";}" style="height: 131px; margin: 2px; width: 400px;" value="اترك رسالتك.."></textarea></div></div><div style="text-align: left;"><div style="text-align: justify;"><!-- Clear Button --><input class="WG-btnLogin" type="reset" value="تفريغ" /><!-- Send Button --><input class="WG-btnLogin" id="ContactForm1_contact-form-submit" type="button" value="إرسال" /></div></div><!-- Validation --><br /><div style="max-width: 222px; text-align: center; width: 100%;"><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form><!-- Custom Contact Form By WG Ends --><br /><div style="text-align: left;"><div style="text-align: justify;"><br /></div>
ثم نبحث عن هذا الوسم ]]></b:skin> ونلصق الكود التالي فوقه مباشرة
ثم نبحث عن هذا الوسم بنفس الطريقة </head> ونلصق الكود التالي فوقه مباشرة#ContactForm1{display: none ! important;}
.
احفظ القالب ومبارك عليك الشكل الجديد لنموذج الاتصال<b:if cond='data:blog.pageType == "static_page"'><style>#ContactForm1{ display:none!important;}</style></b:if>
<style>
/*---- Compatible contact Form by WG -----*/.contact-form-name, .contact-form-email, .contact-form-email-message {max-width: 220px;width: 100%;font-weight:bold;}.contact-form-name {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ50qyX5A7CaahisW-VmTwyq8SWUxA5lVxrGHBAm5DFHCsgMxjZmzbEpIIJkmZgck5vEWVSusAbpJ3aOxA_kPeuvtnNnCJCBpWzNxXHD7UU0qrBJ0ktoGiC71BwQW2HpQR3nyIGJSChJk/s320/name.png) no-repeat 7px 8px;background-color: #FFF;border: 1px solid #ddd;box-sizing: border-box;color: #A0A0A0;display: inline-block;font-family: Arial,sans-serif;font-size: 12px;font-weight:bold;height: 24px;margin: 0;margin-top: 5px;padding: 5px 15px 5px 28px;vertical-align: top;}.contact-form-email {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYELkb29LKR5MyokISCboblXs9uMw50TkwgdmgCtpy6Z8cjEOFsvdmlaMVKkbgEMFDglH5N-gZ8c_o9JxjX3JPRH2_z8r1lphFb24KW8FuHPEkn9zvAM1b-ybZ3YkfSmNzDDhvgV_vTLE/s320/email.png) no-repeat 7px 10px;background-color: #FFF;border: 1px solid #ddd;box-sizing: border-box;color: #A0A0A0;display: inline-block;font-family: Arial,sans-serif;font-size: 12px;font-weight:bold;height: 24px;margin: 0;margin-top: 5px;padding: 5px 15px 5px 28px;vertical-align: top;}
.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 5px 15px 5px 28px;
}.contact-form-email-message:hover {border: 1px solid #bebebe;box-shadow: 0 1px 2px rgba(5, 95, 255, .1);padding: 10px;}.contact-form-email-message {background: #FFF;background-color: #FFF;border: 1px solid #ddd;box-sizing: border-box;color: #A0A0A0;display: inline-block;font-family: arial;font-size: 12px;margin: 0;margin-top: 5px;padding: 10px;vertical-align: top;max-width: 350px!important;height: 150px;border-radius:4px;}
.contact-form-button {
cursor:pointer;height: 32px;line-height: 28px;font-weight:bold;border:none;}
.contact-form-button {
display: inline-block;zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */*display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em;-moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);}.contact-form-button:hover {text-decoration: none;}.contact-form-button:active {position: relative;top: 1px;}
.WG-btnLogin
{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:15px;background:#a1d8f0;background:-moz-linear-gradient(top, #badff3, #7acbed);background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";border:1px solid #7db0cc !important;cursor: pointer;padding:11px 16px;font:bold 11px/14px Verdana, Tahomma, Geneva;text-shadow:rgba(0,0,0,0.2) 0 1px 0px;color:#fff;-moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;-webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;margin-center:12px;float:center;padding:7px 21px;}
.WG-btnLogin:hover,
.btnLogin:focus,.btnLogin:active{background:#a1d8f0;background:-moz-linear-gradient(top, #7acbed, #badff3);background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";}.WG-btnLogin:active{text-shadow:rgba(0,0,0,0.3) 0 -1px 0px;}</style>
<!--[if IE 9]>
<style>.contact-form-name {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ50qyX5A7CaahisW-VmTwyq8SWUxA5lVxrGHBAm5DFHCsgMxjZmzbEpIIJkmZgck5vEWVSusAbpJ3aOxA_kPeuvtnNnCJCBpWzNxXHD7UU0qrBJ0ktoGiC71BwQW2HpQR3nyIGJSChJk/s320/name.png) no-repeat 7px 0px;}.contact-form-email {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYELkb29LKR5MyokISCboblXs9uMw50TkwgdmgCtpy6Z8cjEOFsvdmlaMVKkbgEMFDglH5N-gZ8c_o9JxjX3JPRH2_z8r1lphFb24KW8FuHPEkn9zvAM1b-ybZ3YkfSmNzDDhvgV_vTLE/s320/email.png) no-repeat 7px 6px;}</style><![endif]--><style>@media screen and (-webkit-min-device-pixel-ratio:0) {
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ50qyX5A7CaahisW-VmTwyq8SWUxA5lVxrGHBAm5DFHCsgMxjZmzbEpIIJkmZgck5vEWVSusAbpJ3aOxA_kPeuvtnNnCJCBpWzNxXHD7UU0qrBJ0ktoGiC71BwQW2HpQR3nyIGJSChJk/s320/name.png) no-repeat 7px 6px;padding: 15px 15px 15px 28px;
}
.contact-form-email {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYELkb29LKR5MyokISCboblXs9uMw50TkwgdmgCtpy6Z8cjEOFsvdmlaMVKkbgEMFDglH5N-gZ8c_o9JxjX3JPRH2_z8r1lphFb24KW8FuHPEkn9zvAM1b-ybZ3YkfSmNzDDhvgV_vTLE/s320/email.png) no-repeat 7px 8px;padding: 15px 15px 15px 28px;}
.contact-form-email:hover, .contact-form-name:hover{
padding: 15px 15px 15px 28px;}
.contact-form-button {
height: 28px;}}</style>
لا تنسانا من دعائك وكما استفدت من التدوينة اجعل أصدقائك يستفيدوا بمشاركة التدوينة عبر مواقع التواصل الاجتماعي او حتى عبر زر انقل هذه التدوينة لمدونتك كما يشرفنا ان تنضم لمدونتي في الجانب الأيسر صندوق انضم للموقع حتي يصلك كل جديد واي مشاكل تواجهها يمكنك ترك تعليقك أسفل التدوينة كما يمكنك ترك تعليق لتشجيعنا على الاستمرار
تحذير : ممنوع نقل الموضوع بدون ذكر المصدر مرفقا برابط الموضوع
هنا المصدر http://swe-up.blogspot.com/2014/04/swe-up.html
التسميات:
اضافات بلوجر
blogger
مواضيع ذات صلة

انشاء فهرس تدوينات خاص بمدونتك بشكل مميز جداً-site map

تركيب جرس التنبيهات باخر التعليقات لمدونتك كما في قوقل بلس

تصميم خاص بالوسم pre لجعله ملائم لكتابة الاكواد بالترقيم

جعل صورتين تدور بشكل (قلاب) على محور X او محور Y -سلايد قلاب

5قوائم افقية بتقنية الCSS تلائم كل الاذواق

تحميل كافة عناصر مدونتي

انشاء فهرس لمدونات بلوجر-خريطة الموقع

عرض الصور في قائمة جانبية بشكل مثير للانتباه
4 التعليقات
منور ياض :P
نورك ي حب
الاضافة لم تعمل اضغط ارسال وهو لا يريد الارسال ملحوظة كتبت كل البيانات
تأكد انك ضفت نموذج الاتصال من التخطيط
محول الأكوادالابتسامات