تصميم صفحة هبوط على بلوجر اضافة قسم اتصل بنا

طريقة تصميم صفحة هبوط بلوجر اضافة قسم اتصل بنا

بعد اضافة قسم الخدمات في الدرس السابق سنقوم الان باضافة كود html & css حتى نستطيع اضافة اداة اتصل بنا من خلال ادوات بلوجر من قسم التخطيط

توجه الى لوحة تحكم بلوجر Blogger.
علامة التبويب المظهر
من قسم "مظهري" اضغط على السهم المتجه للاسفل ثم تعديل html
بعد اغلاق قسم <section id='service'> المسؤول عن قسم الخدمات سنقوم باضافة قسم اتصل بنا

كود html لاضافة اداة اتصل بنا

كود css لتنسيق قسم واداة اتصل بنا

html contact

#contact {padding: 150px 0;background: #fff;}
#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:auto;margin:5px auto 15px;padding:10px;background:#ffffff;border:1px solid #bbb;color:#777;border-radius:3px;}
#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fffff7;outline:0}
#ContactForm1_contact-form-email-message{width:80%;height:170px;margin:5px auto;padding:10px;background:#ffffff;border:1px solid #bbb;color:#777;border-radius:3px;}
#ContactForm1_contact-form-submit{display:block;height:35px;float:right;color:#FFF;padding:0 40px;margin:10px 0 5px;cursor:pointer;background-color:#fc6661;border:none!important;border-radius:50px;text-shadow:0 1px 0 #de5135}
#ContactForm1_contact-form-submit:hover{opacity:.9}
#ContactForm1_contact-form-submit:active{position:relative;top:2px;}
#ContactForm1_contact-form-submit:focus{outline:0}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left}

كوداتي - CodatyDev

تصميم صفحة هبوط على بلوجر اضافة قسم اتصل بنا

طريقة تصميم صفحة هبوط بلوجر اضافة قسم اتصل بنا

ليست هناك تعليقات:

إرسال تعليق