Please Add Preloader
Blog

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

من مداد الجليد #بلوجر
السلام عليكم ورحمة الله وبركاته

آخر تحديث: 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>



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

من مداد الجليد

مقالة ذات صلة

Blog

كيفية فهم اللافتات والقوائم والمستندات الأجنبية بسهولة أكبر

مداد الجليد
Blog

بوابة اللغة تسبق شراء Guest Post للحملات الدولية

مداد الجليد
Blog

نصائح أمان الهواتف الذكية: كيفية حماية بياناتك الشخصية

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

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

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

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

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

    وشكراً

    http://safa1434.blogspot.com/

    رد

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

    رد

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

      رد

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

    رد

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

    رد

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

      رد

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

    رد

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

    رد

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

    رد

اترك رد

فاتك

أدوات التسوق من الانترنت مواقع مفيدة

دليلك الشامل للاشتراك في شاهد VIP إلكترونيًا: كل التفاصيل قبل ماتقرر

أدوات تصميم مواقع مفيدة

أربع أدوات يومية تجعل حياتك الرقمية أسهل

السعودية

لماذا تعد بوكسات محاصيل القهوة خيارًا اقتصاديًا وذكيًا لعشاق القهوة؟

رياضة

تطور تجربة العملاء – كيف يجب أن تعمل خدمة الدعم في منصة المراهنات الموثوقة؟