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

 

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

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

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

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

html contact

<section id='contact'> <div class='container'> <div class='row'> <div class='contact'> <b:section id='widget-contact'/> </div> </div> </div> </section>

كود 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}