القائمة الرئيسية

الصفحات

أخبار الاخبار

شرح طريقة انشاء صفحة سياسة الخصوصية وكذلك صفحة اتصل بنا 2020

   شرح طريقة عمل صفحة سياسة الخصوصية و صفحة اتصل بنا   

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

   تعلم كيفية انشاء صفحة اتصل بنا وصفحة سياسة الخصوصية  

يمكنك تحميل الملفات والصور المستخدمة فى الشرح من هنا
تحميل Download
كما يمكنك نسخ أكواد صفحة اتصل بنا مباشرتاً من هنا 👇
إنسخ الكود
<div dir="rtl" style="text-align: right;" trbidi="on">
<link href="//fonts.googleapis.com/earlyaccess/droidarabickufi.css" rel="stylesheet"></link>
<script>
var blogId = '4831102742381708591';
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='جاري الارسال...';
var contactFormMessageSentMsg = 'تم ارسال رسالتك بنجاح.';
var contactFormMessageNotSentMsg = 'تعذر إرسال الرسالة. الرجاء معاودة المحاولة في وقت لاحق.';
var contactFormEmptyMessageMsg ='صندوق الرسالة لا يمكن أن يكون فارغا.';
var contactFormInvalidEmailMsg = 'ادخل بريد إلكتروني صحيح.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>

<style type="text/css">
.login-body{
    direction: rtl;
    background: #5fa0dd;
    display: -webkit-box;
    margin: 10px;
    border-radius: 5px;
font-family: Droid Arabic Kufi;

 }
.login-01{
  width:85%;
  margin:5% auto 3%;
}
form {
   padding: 0% 1%;
}
form li.first,li.second{
  border:none;
  list-style:none;
  margin-bottom:10px;
  width:100%;
}
.icon,.icon2  {
  height:55px;
  width:55px;
vertical-align: top;
  display: -webkit-inline-box;
  border-top-right-radius: 0.3em;
  -o-border-top-right-radius: 0.3em;
  -moz-border-top-right-radius: 0.3em;
  -webkit-border-top-right-radius: 0.3em;
  border-border-bottom-right-radius: 0.3em;
  -o-border-bottom-right-radius: 0.3em;
  -moz-border-bottom-right-radius: 0.3em;
  -webkit-border-bottom-right-radius: 0.3em;
}
.user1 {
    background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 14px 15px #0088ff;
}
.email{
  background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 15px -39px #0088ff;
}
.msg{
  background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 16px 16px #0088ff;
}
li.first:hover .user1{
     background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 14px 15px #ef464b;
}
li.first:hover .email{
  background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 15px -39px #ef464b;
}
li.second:hover .msg {
  background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 16px 16px #ef464b;
}
/*-----*/
input[type="text"],form textarea {
    width: 77%;
    padding: 1.13em 1em 1.13em 1em;
    color: #858282;
    font-size: 17px;
    outline: none;
    height: 16.2px;
    background: #fff;
    font-weight: 500;
    border: none;
    font-family: inherit;
    border-top-left-radius: 0.3em;
    -o-border-top-left-radius: 0.3em;
    -moz-border-top-left-radius: 0.3em;
    -webkit-border-top-left-radius: 0.3em;
    border-border-bottom-left-radius: 0.3em;
    -o-border-bottom-left-radius: 0.3em;
    -moz-border-bottom-left-radius: 0.3em;
    -webkit-border-bottom-left-radius: 0.3em;
  }
  .button{

  }
form textarea {
  resize: none;
  height: 140px;
}
.login-01 input[type="button"]{
  font-size: 17px;
  font-weight: 300;
  color: #fff;
    font-family: inherit;
  cursor: pointer;
  outline: none;
  padding: 5px 10px;
  width: 25%;
  border: 2px solid #0088ff;
  float: left;
  background: #0088ff;
  border-radius: 0.3em;
  -o-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  margin-right:2.85em;
}
input[type="button"]:hover{
-webkit-transform: rotate(4deg);
  transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
}
li.lost {
  margin-bottom: 21px;
}
/*---------------*/
.copy-right {
  text-align: center;
  margin: 2em 0;
}
.copy-right p {
 color: #fff;
 font-size: 1em;
 font-weight:400;
}
.copy-right p a {
 color:#fff;
}
.copy-right p a:hover {
 text-decoration: underline;
}
.login-body .contact-form-email-message{
    height: 106px;
}
.login-body .contact-form-error-message-with-border{
    background: #c73352;
}
.login-body .contact-form-success-message{
    background: #c73352;
}
.login-body .contact-form-error-message-with-border,.all-emil contact-form-success-message{
    color: #fff;
    padding: 3px 0px;
    border-radius: 4px;
    margin: 10px 0 0 0;
    clear: both;
}
.login-body .contact-form-error-message-with-border img,.all-emil contact-form-success-message img{
cursor: pointer;
    float: right;
    padding: 0px 3px 0px 0;
}
/*-----start-responsive-design------*/
@media (max-width:1440px){
  .login-01 input[type="button"]{
  margin-right:1.85em;
  }

}
@media (max-width:1366px){
  .login-01 input[type="button"]{
  margin-right: 1.6em;
  }
   
}
@media (max-width:1280px){
   .login-01 {
    width: 40%;
    margin:5% auto 5%;
  }
  body h1 {
  font-size: 2.7em;
}

}
@media (max-width:1024px){
  .login-01 {
  width: 45%;
}
 body h1 {
  font-size: 2.5em;
}

}
@media (max-width:768px){
  .login-01 {
  width: 63%;
}
 body h1 {
  font-size: 2.3em;
}
}
@media (max-width:640px){
  .login-01 {
  width: 73%;
  }
  body h1 {
  font-size: 2.1em;
}
}
@media (max-width:480px){
   .login-01 {
    width: 85%;
 }
  .copy-right p {
    font-size: 0.9em;
  }
input[type="text"], form textarea{
 height: 14.2px;
}
form textarea {
    height: 140px;
}
   input[type="text"], form textarea {
  width: 77%;
  padding: 1em 1em 1em 1em;

  }
  .icon, .icon2 {
  height: 48px;
  width: 48px;
  }
  .user1 {
    background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 11px 12px #0088ff;
      background-size: 45%;
}
.email{
  background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 12px -36px #0088ff;
    background-size: 45%;
}
.msg{
  background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 14px 11px #0088ff;
    background-size: 45%;
}
li.first:hover .user1{
     background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 11px 9px #ef464b;
      background-size: 45%;
}
li.first:hover .email{
  background:url(https://p.w3layouts.com/demos/pink_contact_form/web/images/icons.png) no-repeat 12px -36px #ef464b;
   background-size: 45%;
}
li.second:hover .msg {
  background: url(https://p.w3layouts.com/demos/pink_contact_form/web/images/msg.png) no-repeat 14px 11px #ef464b;
   background-size: 45%;
}
form li.first, li.second {
  margin-bottom: 5px;
  }

}
@media (max-width:600px){
.login-01 {
    width: 100%;
}
}
input[type="text"], form textarea {
    width: 65%;
}

  }


</style>
 <br />
<div class="login-body">
<div class="login-01">
<form name="contact-form">
<ul>
<li class="first">
     <a class=" icon user1" href="https://www.blogger.com/null"></a><input class="text" id="ContactForm1_contact-form-name" name="name" placeholder="الأسم" type="text" value="" />
     <div class="clear">
</div>
</li>
<li class="first">
     <a class=" icon email" href="https://www.blogger.com/null"></a><input class="text" id="ContactForm1_contact-form-email" name="email" placeholder="البريد الالكتروني" type="text" value="" />
     <div class="clear">
</div>
</li>
<li class="second">
    <a class=" icon msg" href="https://www.blogger.com/null"></a><textarea id="ContactForm1_contact-form-email-message" name="email-message" placeholder="محتوى الرسالة" value="Message"></textarea>
    <div class="clear">
</div>
</li>
</ul>
<input id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="إرسال" />
   <br />
<div class="clear">
</div>
<div style="margin: 3px auto; max-width: 450px; text-align: center; width: 100%;">
<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>
</div>
</form>
</div>
</div>
</div>



 ملحوظة أخى :-
إذا لم يتوافق معك ذلك النموذج أو حدث معك أى خطأ فأنصحك باتباع الدرس الثانى👇

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

يمكنك تحميل الأكواد المستخدمة فى الشرح من هنا
تحميل Download
حل مشكلة عدم عمل زر ارسال فى صفحة اتصل بنا 
أو نسخ الكود من هنا👇
إنسخ الكود
<div dir="rtl" style="text-align: right;" trbidi="on">
<div id="contact-form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="الاسم" size="30" type="text" value="" />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="البريد إلكترونى" size="30" type="text" value="" />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="محتوى الرسالة" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" /> 
<br />
<div style="text-align: center;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<style type="text/css">#contact-form{background:#ececec;padding:10px;box-shadow:0 0 0 1px #d9dce1}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{margin:5px auto;border:1px solid #e3e3e3;transition:all .5s ease-out;width:100%;border-radius:10px;padding:8px 15px;margin-bottom:10px;font-family:'bein',Roboto,sans-serif}#ContactForm1_contact-form-submit{border:1px solid #e3e3e3;font:unset;text-shadow:1px 1px 5px #111;font-weight:700;font-size:14px;padding:5px 15px;background-color:#06de15;border-radius:5px;color:#fff;font-family:'bein',Roboto,sans-serif;letter-spacing:1px;cursor:pointer}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7)}.contact-form-error-message-with-border{color:#b90000;font-weight:700}</style>
<script src="https://www.blogger.com/static/v1/widgets/2227587253-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
_WidgetManager._Init('');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'contact-sec', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جارٍ الإرسال...', 'contactFormMessageSentMsg': 'تم إرسال رسالتك.', 'contactFormMessageNotSentMsg': 'تعذر إرسال الرسالة، يرجى المحاولة مرة أخرى في وقت لاحق.', 'contactFormInvalidEmailMsg': 'يلزم إدخال عنوان بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'لا يمكن أن يكون حقل الرسالة فارغًا.', 'title': 'نموذج الاتصال', 'blogId': 'قم بوضع ال id الخاص بمدونتك', 'contactFormNameMsg': 'الاسم إجباري', 'contactFormEmailMsg': 'بريد إلكتروني إجباري', 'contactFormMessageMsg': 'رسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script></div>


  أكواد صفحة إتصل بنا للمدونات التى باللغة الإنجليزية  
يمكنك نسخ أكواد نموذج اتصل بنا باللغة الانجليزية 👇
إنسخ الكود
<div dir="rtl" style="text-align: left;" trbidi="on">
<div id="contact-form">
<form name="contact-form">
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="E-mail" size="30" type="text" value="" />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Content" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="send" /> 
<br />
<div style="text-align: center;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<style type="text/css">#contact-form{background:#ececec;padding:10px;box-shadow:0 0 0 1px #d9dce1}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{margin:5px auto;border:1px solid #e3e3e3;transition:all .5s ease-out;width:100%;border-radius:10px;padding:8px 15px;margin-bottom:10px;font-family:'bein',Roboto,sans-serif}#ContactForm1_contact-form-submit{border:1px solid #e3e3e3;font:unset;text-shadow:1px 1px 5px #111;font-weight:700;font-size:14px;padding:5px 15px;background-color:#06de15;border-radius:5px;color:#fff;font-family:'bein',Roboto,sans-serif;letter-spacing:1px;cursor:pointer}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7)}.contact-form-error-message-with-border{color:#b90000;font-weight:700}</style>
<script src="https://www.blogger.com/static/v1/widgets/2227587253-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
_WidgetManager._Init('');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'contact-sec', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'The message could not be sent, please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact form', 'blogId': 'Put the ID of your blog', 'contactFormNameMsg': 'The name is required', 'contactFormEmailMsg': 'Mandatory email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
</script></div>

اتصل بنا
أذكر الله
بالتوفيق يارب
هل اعجبك الموضوع :
author-img
مصرى الجنسية عمرى 25 عام مدون ويوتيوبر عربى حاصل على بكالوريوس حاسبات ومعلومات بتقدير إمتياز والأن طالب فى الماجستير . وهدفى هو الأرتقاء بالمحتوى العربى من خلال مشاركة خبرتى فى مجال التقنية بأسلوب مبسط وعملى. youtube facebook twitter instagram facebook

تعليقات

14 تعليقًا
إرسال تعليق
  1. لو سمحت تساعدني كل حاجه مظبوطه وزر الارسال مفعل وغيرت الblog id بس مش بيوصل رسايل علي ال Gmail اعمل اي

    ردحذف
    الردود
    1. الحل ان حضرتك تغير القالب لقالب تانى وجرب نفس الاكواد الخاصة بالفيديو الثانى

      حذف
  2. السلام عليكم لقد قمت كما فعلت انت و تم ارسال الرسالة بنجاح و لكن لم اتوصل بالرسالة في في بريدي. المرجو ان تجيبني و لك جزيل الشكر

    ردحذف
    الردود
    1. اى انت بتستخدم دومين ايه وكمان قالب اسمة ايه وما هو اصدار بلوجر اللى بتستخدمة الاصدار الجديد ولا الكلاسيكى

      حذف
  3. السلام عليكم ورحمة الله وبركاته//// لقد قمت كما فعلت فالشرح وجربت كل الأكواد المذكورة .... ولحد الحين يجي تم الإرسال بس الرسالة ما توصل//مع العلم أني أستخدم :::- #دومين مجاني blogspot #قالب seoplus v5 free #وأنا الحين أستخدم إصدار بلوجر الجديد . مع العلم اني جربت أستخدم كل الأكواد مع إصدار بلوجر الكلاسيكي بس ما نفعش......................أرجو الرد ... ولك جزيل الشكر والإحترام

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

      حذف
  4. انا متابع من اول الدورة خطوه بخطوة وكل شئ بعملة زي ما حضرتك بتقول بالضبط وكاتب اي دي البلوج بتاعي وبرضو مجاش ليا اي رسالة وزر الرسائل شغال وبيقولي تم الدومين بتاعي مجاني

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

      حذف
  5. السلام عليكم ورحمة الله وبركاته أخي محمد !
    فعلت كما قلت بالضبط بالنسبة لصفحة سياسة الخصوصية وكانت شغالة بالأمس
    لكن اليوم بعد ما أنشأت صفحة اتصل بنا .. صفحة سياسة الخصوصية عندما أضغط عليها يقول :
    Invalid securityToken.
    Error 403
    فما الحل ؟!

    ردحذف
    الردود
    1. تمام يا غالي حليت المشكلة شاهدت الفيديو بتاعك برضو جزاك الله خيرا شرحك أكثر من رائع

      حذف
    2. طيب زي ما حضرتك شايف كدة إن التعليقات بتظهر بإسم الصفحة مش باسم الكاتب عشان انا لما بدأت أعملها عملتها بنفسي ف بالتالي مكتبتش اسم الناشر اللي هو اللي كتب المقالة مثلا يكون اسمي وعلمته باسم المدونة يعني الناشر بيكون اسم المدونة حالينا إزاي أخليه باسمي ؟!

      حذف
    3. تمام أخي محمد حليت المشكلة هذه أيضا هههه شكرا لك

      حذف
    4. ما كل الحاجات دى انا شرحتها فى الدورة كاملة على القناة ههههههه

      بالتوفيق يارب

      حذف
  6. اخي من كثرت الاكواد مابعرف من اول كود واخر كود او اني استخدمها كلها ممكن ترد عليا اخي كيف استخدم الاكواد لاني احول اعمل صفحت اتصل بنا وماتطلع لي مثل ما انت تعمل

    ردحذف

إرسال تعليق