Seo Creator - مدرسة السيو

احترف السيو (SEO) مجانا مع "مدرسة السيو" وتعرف علي جميع اساليب وادوات السيو الداخلي والخارجي واهم استراتيجيات وطرق تحسين محركات البحث بالعربي

random

آخر الأخبار

random
جاري التحميل ...

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


 


صفحة الاتصال هي الطريقة التي يمكن أن يصل إليك من خلالها قارئ لمدونتك أو معلن أو راع أو شخص لديه إستفسار عام عن المدونة.

يمكن لمستخدمي BlogSpot استخدام نموذج اتصال في أدواتهم ، ولكن لا يمكنك إضافتهم إلى الصفحات. هذه مشكلة للمبتدئين. حيث لن يوفق ادسنس بما في ذلك معظم شبكات الإعلانات الأخرى عالية الجودة و الموثوقة على الموافقة على طلب الإنضمام إليها لإذا لم يكن لديك تلك الصفحات الهامة و التى منها صفحة من نحن و صفحة الإتصال و سياسة الخصوصية. لذا تأكد من إنشاء هذه الصفحات بمجرد إنطلاق و نشر مدونتك 


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

الطريقة الأولى: إستخدام قوالب إتصال جاهزة بصيغة HTML 

الخطوة الأولي - إذهب إلى واجهة بلوجر الخاصة بمدونتك و إضغط على الصفحات 
الخطوة الثانية - قم بإنشاء صفحة جديدة و قم بتسميتها "إتصل بنا" 


الخطوة الثالثة - قم بالضغط على خيار الـ HTML كما فى الصورة 


الخطوة الرابعة - قم بلصق الكود التالى و اضغط على زر نشر 

<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="الأسم" size="30" type="text" value="" />

</div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="البريد الألكتروني الألكتروني" size="30" type="text" value="" />

</div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="الرسالة" rows="7"></textarea>

</div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="إرسال" />

</div>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>

<style scoped="" type="text/css">
#ContactForm1,#comments,.post-body form.paypalpay br{display:none}
.post-body form.paypalpay{margin:0;text-align:center}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{font-family:'Quicksand',sans-serif;display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Google Sans',sans-serif;width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{font-family:'Quicksand',sans-serif;background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>



الطريقة الثانية - تخصيص أداة "اتصل بنا" في Blogger

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





الخطوة 3 - حدد أداة الاتصال بنا من القائمة وانقر على زر الإضافة. قم بإلغاء تحديد الخيار المرئي وحفظ الأداة.


الخطوة 4 - أضف صفحة جديدة إلى مدونتك. قم بتسمية هذه الصفحة ، "اتصل بنا". في محرر HTML لهذه الصفحة ، انسخ والصق رمز نموذج جهة اتصال HTML التالي:

<div id="custom_ContactUsFromForBlogSpotBlogger" class="widget ContactForm">
<div class="contact-form-widget">
<p>Get in touch with us by filling out the form below.</p>
<div class="form">
<form name="contact-form">
<p></p>
Your Name
<br>
<input type="text" value="" size="30" name="name" id="ContactForm1_contact-form-name" class="contact-form-name">
<p></p>
Your Email
<span style="font-weight: bolder;">*</span>
<br>
<input type="text" value="" size="30" name="email" id="ContactForm1_contact-form-email" class="contact-form-email">
<p></p>
Your Message
<span style="font-weight: bolder;">*</span>
<br>
<textarea rows="5" name="email-message" id="ContactForm1_contact-form-email-message" cols="25" class="contact-form-email-message"></textarea>
<p></p>
<input type="button" value="Send" id="ContactForm1_contact-form-submit" class="contact-form-button contact-form-button-submit">
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p id="ContactForm1_contact-form-error-message" class="contact-form-error-message"></p>
<p id="ContactForm1_contact-form-success-message" class="contact-form-success-message"></p>
</div>
</form>
</div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a title="Edit" target="configContactForm1" onclick="return _WidgetManager._PopupConfig(document.getElementById("ContactForm1"));" href="//www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1" class="quickedit">
<img width="18" height="18" src="//img1.blogblog.com/img/icon18_wrench_allbkg.png" alt="">
</a>
</span>
</span>
<div class="clear"></div>
</div>
ثم قم بالحفظ و مبروك عليك انشاء صفحة إتصل بنا خاصة بك

عن الكاتب

Marowan Essam

التعليقات


اتصل بنا

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

جميع الحقوق محفوظة

Seo Creator - مدرسة السيو