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

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

اليكم طريقة إضافة صفحة أتصل بنا لمدونة البلوجر بشكل إحترافي

إضافة صفحة أتصل بنا لمدونة البلوجر

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

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

اولا قم بتعطيل اداة اتصل بنا الحقيقية عن طريق فتح قالب موقعك عن طريق المظهر ثم تعديل html وقم باضافة هذا الكود أعلي  }]]></b:skin>
     div#ContactForm1 {display: none !important;}
ثم بعدها تضع هذا الكود أعلي  <head/> 
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/> 
ثم قم بحفظ القالب واذهب الي الصفحات وقم بانشاء صفحة جديدة باسم اتصل بنا (contact us ) وقم بالذهاب الي ال html
وقم باضافة هذا الكود 

    <style>.tb-contact-form-widget{background-color:#A4A4A4;background-image: url("https://i.imgur.com/OqH4GUk.jpg");background-repeat: repeat;background-position: 100% 100%;color:white;padding:25px;}.srbtn{display:inline-block;}.cform-button, .btn-reset{background-color:#f1f1f1;padding:5px 30px;}.cform-button:hover {background-color: #2980b9;color: #fff;}.btn-reset:hover {background-color: red;color: #fff;}.tb-contact-form-widget h3{text-align:center;margin:20px 0;padding:10px 0;border-top: 1px dotted #f5f5f5;}.c-form-name, .c-form-email { width: 50%; max-width: 50%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}.c-form-email-message { width: 95%; max-width: 95%; margin-bottom: 10px;padding: 10px;border: 1px solid #CCC;border-radius: 5px;box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;-moz-border-radius: 5px;-webkit-border-radius: 5px;-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;}.c-form-name, .c-form-email, .c-form-email-message input:focus{background-color: #FFF;box-shadow: 0 0 0 1px #E8C291 inset;border-color: #E8C291;outline: none;-moz-box-shadow: 0 0 0 1px #e8c291 inset;-webkit-box-shadow: 0 0 0 1px #E8C291 inset;}.b-social-buttons{list-style-type:none;text-align:center;}.b-social-buttons li{display:inline-block;padding:15px;background-color:#f5f5f5;border-radius:5px;}.b-social-buttons li a{color:#333;text-decoration:none;}#ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{width:100%;margin-top:35px;}</style><div class="tb-contact-form-widget"> <form name="contact-form"> <div class="form-name"><span><i class="fa fa-pencil-square-o"></i> اسمك :</span><br /><input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /></div> <div class="form-email"><span><i class="fa fa-envelope-o"></i> بريدك الالكتروني: </span><br /><input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /></div><div style="clear: both;"></div><div class="form-message"> <span><i class="fa fa-keyboard-o"></i> الرسالة</span><br /><textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><div class="srbtn"><input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="إرسال" /><input type="reset" class="btn-reset" value="Clear" /></div><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div><h3>تابعنا عبر مواقع التواصل الإجتماعي</h3><ul class="b-social-buttons"><li><a href="#" class="btn-lg"><i class="fa fa-twitter"> <span class="network-name">Twitter</span></i></a></li><li><a href="#" class="btn-lg"><i class="fa fa-facebook"> <span class="network-name">Facebook</span></i></a></li><li><a href="#" class="btn-lg"><i class="fa fa-youtube-play"> <span class="network-name">Youtube</span></i></a></li></ul></div></form></div>

وقم بحفظ الصفحة وستشتغل معك الاضافة , وان كان لديك خبرة في ال CSS بامكانك ان تعدل شكل الاضافة , وان واجهتك اي مشكلة في هذا الموضوع او مشكلة عامة في موقعك قم بكتابتها في صفحة الاستشارة المجانية او في اي موضوع وسيقوم بالرد عليك من احد فريق الموقع او مني شخصيا , او اذا كنت تريد شرح معين عن  أي شي في بلوجر او SEO  لاتتردد في كتابته في التعليقات

ارسال تعليق

أحدث أقدم