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

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

  
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>

وتضيف قبله هذا الكود

    <div style='display:none;'>

وفي نهاية الفورم (form) تغلق div بالطريقة الاتية :

</div>

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

<div style="margin:auto;margin-top:10px;background-color:#002142;border:1px solid #0CC; color:#FFF; font-family:'Droid Arabic Kufi', 'Times New Roman', Times, serif; font-size:20px;font-weight:bolder; height:50px; width:98%;line-height:50px;text-align:center;direction:rtl;">
  اتصــــل بنــا
</div>
<div style="background-color:#f5f5f5;border:1px solid #ccc; color:#002F5E; font-family:'Droid Arabic Kufi', 'Times New Roman', Times, serif; font-size:15px; height:auto; width:96%;margin:auto;line-height:30px;text-align:right;margin-left:auto; margin-right:auto;margin-top:7px;direction:rtl;font-weight:bold;padding:5px;">&nbsp; &nbsp; &nbsp;
اكتب هنا رسالة توضيحية للزئر

</br>
  <script>
  var blogId = ' 1421699815441362866';
  var contactFormMessageSendingMsg='ارسال';
     var contactFormMessageSentMsg = 'تم ارسال الرسالة بنجاح.';
  var contactFormMessageNotSentMsg = 'لم يتم ارسال الرسالة الرجاء المحاولة  مرة اخرى';
  var contactFormEmptyMessageMsg='حقل الرسالة فارغ';
  var contactFormInvalidEmailMsg = 'الرجاء ادخال ايميل صحيح..';
  var widgetLoaded=false;
  function sendEmailMsg() {
   if(widgetLoaded== false) {
_    WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
    widgetLoaded=true;
    document.getElementById('ContactForm1_contact-form-submit').click();
    }return true;}
  </script>
<div class="contact">
    <form name='contact-form' dir='rtl'>
    <div>ادخل اسمك : </div>
    <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
    <div>ادخل ايميلك: <em>(مطلوب)</em></div>
    <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
    <div>ادخل رسالتك: <em>(مطلوب)</em></div>
    <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5' cols="60">
    </textarea><p></p>
    <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='ارســـال' onclick="sendEmailMsg()"/>
    <div style='text-align: center; max-width: 450px; 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>
</div>

</div>
<style type="text/css">
.contact{
 width:80%;
 padding-right:10%;
 padding-left:10%;
 padding-top:10px;
 padding-bottom:15px;
 color:#223344;
 background:#e1e9ea;
  box-shadow:0px 1px 3px #999;
  -o-box-shadow:0px 1px 3px #999;
  -webkit-box-shadow:0px 1px 3px #999;
  -moz-box-shadow:0px 1px 3px #999;
 }
.contact div{
 font-size:12px;
 color:#444;
 font-family:'Droid Arabic Kufi',Arial;
 }
.contact [type='text']{
  width:50%;
  height:30px;
  background:#FcFeFf;
  border:1px solid #ccc;
  border-radius:5px;
  -o-border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
   padding-right:5px;
 }
.contact [type='text']:focus{
 background:#fff;
   box-shadow:0px 1px 3px #999;
  -o-box-shadow:0px 1px 3px #999;
  -webkit-box-shadow:0px 1px 3px #999;
  -moz-box-shadow:0px 1px 3px #999;
 
}
.contact textarea{
  width:80%;
  height:150px;
  background:#FcFeFf;
  border:1px solid #ccc;
  border-radius:5px;
  -o-border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
   padding:5px;
   margin-bottom:5px;
 }
.contact textarea:focus{
 background:#fff;
   box-shadow:0px 1px 3px #999;
  -o-box-shadow:0px 1px 3px #999;
  -webkit-box-shadow:0px 1px 3px #999;
  -moz-box-shadow:0px 1px 3px #999;
 
}
.contact [type='button']{
 background:#28B9FF;
 padding-left:15px;
 padding-right:15px;
 padding-bottom:2px;
 padding-top:2px;
   box-shadow:0px 1px 3px #999;
  -o-box-shadow:0px 1px 3px #999;
  -webkit-box-shadow:0px 1px 3px #999;
  -moz-box-shadow:0px 1px 3px #999;
  border:1px solid #ccc;
  border-radius:5px;
  -o-border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border:none;
 font-size:12px;
 color:#444;
 font-family:'Droid Arabic Kufi',Arial;
 cursor:pointer;
}
.contact [type='button']:hover{
 background:#208FFF left top;
 transaction:1s;
 
}
.contact em{
 color:#F00;
 font-size:10px;
 }
</style>

بعد ذلك انسخ رابط الصفحة واضفته بدل الرابط الذي في الكود التالي ونسخت الكود كامل وضعه في اي مكان في القالب او خذ رابط الصفحة ووضعته بمكان رابط في قالبك كالقائمة العلوية مثلا.

من لوحة  التحكم > التنسيق 

<a href=' http://www.blog.com/p/contactus.html'> اتصل بنا</a>

تم الدرس بحمدلله واتمنى يكون اعجبكم ، وصورة الموضوع تبين شكل اضافة اتصل بنا في صفحة منفصلة بدون استخدام مواقع خارجية واي سؤال حول الإضافة لاتتردد عن وضعه في تعليق.