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

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

في البداية ستقوم بالدخول لمنطقة الأدوات الخاصة بك، قم بالضغط علي "أضافة أداة جديدة" ومن ثم أضغط على أضافة اداة نموذج الأتصال.
بعد التأكد من ظهور نموذج الأتصال في مدونتك قم بذهاب الى لوحة التحكم الخاصة بالمدونة ومن ثم اضغط علي تعديل HTML وقم بالبحث عن الكود <head>وقم بأضافة هذا الكود اسفل منه مباشرة .

<style>
#ContactForm1 {display: none;}
</style>

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

<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>

Unknown

أضف تعليق

دروس بلوجر

الجمعة، 19 سبتمبر 2014

هل أعجبتك التدوينة ؟

عالم القوالب

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

تدوينات ذات صلة