طريقة إنشاء صفحة أتصال لبلوجر


كل مشرف أو مدير موقع يعرف أهمية تواصل مع متابعي موقعه, و وجود قناة تواصل بين الزوار و مشرفي الموقع يعد شيء مهم و أساسي لأي موقع, ولدا سنشرح لكم طريقة إنشاء صفحة أتصل بنا لمستخدمي منصة بلوجر بأستخدام أدا نمودج الاتصال

أولا يجب أن تسجل دخول لحسابك في بلوجر, ثم إلى تخطيط >> إضافة أداة >> المزيد من الأدوات >> نموذج الاتصال كما بصورة التالية,



وبعد إضافة  أداة أدخل إلى قالب >> تحرير html و بعد ذلك أضغط من على لوحة المفاتيح Ctrl + f و أبحث عن ]]></b:skin> ثم أضغط على Enter و بعد أن تجد الكود أضف الكود التالي فوقه ثم أحفط القالب


#ContactForm1 {display: none;}

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





<style>
#bixelio-contact-page {
direction: rtl;
text-align: right;
max-width: 88%;
margin: 15px auto;
}
        
.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 {
background-color: #f3f3f3;
max-width: none !important;
width: 100% !important;
min-height: 35px !important;
border: 0px;
box-shadow: none;
transition: box-shadow 0.4s ease;
-webkit-transition: box-shadow 0.4s ease;
-moz-transition: box-shadow 0.4s ease;
-o-transition: box-shadow 0.4s ease;
}
.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
box-shadow: inset 0 0px 6px rgba(34, 34, 34, 0.17);
}
.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;
border-radius: 3px;
-webkit-border-radius: 3px;
width: 100%;
height: 45px;
font-size: 1.1em;
transition: background 0.4s ease;
-webkit-transition: background 0.4s ease;
-moz-transition: background 0.4s ease;
-o-transition: background 0.4s ease;
}
#ContactForm1_contact-form-submit:hover {
background: #ea3452;
border: #ea3452;
}
</style>

<!-- Contact Widget by bixelio.blogspot.com -->
<div id='bixelio-contact-page'>
<form name="contact-form">
<p></p>
الأسم:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
الإيميل:
<span style="font-weight: bolder;color:red;">*</span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
الرسالة: <span style="font-weight: bolder;color:red;">*</span><br />
<textarea class="contact-form-email-message"  id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="أرسل" type="button" />
<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>
<!-- Contact Widget by bixelio.blogspot.com -->

تهاني الآن صفحة أتصل بنا الخاصة بمدونتك جاهزة للعمل, يمكنك أيضاً إضافة رسالة توضيحية لصفحة كما تشاء,

ملحوظة: لا تقم بإزالة أداة التي أضفتها في العملية الأولى من منطقة تخطيط  و إلا لن يعمل نموذج الأتصال

هناك تعليق واحد:

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

    ردحذف

بكسليو - لمحترفي تصميم و تطوير الويب © 2014

يتم التشغيل بواسطة Blogger.