انشاء نموذج تواصل رائع لمدونات بلوجر

 بسم الله الرحمن الرحيم

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

 

تركيب الاضافة

1. اذهب الى بلوجر > صفحات

2. اختار " صفحة فارغة "

3. قم بتسمية الصفحة و ليكن " اتصل بنا "

4. اختار html code ثم الصق الكود التالى 

<div class='form'>
<!-- Custom Contact Form By MBT Starts -->

<form name='contact-form'>

<!-- Name Field -->

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

<!-- Email ID Field -->

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

<!-- Message Field -->

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

<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' type='reset' value='Clear'/>

<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>

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

<!-- Custom Contact Form By MBT Ends -->
</div>

5. احفظ ثم قم بنشر الصفحة

تخصيص الكود 

1. اذهب الى بلوجر > قالب

2. اعمل باك اب للقالب

3. اختار "edit html"

4. ابحث عن </head> و الصق الكود التالى قبلها

<style>
/*---- Compatible contact Form by MBT -----*/
.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/AVvXsEhXMudeM2ASUb942mfohvoqsC3UibtBpxNWXfXkiQ7s9EaWslAaMz5YLkA1jCkeQ0CNfQJa1rt1cb-9ZmxBJiUugYwSwbDpDI5UenI6trtZgt9RwgFs7gcZRgLGilznSAJFA28rfpcpI6Y/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/AVvXsEgrzNOryWFngyPVfaByl6YiX1SFpWQJmoEomTVvWfzCsigQr66xlvlJ-Vds-AKJcLmzkvn5n7v1bdCo_OVCOYe0MHoipkqZjCicyFtgZSV8dFZZv7ZAe_Uy66yUBovaxrscG-W9q0OGze4/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;
}

.MBT-button-color {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.MBT-button-color:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
border-color: #F47C20!important;
}
.MBT-button-color:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
</style>

      <!--[if IE 9]>
    <style>
   
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXMudeM2ASUb942mfohvoqsC3UibtBpxNWXfXkiQ7s9EaWslAaMz5YLkA1jCkeQ0CNfQJa1rt1cb-9ZmxBJiUugYwSwbDpDI5UenI6trtZgt9RwgFs7gcZRgLGilznSAJFA28rfpcpI6Y/s320/name.png) no-repeat 7px 0px;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzNOryWFngyPVfaByl6YiX1SFpWQJmoEomTVvWfzCsigQr66xlvlJ-Vds-AKJcLmzkvn5n7v1bdCo_OVCOYe0MHoipkqZjCicyFtgZSV8dFZZv7ZAe_Uy66yUBovaxrscG-W9q0OGze4/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/AVvXsEhXMudeM2ASUb942mfohvoqsC3UibtBpxNWXfXkiQ7s9EaWslAaMz5YLkA1jCkeQ0CNfQJa1rt1cb-9ZmxBJiUugYwSwbDpDI5UenI6trtZgt9RwgFs7gcZRgLGilznSAJFA28rfpcpI6Y/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/AVvXsEgrzNOryWFngyPVfaByl6YiX1SFpWQJmoEomTVvWfzCsigQr66xlvlJ-Vds-AKJcLmzkvn5n7v1bdCo_OVCOYe0MHoipkqZjCicyFtgZSV8dFZZv7ZAe_Uy66yUBovaxrscG-W9q0OGze4/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>

• لتغيير الاوان قم بالتعديل على وسم  .MBT-button-color 

5. احفظ القالب و بكده نكون انتهينا