كونكر

19 نوفمبر، 2016

13:51

تكبير النص تصغير النص أعادة للحجم الطبيعي


بسم الله الرحمن الرحيم 

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

اليوم سنتعلم طريقه اضافة نموذج اتصال لمدونة بلوجر بطريقة سهلة وبشرح مبسط للمبتدئين  ...
______________________________________________________

اولا : ندخل للمدونة ونختار من اليمين اختيار صفحات كما مبين لكم بالصورة رقم 1 

- صورة رقم 1 -
_________________________________________________________________________

ثانيا : نختار صفحة جديدة من اعلى الموقع كما مبين لكم بالصورة رقم 2

- صورة رقم 2 -
_________________________________________________________________________

ثالثا : وبعد ان ندخل لاضافة صفحة جديدة نغير الخيار من تأليف ل HTML كما نرى بالصورة رقم 3

- صورة رقم 3
_________________________________________________________________________

رابعا : نضيف هذا الكود داخل صفحة HTML ونحفظها تحت اسم اتصل بنا .


<div dir="rtl" style="text-align: right;" trbidi="on">
<form name="contact-form">
<span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: large; font-weight: 700;"><i class="fa fa-user"></i> الأسم&nbsp;</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> 
<span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: large; font-weight: 700;"><i class="fa fa-envelope"></i> البريد الإلكتروني&nbsp;<span style="color: #f56954; font-size: small; font-weight: bold;">مطلوب</span></span><input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> 
<span style="color: #666666; font-family: &quot;open sans&quot; , &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: large; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> الرسالة&nbsp;<span style="color: #f56954; font-size: small; font-weight: bold;">مطلوب</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" /> 
<br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #00a102;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #00a102;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #5cc35d;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
</style></div>
__________________________________________________________________________

خامسا : بعد ان حفضنا الصفحة نضغط على عرض من تحت العنوان بالصفحة الرئيسية للصفحات وسيأخذنا للموقع, نستطيع ان ننسخ الرابط ونضعه داخل العنوان اتصل بنا بالموقع. 

_______________________________________________________________________

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

إرسال تعليق