اضافة نموذج الاتصال بشكل جميل لمدونات بلوجر|SWE-UP

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

أولا :عليك التسجيل في بلوجر >>التخطيط>>إضافة أداة>>المزيد من الأدوات>>نموذج الاتصال جديد!! >>حفظ
لقد قمنا بانشاء نموذج اتصال بشكل مبسط لكن الان سوف نقوم بتغير مظهره ليصبح أجمل
ثانيا : عليك انشاء صفحة جديدة في مدونتك>>الصفحات>>صفجة جديدة>>صفحة فارغة>>HTML
نختار اسم الصفحة ولنفرض اتصل بنا او contact us ثم نلصق الكود التالي في الصفحة الجديدة التي أنشئتها للتو ثم نشر

<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">

<br />
<form name="contact-form">
<div style="text-align: left;">
<div style="text-align: justify;">

<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;">

<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;">

<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;">

<input class="WG-btnLogin" type="reset" value="تفريغ" />

<input class="WG-btnLogin" id="ContactForm1_contact-form-submit" type="button" value="إرسال" />
</div>
</div>

<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>

<br />
<div style="text-align: left;">
<div style="text-align: justify;">
<br /></div>

بعد حفظ الصفحة نذهب إلى بلوجر>>قالب>>تحريرHTML>>نضع مؤشر الماوس في اي مكان داخل القالب>>نظغط Ctrl+F
ثم نبحث عن هذا الوسم ]]></b:skin> ونلصق الكود التالي فوقه مباشرة

#ContactForm1
{
display: none ! important;
}

ثم نبحث عن هذا الوسم بنفس الطريقة </head> ونلصق الكود التالي فوقه مباشرة

<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/AVvXsEjBfjLZsYMMBpHOemVdymuTdIvSpzJE4j3dpLDu08_f5OOBEAW1oej7Bdp9AF6tsyzwcGB_qNoWm7hE4KELgHXHAypUaXToYwEvVK2vgxYstIh0rvRj-qyj1Azo-MEm9JyQhJBJKbJyc70/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/AVvXsEg4ASIeKrk8AHnU3mDk3wcpFUAEyFH6FQ0MXeSVZxAgyqxpW4IHKodfue7ixTcvZKd-QiGnp-nNG2TzOzOTDbsXR63E3QX_nX_ubK_syTUxmGen1J1c9GRnD936tkzQnnhOW0tLclMrDl0/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>



<style>
@media screen and (-webkit-min-device-pixel-ratio:0) {

.contact-form-name {

background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBfjLZsYMMBpHOemVdymuTdIvSpzJE4j3dpLDu08_f5OOBEAW1oej7Bdp9AF6tsyzwcGB_qNoWm7hE4KELgHXHAypUaXToYwEvVK2vgxYstIh0rvRj-qyj1Azo-MEm9JyQhJBJKbJyc70/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/AVvXsEg4ASIeKrk8AHnU3mDk3wcpFUAEyFH6FQ0MXeSVZxAgyqxpW4IHKodfue7ixTcvZKd-QiGnp-nNG2TzOzOTDbsXR63E3QX_nX_ubK_syTUxmGen1J1c9GRnD936tkzQnnhOW0tLclMrDl0/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>

احفظ القالب ومبارك عليك الشكل الجديد لنموذج الاتصال

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