إنشاء وضبط نموذج أتصل بنا الرسمي لمدونات بلوجر

السلام عليكم ورحمة الله وبركاته

آخر تحديث: 2014-07-27
شرح طريقة ضبط نموذج اتصل بنا لمدونات بلوجر التعديل سوف يكون على الاضافة الرسمية لمدونات بلوجر

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

مثال حي للإضافة أنقر هنـــــــــــا
الشكل الجديد الذي سوف يظهر في مدونتك
نموذج أتصال بلوجر كيفية عمل نموذج لبلوجر

الشكل القديم


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

كيفية عمل هذه الإضافة

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

أضفها حيث تشاء لا تقلق سوف نقوم بإزلتها تلقائياً

الآن يجب علينا إخفاء الاداة من المدونة حتى تظهر فقط في صفحة نموذج الاتصال
إذهب إلى القالب ثم أنقر على تحرير html ثم بستخدام علامة التبويب للادوات إذهب إلى أداة نموذج الأتصال التي أضفنها سابقاً كما بالصورة التالية:
قم بتوسيع الأداة ثم أضف الكود التالي داخل الاداة
<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/AVvXsEg9SyJ-E6wSXX_Y-te7L-1oSjgJ_r6lVlmjNdRMHNQtFuZDLvCz2Pt9ZDqTFg2vSnRGWa2DB1pW_tOPpok-_YVAWky-KgZpYA1lQ8ku4qFwfpB4JYv8K5Mf4bPYHZNPbtsbepkX70fPhSg/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/AVvXsEgD7Xgjn-xVysMZ1FpXfBxOXhSbF-_LdeSKxptAmGcvAvbuVeQBiuI0bjFLpAsCBjjl8aVxvpo0GUEYcmOCkodS8DH-Mu4l2G2iKgHaTnjE2_01br5OD3oP9N7ypoNLFeo8SU6HtgBAkyk/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/AVvXsEg9SyJ-E6wSXX_Y-te7L-1oSjgJ_r6lVlmjNdRMHNQtFuZDLvCz2Pt9ZDqTFg2vSnRGWa2DB1pW_tOPpok-_YVAWky-KgZpYA1lQ8ku4qFwfpB4JYv8K5Mf4bPYHZNPbtsbepkX70fPhSg/s320/name.png) no-repeat 7px 0px; 
}
.contact-form-email { 
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD7Xgjn-xVysMZ1FpXfBxOXhSbF-_LdeSKxptAmGcvAvbuVeQBiuI0bjFLpAsCBjjl8aVxvpo0GUEYcmOCkodS8DH-Mu4l2G2iKgHaTnjE2_01br5OD3oP9N7ypoNLFeo8SU6HtgBAkyk/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/AVvXsEg9SyJ-E6wSXX_Y-te7L-1oSjgJ_r6lVlmjNdRMHNQtFuZDLvCz2Pt9ZDqTFg2vSnRGWa2DB1pW_tOPpok-_YVAWky-KgZpYA1lQ8ku4qFwfpB4JYv8K5Mf4bPYHZNPbtsbepkX70fPhSg/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/AVvXsEgD7Xgjn-xVysMZ1FpXfBxOXhSbF-_LdeSKxptAmGcvAvbuVeQBiuI0bjFLpAsCBjjl8aVxvpo0GUEYcmOCkodS8DH-Mu4l2G2iKgHaTnjE2_01br5OD3oP9N7ypoNLFeo8SU6HtgBAkyk/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> 


هكذا اصبح لديك صفحة أتصال بمدونتك وتم إزلتها من الصفحات الرئيسية
إنتهى حظاً طيباً لكم


مشاركات أقدم المقال التالي
15 تعليق
  • Unknown
    Unknown 28‏/11‏/2013، 1:29:00 ص

    السلام عليكم ... كيفك اخي الطيب ارجو ان تكون على صحة وعافية ...

    اريد نموذج اتصل بنا مثل الموجود في مدونتك اي المثبت في اليسار ...

    هل شرحته من قبل فقد بحثت في مدونتك ولم اجده ؟

    واذا تفضلت علينا باعلامنا كيفية زيادة عدد المواضيع في الصفحة الرئيسية لانني غيرت القالب وتظهر لي تسعة مواضيع فقط اريد ان ازيدها فكيف ذلك ؟

    وشكراً

    http://safa1434.blogspot.com/

  • مداد الجليد
    مداد الجليد 28‏/11‏/2013، 8:42:00 ص

    أهلاً وسهلاً بك،
    نموذج المراسلة كما هة في مدونتي سأشرح قريباً
    أما بالنسبة لزيادة عدد المواضيع أتبع الشرح التالي
    http://madad2.blogspot.com/2013/11/blog-post_6874.html
    شكراً

  • Unknown
    Unknown 28‏/11‏/2013، 3:55:00 م

    شكرا لك اخي الطيب نسأله تعالى ان يوفقك لكل خير ...
    ننتظر شرحكم ودمتم بصحة وعافية وخير

  • Unknown
    Unknown 13‏/12‏/2014، 3:23:00 م

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

    • مداد الجليد
      مداد الجليد 13‏/12‏/2014، 6:30:00 م

      بشكل تلقائي تذهب الى عنوان البريد الالكتروني الذي انشئت فيه المدونة او كل مشرف فيها وليس مؤلف

  • غير معرف
    غير معرف 17‏/12‏/2015، 3:39:00 م

    شرح اضافة صفحة اتصل بنا سهل

    شكرا لك

    • مداد الجليد
      مداد الجليد 17‏/12‏/2015، 8:53:00 م

      العفو عزيزي

  • special
    special 18‏/04‏/2016، 11:00:00 م

    للاهمية كيفية اضافة خانة رقم التليفون فى هذه الصفحة ارجو الرد للاهمية

    • مداد الجليد
      مداد الجليد 18‏/04‏/2016، 11:04:00 م

      لا يمكن اضافة رقم هاتف في نموذج الخاص ببلوجر
      يمكنك تخصيص واحد بنفسك من هنا
      http://www.madad2.com/2014/02/How-to-design-a-form-Contact-Us.html

  • غير معرف
    غير معرف 20‏/04‏/2016، 4:58:00 ص

    السلام عليك
    البروكسي اللي انا استخدمته حق السعوديه الموجود في الشرح وانتهت صلاحيه تقريباً نرجوا منكم افادتنا بوكيل اخر ولكم جزيل الشكر

    • مداد الجليد
      مداد الجليد 22‏/04‏/2016، 9:41:00 ص

      وعليكم السلام
      ان شاء الله قريبا

  • ويكي كالي
    ويكي كالي 07‏/06‏/2018، 2:57:00 م

    اشتغلت تمام جزاك الله خيرا
    طريقة عرض أرشيف المدونة لم تعجبني هل في طريقة لتغيير مظهرها وطريقة عرضها(لا أقصد التغيير من الاداة نفسها) ؟

    • مداد الجليد
      مداد الجليد 07‏/06‏/2018، 8:20:00 م

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

  • غير معرف
    غير معرف 23‏/11‏/2019، 2:07:00 ص

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

    • مداد الجليد
      مداد الجليد 23‏/11‏/2019، 10:57:00 م

      وعليكم السلام ورحمة الله
      اخي جرب هذا القالب هو مجاني تماما
      https://www.madad2.com/2014/02/Blogger-template-shop.html

أضف تعليق
عنوان التعليق