أخر المقالات
تحميل...

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

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

آخر تحديث: 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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/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(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 0px; 
}
.contact-form-email { 
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 6px; 
padding: 15px 15px 15px 28px;
 
}
.contact-form-email { 
background: #FFF url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/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> 


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


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

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

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

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

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

وشكراً

http://safa1434.blogspot.com/

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

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

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

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

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

شكرا لك

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

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

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

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

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي

نحن نعرض الإعلانات على الموقع للإسهام في تحسين موقعنا.

نحن لانستخدم إعلانات ضارة او مزعجة في موقعنا نأمل منكم تعطيل الاداة في الموقع حتى تتمكن من مشاهدة الإعلانات.

شكرًا لك

×