دليل المدون

2014-01-18

أضف نموذج مراسلة بلوجر بشكل مميز فى صفحة مستقلة

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

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

envelop icon
ولكن يفضل كثير من المدونين تركيب النموذج بصفحة مستقلة أو مشاركة ، لذلك سأشرح طريقة إضافة النموذج الرسمى لبلوجر بشكل جديد ومختلف لصفحة مستقلة.

شكل نموذج الإتصال بعد تنسيقه والتعديل عليه

contact form

كيفية تركيب نموذج اتصال بلوجر  فى صفة مستقلة

1. قم بتركيب الإضافة من أدوات بلوجر بالعمود الجانبى كما هو موضح بالموضوع السابق (تابع الشرح)
2.إضافة صفحة جديدة ثم أضف الكود التالى إلى وضع Html للصفحة

 إنسخ الكود التالى كاملا

<style>
    .condaianllkhirform {
    background-image:url('http://download.mrkzy.com/u/1514_68cdc632e4051.png');background-repeat:no-repeat;
  margin: 50px auto;
      padding: 60px 10px 40px 10px;
      text-align: center;
      width: 530px;
 height: 350px;
    -webkit-padding-end:40px;
    }

    .contact-form-widget {
      max-width: 80%;
 position: absolute;
right: 70px;
      width: 80%;
      height:100%;
    }

    .contact-form-name,.contact-form-email,.contact-form-email-message {
      border: 1px solid #BBBBBB;
      color: #605F5F;
     max-width: 80%;
  padding: 3px 5px 5px;
  width: 80%;
  font-size:16px;
  font-family: tahoma;
text-align:right; 
    }

    .contact-form-email-message {
    margin-bottom:10px;
    min-height:70px
    }

    .contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
      border: 1px solid #8F8F8F;
      color:#000;
    }

    .contact-form-button-submit {
    background: #85cfec;background: -moz-linear-gradient(top,#85cfec,#2895c0);background: -webkit-linear-gradient(top,#85cfec,#2895c0);
    border:0;
    color:#000;
    font-size:16px;
    padding:0 15px 26px;
    font-family: tahoma;
    box-shadow: 0 0 1px 0 #F86401;
 border-radius:5px;
    }

    .contact-form-button-submit:hover {
    background:#85cfec;
    border:0;
    color:#000;
    box-shadow: 0 0 1px 0 #F86401;
 border-radius:5px;
    }

    #ContactForm1_contact-form-submit2 {
    background: #000;background: -moz-linear-gradient(top,#d22e2c,#000);background: -webkit-linear-gradient(top,#d22e2c,#000);
    box-shadow: 0 0 1px 0 #000;
    color:#fff;
    font-size:16px;
    padding:0 15px 26px;
    font-family: tahoma;
    border:0;
 border-radius:5px;
    }

    #ContactForm1_contact-form-submit2:hover {
    background:#424242;
    box-shadow: 0 0 1px 0 #000;
    color:#fff;
    border:0;
    border-radius:5px;
    }

    </style>

    <br />
<div class="condaianllkhirform">
<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<div style="text-align: right;">
<input class="contact-form-name" id="ContactForm1_contact-form-name" 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="الإسم" />
        </div>
<div style="text-align: right;">
<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="البريد الإلكتروني" />
        </div>
<div style="text-align: right;">
<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>
        </div>
<div style="text-align: right;">
<input class="contact-form-button contact-form-button-submit condaianllkhir-button-color" id="ContactForm1_contact-form-submit" type="button" value="إرسال" />
        <input class="contact-form-button contact-form-button-submit condaianllkhir-button-color" id="ContactForm1_contact-form-submit2" type="reset" value="مسح" /></div>
<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>
<span style="font-size: xx-small;"><br /></span>
<span style="color: #999999;"><span style="font-size: xx-small;"><br /></span>
</span><br />
<div style="text-align: left;">
<a href="http://www.condaianllkhir.com/"rel="nofollow" target="_blank"><span style="color: #999999;"><span style="font-size: xx-small;">Widget by </span><span style="font-size: xx-small;">condaianllkhir</span></span></a></div>
</div>
</div>
</div>
</div>


3. الآن لدينا نموذجين للإتصال، لإخفاء نموذج الإتصال الذى يظهر بالعمود الجانبى إذهب إلى تحرير القالب
ثم إنتقل إلى أداة contact Form 1 ثم قم بتوسعة كود الأداة عن طريق الضغط على الأسهم السوداء 
ثم إحذف الأكواد الموجودة بين هذين الكودين

 <b:includable id='main'>
</b:includable> 

كما موضح بالصورة
ثم حفظ النموذج.
يجب ملاحظة أن أداة contact Form 1 لابد أن تأخذ رقم 1 وإن إختلف الرقم قم بتبديله إلى رقم 1 .

يمكن الإطلاع على كيفية التعامل مع محرر القالب لأكواد Html  بمدونات بلوجر  


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

هناك 9 تعليقات

  1. @ احمد يسرى
    أضف الأداة أولا من خلال إذهب إلى لوحة تحكم بلوجر ثم تخطيط.
    2. أضف أداة ثم المزيد من الأدوات.
    3. إختيار نموذج الإتصال

    شرح بالصور على الرابط
    http://www.condaianllkhir.com/2013/05/blogger-contact-form.html

    ردحذف
  2. الله يوفقكم في شرح المزيد من البلوجر

    ردحذف
  3. شكراااا
    http://www.taqafa2.co.vu/

    ردحذف
  4. لم توضح انه يجب وضع كود css في مكانه

    ردحذف
  5. اللهم احفظ صاحب هده المدونة واجعله من عبادك الصالحين وادخله جنتك مع الأنبياء والأولياء ...قولو أمين لا أرضى بواحدة حتى أضم لها ألف أمين

    ردحذف
    الردود
    1. جزاك الله خيرًا كثيرا وأتمنى لكم التوفيق

      حذف
    2. اللهم امين يارب العالمين ووفقها لما فيه الخير والثواب واجعل هذا العمل المميز في ميزان حسناتها يارب العالمين

      حذف
    3. أشكرك كثيرا على المتابعة والدعم

      حذف

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

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون