السبت، 9 يناير 2016

اضافة نموذج جميل لصفحة اتصل بنا على مدونة بلوجر

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

 الان نأتي الى طريقة اضافته خطوة خطوة
أولاً عليك إضافة نموذج الأتصال في مدونتك
انقرعلى تخطيط > إضافة أداة
يمكنك اضافة الأداة في أي مكان لا مشكلة لأنها لن تظهر فيما بعد

 الآن يجب علينا إخفاء الأداة من المدونة حتى تظهر فقط في صفحة نموذج الاتصال
إذهب إلى القالب ثم أنقر على تحرير html ثم باستخدام علامة الانتقال الى الأداة إذهب إلى أداة نموذج الأتصال التي أضفناها سابقاً كما بالصورة التالية:
ابحث عن هذا الكود
<b:widget id='ContactForm1' locked='false' title='نموذج الاتصال' type='ContactForm'>
 وانقر على السهم الأسود الصغير كما في الصورة حتى يظهر الكود كاملا

الان عليك أن تقوم بنسخ هذه الأكواد الملونة كل في مكانه المناسب
<b:if cond='data:blog.url == &quot;&quot;'>

</b:if>
ليصبح الكود الخاص بنموذج الاتصال في الأخير هكذا
 <b:widget id='ContactForm1' locked='false' title='نموذج الاتصال' type='ContactForm'>
                  <b:includable id='main'>
<b:if cond='data:blog.url == &quot;&quot;'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
 </b:if>
  <b:include name='quickedit'/>
</b:includable>
                </b:widget>
الان أختر حفظ القالب ثم توجه إلى الصفحات ثم أختر إنشاء صفحة جديدة باسم أتصل بنا 
 html ثم إضغط على

ثم قم بنسخ الكود التالي وأضفه داخل الرسالة وأختر نشر

<div id="content"><br /><h5>أتصل بنا</h5><br /><div class="form"><form name="contact-form"><!-- مربع الاسم --><input class="contact-form-name" id="ContactForm1_contact-form-name" name="الأسم" onblur="if (this.value == &quot;&quot;) {this.value = &quot;الأسم&quot;;}" onfocus="if (this.value == &quot;الأسم&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="الأسم" /> <br /><br /><!-- مربع الاميل --><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;البريد الألكتروني&quot;;}" onfocus="if (this.value == &quot;البريد الألكتروني&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="البريد الألكتروني" /> <br /><br /><!-- مربع الرسالة --><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;أدخل نص الرسالة..&quot;;}" onfocus="if (this.value == &quot;أدخل نص الرسالة..&quot;) {this.value = &quot;&quot;;}" value="أدخل نص الرسالة.."></textarea> <br /><br /><!-- تفريغ --><input class="contact-form-button contact-form-button-submit MBT-button-color" type="reset" value="تفريغ" /> <!-- إرسال --> <input class="contact-form-button contact-form-button-submit MBT-button-color" id="ContactForm1_contact-form-submit" type="button" value="إرسال" /> <br /><!-- نهاية -->
<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><!-- تعديل مدونة مداد الجليد -->
</div></div>
<style>
  h5 {
font-family: 'Questrial', Verdana, sans-serif;
text-align: left;
font-size: 30px;
padding: 0;
margin: 0 0 20px 0;
position: relative;
color: #8C8C8C;
}
#content {
position: relative;
margin: 20px auto;
width: 420px;
z-index: 100;
padding: 30px;
border: 1px solid #383838;
font-size:14px;
color:#666;
/* My stipped background */
background: #D1D1D1; /* Old browsers */
background: -moz-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
background: -webkit-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
background: -o-repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
background: repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); /* FF3.6+ */
/*border-radius*/
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/*box-shadow*/
-webkit-box-shadow: 0px 1px 6px #3F3F3F;
-moz-box-shadow: 0px 1px 6px #3F3F3F;
box-shadow: 0px 1px 6px #3F3F3F;
}
#content:after {
background: #fff;
margin: 10px;
position: absolute;
content : " ";
bottom: 0;
left: 0;
right: 0;
top: 0;
z-index: -1;
border: 1px #E5E5E5 solid;
/*border-radius*/
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
   
.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/AVvXsEi9QNsi3O-O7rIS-gShVSptxkFOIKOKPZszvtMVB_2Kl_YPkdVxBtkP_1YWg-i7oa3IuEBywSn31OsyMvZi-UJWS2DOrAkMK1MdFjfLuyCD0jITYF7Rmvt4ABkuAWedvOK2_-ZA0-szZAQ/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/AVvXsEhZg0k2z8IdXB9XvSKTzvuBuyqvKAZAra1_8-qU_kzeGIzLqjcpfmow0iuISFnRHe7Il7aRn57clm7kaqLCNYZIFz-LJTdBXKq67zcSe0Ax29k8-0Ovk8mCPphyl2C622vQfTbqYyXS69I/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: 430px!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/AVvXsEi9QNsi3O-O7rIS-gShVSptxkFOIKOKPZszvtMVB_2Kl_YPkdVxBtkP_1YWg-i7oa3IuEBywSn31OsyMvZi-UJWS2DOrAkMK1MdFjfLuyCD0jITYF7Rmvt4ABkuAWedvOK2_-ZA0-szZAQ/s320/name.png) no-repeat 7px 0px; 
}
.contact-form-email { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZg0k2z8IdXB9XvSKTzvuBuyqvKAZAra1_8-qU_kzeGIzLqjcpfmow0iuISFnRHe7Il7aRn57clm7kaqLCNYZIFz-LJTdBXKq67zcSe0Ax29k8-0Ovk8mCPphyl2C622vQfTbqYyXS69I/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/AVvXsEi9QNsi3O-O7rIS-gShVSptxkFOIKOKPZszvtMVB_2Kl_YPkdVxBtkP_1YWg-i7oa3IuEBywSn31OsyMvZi-UJWS2DOrAkMK1MdFjfLuyCD0jITYF7Rmvt4ABkuAWedvOK2_-ZA0-szZAQ/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/AVvXsEhZg0k2z8IdXB9XvSKTzvuBuyqvKAZAra1_8-qU_kzeGIzLqjcpfmow0iuISFnRHe7Il7aRn57clm7kaqLCNYZIFz-LJTdBXKq67zcSe0Ax29k8-0Ovk8mCPphyl2C622vQfTbqYyXS69I/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>

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

كاتب الموضوع : abdelhak.dego

خذ الخبرة أو شاركنا بها على مدونة الخبرة في

شارك :
اعلان 1
اعلان 2
عربي باي