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

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

بواسطة شرقاوى ويب

الأربعاء، 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. قم بتغير رابط مدونتى الذى بالون الازرق برابط مدونتك وقم بنشر الصفحة

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