طريق جديد لأحتراف التدوين

الأحد، 29 ديسمبر 2013

39 تعليق

طريقة عمل صفحة "أتصل بنا" في بلوجر بأستخدام أدوات بلوجر

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

من خلال هذا الشرح المبسط سنتعلم افضل طريقة لأستغلال مميزات تلك الأداة، وفي البداية سنجاوب علي سؤال ما هي صفحات بلوجر؟ هي عبارة عن صفحات ثابته تستطيع المدونة الواحدة امتلاك 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>

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

ملوحظة: لا تقوم بأزالة الاداة الخاصة بنموذج المشاركة الموجودة في الادوات بدونها لن تعمل الاداة
مرفقات الموضوع
معاينة الأضافة
Author image
عن الكاتب

محمد السيد وألقب ب (ميدو) مصري الوطن والجنسية، أبلغ من العمري 20 عاماً، بدأت في مجال التدوين في عام 2011، تدرجت في هذا المجال حتي يومنا هذا وقد بلغت من العلم قليله.

هناك 39 تعليقًا:


من خلال هذة التعليقات يمكنك مشاركة أفكارك مع زوارنا الكرام، لذا نرجو الألتزام بقواعد الأداب العامة والحفاظ علي محور الموضوع الذي تتناوله بلوجرام، سنقوم بنشر تعليقك بمجرد مراجعته في أقرب وقت

  1. أرجو الحصول على بريد حضرتك الإلكتروني للتواصل بخصوص تصميم مدونة

    ردحذف
  2. جزاكمـ الله ألف خير

    ردحذف
  3. للاسف اخى ليست شغاله
    ارجوا المساعده فى تركيبها

    ردحذف
  4. شكرررررررررررررررررررررررررا

    ردحذف
  5. أخي لقد واجهت مشكلة .. انا وضعت كل شيء تمام ولكن عند الضغط على ارسال الرسالة لا تظهر تم ارسال الرسالة ولا برسل الرسالة ممكن الحل ؟!

    http://www.feqraa.com/p/blog-page.html

    ردحذف
    الردود
    1. انا كذلك

      حذف
    2. هل اضفت نموذج الاتصال الى مدونة

      حذف
  6. بارك الله فيك اضافة جميلة وتعمل جيداً

    ردحذف
  7. بارك الله فيك أخي الكريم ، شكراً جزيلاً لك على إفادتنا ..

    ردحذف
  8. اضافة وشرح ممتاز جدا .. بارك الله فيك اخي . كنت استخدم نموذج فوكس ولكن ابلغت انه سبام وتم استبداله بموذج رسمي من بلوجر. لمشاهدة النموذج من هنا http://hayatalnase.blogspot.com/

    ردحذف
  9. اخى الفاضل تم تركيب الاضافة بنجاح فشكرا لك لكن عندى سؤال اين اجد الرسائل التى ترسل لى من الزوار او الاعضاء او اين ترسل

    ردحذف
    الردود
    1. في الايميل الدي أنشأة به المدونة

      حذف
  10. احسنت اخي.. طريقتك الوحيدة اللي نجحت مع مدونتي ووصلتني الرسالة لكن الخطأ الوحيد انه لاتظهر "تم ارسال رسالتك"

    http://thoughtsloverz.blogspot.com/

    ردحذف
  11. لا يعمل وبعدين لوين بترتسل الرساله ؟؟؟؟؟؟؟؟؟؟؟

    ردحذف
  12. اخي اريد ان اعرف كيف انشر اكثر من مقال ( منفصل )في بلوجر في صفحة غير الرئيسية وهل هذا ممكن

    ردحذف
  13. انا شاكر لك على هذا الجهد بارك الله فيك

    ردحذف
  14. شكرا لك على هذه التدوينة ساعدتني كثيرا .
    بارك الله فيك يا جميل

    ردحذف
  15. سؤال الرساله وين تروح طيب ؟

    ردحذف
  16. الرساله الي تنرسل وين تروح

    ردحذف
  17. البريد الى بيوصل عليه الرسايل اضيفه فين ؟

    ردحذف
  18. شكرا لكم ولكن أخي لقد واجهت مشكلة .. انا وضعت كل شيء تمام ولكن عند الضغط على ارسال الرسالة لا تظهر تم ارسال الرسالة ولا برسل الرسالة ممكن الحل ؟!

    ردحذف
  19. جزاك الله خيرا :
    http://twitteritwitter.blogspot.com/

    ردحذف
  20. شكرا جزيلا ...نترقب جديد موضوعاتك ^_^

    ردحذف
  21. هطه اتلاضافة غير شغالة في بلوجر لا يصل اي شيء في علبة الرسائل

    ردحذف
  22. بعد تطبيق الطريقة يتم التحويل الى مدونة أخري

    ردحذف
  23. شكرا كثير ..الاكواد تعمل بشكل صحيح باستثناء ان nav-bar تغير لونه عند اضافة هالكود .. وين المشكلة بحثت ومالقيت حل علواه تفيدني..

    ردحذف
  24. تم تثبيت الصفحة لكن الشريط المتحرك للاخبار فيها لا يظهر الكتابة.عنوان المدونة..
    https://goo.gl/PJc2zx

    ردحذف