الخميس, مايو 01, 2014

اضافة اتصل بنا للبلوجر مستقلة

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


طريقة التركيب

من خلال هذا الشرح المبسط سنتعلم افضل طريقة لأستغلال مميزات تلك الأداة، وفي البداية سنجاوب علي سؤال ما هي صفحات بلوجر؟ هي عبارة عن صفحات ثابته تستطيع المدونة الواحدة امتلاك 20 واحدة منها فقط ومن امثلها (أتصل بنا، من نحن، سياسية الخصوصية) وغيرها أذاً كيف نقوم بتجهيز صفحة أتصل بنا؟

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

في الخطوة التالية وبعد التأكد من ظهور نموذج الأتصال في مدونتك قم بالدخول منطقة القالب الخاصة بك ومن ثم اضغط علي تعديل HTML وقم بالبحث عن الكود التالي <head> وقم بأضافة الكود التالي اسفل منه مباشرة
<style>
#ContactForm1 {display: none;}

</style>
بعد القيام بتلك العملية ستجد ان نموذج الأتصال قد اختفي من مدونتك الأن قم بالدخول لمنطقة الصفحات في مدونتك وقم بأضافة صفحة جديدة "فارغة" أعطي للصفحة عنوان ما وليكن "أتصل بنا" و في نفس الصفحة قم بالدخول لمنطقة تعديل الاكواد المعروفة ب "HTML" ثم قم بمسح جميع الاكواد بها وقم بلصق الاكواد التالية بها مباشرة 
  <!-- contact us page by bloggeram.com -->
<div class="bloggeram-contact-page">
<p>هنا قم بكتابة رسالة توضحية للزائر</p>
<center>
<div class="contact-us-page">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<p>
</p>
<span class="contact-us-text">الاسم</span>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" autocomplete="off">
<p>
</p>
<span class="contact-us-text">بريد إلكتروني <span style="font-weight: bolder;">*</span></span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="">
<p>
</p>
<span class="contact-us-text">رسالة <span style="font-weight: bolder;">*</span></span>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p>
</p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="إرسال">
<p>
</p>
<div style="text-align: center; max-width: 222px; 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>
</div>
<br />
<p>تأكد من ظهور "تم أرسال رسالتلك"</p>
</center>
</div>

<link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>
<style>
.bloggeram-contact-page {
direction: rtl;
text-align: center;
}
.contact-us-page {
width:98%; max-width:400px;
}
.contact-us-text {
float: right;
}
.contact-form-button, .contact-form-button-submit, #ContactForm1_contact-form-submit {
font-family: 'Droid Arabic Kufi';
color: #fff;
background: #111;
border-color: #111;
width: 95%;
height: 45px;
font-size: 1.1em;
}

.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: none !important;
width: 95% !important;
min-height: 40px !important;
font-family: 'Droid Arabic Kufi' !important;
}
.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
box-shadow: none;
}
.contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {
box-shadow: none;
outline: none;
}


.contact-form-widget {
width: inherit;
max-width: none !important;
padding: 10px 12px 5px 0px;
font-size: .90em;
}
#ContactForm1_contact-form-submit {
font-family: 'Droid Arabic Kufi', Voces;
color: #fff;
background: #111;
border-color: #111;
width: 95%;
height: 45px;
font-size: 1.1em;
}
#ContactForm1_contact-form-submit:hover {
background: #FFA200;
border: #FFA200;
}
</style>
الجزء المحدد بالون الأحمر ضع به اى رسالة تريدها
الأن قم بالدخول لصفحتك ستجد انها اصبحت جاهزة للعمل بشكل جيد، يمكنك أيضاً أضافة رسالة توضحية في بداية النموذج، ثم قم بتجربتها ستجدها تعمل بشكل جيد.
ملوحظة: لا تقوم بأزالة الاداة الخاصة بنموذج المشاركة الموجودة في الادوات بدونها لن تعمل الاداة
من فضلك اضغظ لايك لمشاهدة لينك التحميل

0 تَعْلِيق:

إرسال تعليق