طريقة تركيب الإضافة

1- الدخول إلى لوحة التحكم الخاصة بك مدون -> تخطيط -> 'إضافة أداة "

2- الآن انقر على مزيد من الأداة -> تحديد نموذج الاتصال

3- احفط الأداة .

4- بعد ذلك الدخول إلى لوحة التحكم الخاصة بك ثم انقر على-> الصفحات

5- الآن انقر على صفحة جديدة -> اختر صفحة فارغة

6- الآن اضغط على HTML ولصق رمز أدناه في ذلك.

الكود

<div class='form'>

<form name='contact-form'>

<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<p></p>

<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<p></p>

<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == "") {this.value = "Leave Your Message..";}' onfocus='if (this.value == "Leave Your Message..") {this.value = "";}'></textarea>
<p></p>

<input class='WG-btnLogin' type='reset' value='Clear'/>

<input class='WG-btnLogin' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>

<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

</div>

7- اضغط على نشر الصفحة .

8- الآن انتقل إلى لوحة التحكم واختر> قالب

9- ثم اختر تحرير قالب HTML

10- إبحث عن الوسم ]]></b:skin>

11- ضع الكود التالي فوقه .

الكود

#ContactForm1
{
display: none ! important;
}

12- الآن إبحث ‘ن الوسم </head>

13- وضع الكود التالي فوقه .

الكود

<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/AVvXsEie00F8CvL2PC9QlsoWmIP5JBW8Q6Oa91VLazlglur9E-uc6kDURI1ldZPozSkAwQL-YGVk2bf2bcDXoNb73dooC9q_kvpLDQxDs6-MFOYIe3I3dpvPwc99s7LcoaxLiJz1OfRSdNpSxRA/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/AVvXsEhpEyDy240TzYjNxF1cQehuJGaU7lyPTJ5Z8vm2L5S-BqYa_cLouSkC4IBj6P46t4qrDxby5QAmj2JDFkkyl-fCX65lQZDaqstj26XQMh-JdI6iHUlgG_PZt8CaZRIypvUhkLf-X5VhuUM/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/AVvXsEie00F8CvL2PC9QlsoWmIP5JBW8Q6Oa91VLazlglur9E-uc6kDURI1ldZPozSkAwQL-YGVk2bf2bcDXoNb73dooC9q_kvpLDQxDs6-MFOYIe3I3dpvPwc99s7LcoaxLiJz1OfRSdNpSxRA/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/AVvXsEhpEyDy240TzYjNxF1cQehuJGaU7lyPTJ5Z8vm2L5S-BqYa_cLouSkC4IBj6P46t4qrDxby5QAmj2JDFkkyl-fCX65lQZDaqstj26XQMh-JdI6iHUlgG_PZt8CaZRIypvUhkLf-X5VhuUM/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>

14- احفظ القالب وتمتع بالإضافة .

رسالة مهمة جداً

عزيزي الزائر: انت تعلم كم يبذل من الجهد كاتب التدوينة كي يعدها لك لذلك أرجوك أن تترك لو كلمة شكر وهذا لن يكلفك شيء

إذا كان لديكم أي إقتراحات أو تساؤلات حول الموضوع اضغط هنا وقدم اقتراحك أو تساؤلاتك ونحن على إستعداد للإطلاع على اقتراحاتكم والإجابة عن تساؤلاتكم ... أهلاً بكم على أرض الإبداع والتمييز

Note:- الرجاء من الأخوة الكرام : زوار المدونة عدم النسخ دون ذكر المصدر

كتب بواسطة Expert Blogger

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

الطريقة الصحيحة لإضافة نموذج إتصال لمدونات بلوجر

طريقة تركيب الإضافة

رسالة مهمة جداً

كتب بواسطة Expert Blogger

0 التعليقات:

إرسال تعليق

المشاركات الشائعة