الأربعاء، 2 مايو 2018

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

اسهل طريقة لانشاء صفحة اتصل بنا بشكل جديد لمدونات بلوجر
شرقاوى ويب
الأربعاء، 2 مايو 2018


انشاء صفحة اتصل بنا بشكل جديد لمدونات بلوجر


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

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

انشاء صفحة اتصل بنا بشكل جديد لمدونات بلوجر
انشاء صفحة اتصل بنا بشكل جديد لمدونات بلوجر

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


صفحة اتصل بنا من اهم الصفحات التى يجب ان تكون على مدونتك لتسهيل التواصل بينك وبين الزائر او المتابع وهى من الصفحات التى يشترط جوجل ادسنس ان تكون على مدونتك هى بنا لشرح طريقة التركيب.






شرح التركيب


  1. اذهب الى الصفحات قم بانشاء صفحة جديدة وقم بتسميتها تصل بنا
  2. اضف هذه الاكواد فى الصحفة داخل html

شرح التعديل


<style scoped="scoped">
.blanterinput{float:none;position:relative;margin-bottom:45px;margin-left:10px}.blanterinput input,.blanterinput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.blanterinput input:focus,.blanterinput textarea:focus{outline:none}.blanterinput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;right:0;top:10px;transition:.2s ease all}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:14px;color:#07ACEC}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{right:50%}.bar:after{left:50%}.blanterinput input:focus ~ .bar:before,.blanterinput input:focus ~ .bar:after,.blanterinput textarea:focus ~ .bar:before,.blanterinput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;right:0;pointer-events:none;opacity:.5}.blanterinput input:focus ~ .highlight,.blanterinput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{color:#fff!important;background:#07ACEC;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:right;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:left;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:left;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>
<form name="contact-form">
<div class="blanterinput">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>الاسم</label>
</div>
<div class="blanterinput">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label>البريد الالكترونى</label>
</div>
<div class="blanterinput">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label>الرسال</label>
</div>
<input id="ContactForm1_contact-form-submit" type="button" value="ارسال" />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '1018104453295592871';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x1018104453295592871','https://www.sharqawi-web.com','1018104453295592871');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">إرسال...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">تم ارسال رسالتك.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">لا يمكن إرسال الرسالة. الرجاء معاودة المحاولة في وقت لاحق.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">مطلوب عنوان بريد إلكتروني صالح.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">لا يمكن ترك حقل الرسالة فارغًا.</span>', 'title': 'Contact Form', 'blogId': '1018104453295592871', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
  1.  قم باستبدال 1018104453295592871 الذى باللون الاحمر ستجده مكرر اربع مرات بمعرف الخاص بك 
  2. قم بتغير رابط مدونتى الذى بالون الازرق برابط مدونتك وقم بنشر الصفحة

هذا كل شئ لا تنسى دعمنا لنستمر فى نشر المزيد انشاء الله

شاركه على :

2 Comments

avatar

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

رد
avatar

شكرا لك علي مرورك الطيب
تواصل معي من خلال صفحه اتصل بنا رجاءا

رد

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

التعبيرات