جاري تحميل ... ساحر الملاعب للمعلوميات

إعلان الرئيسية

المتابعون

أخبار ساخنة

إعلان في أعلي التدوينة

دورة بلوجر

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


إنشاء صفحة إتصل بنا وتركيبها على المدونة

الدرس الحادى

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

إتصل بنا : -

                 وهى من الصفحات الثابتة ونضيفها مرة واحدة وهى صفحة إلزامية لابد من وجودها في المدونة لو أردت الإشتراك في جوجل أدسنس 

أول شيء قم بنسخ كود صفحة إتصل بنا ونقوم بنسخه بالكامل وهذا هو الكود


<div dir="rtl" style="text-align: right;" trbidi="on">
<link href="//fonts.googleapis.com/earlyaccess/droidarabickufi.css" rel="stylesheet"></link>
<script>
var blogId = '3471223273963543604';
//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>


ثم نذهب إلى المدونة الخاصة بنا ونختار كلمة الصفحات سوف يظهر لنا هذا المربع




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

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

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

ملاحظة


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

ولكن نلاحظ أن الصفحة لم تظهر في الشريط الموجود أعلى الصفحة في هذه الحالة 


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


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

ليست هناك تعليقات:

إرسال تعليق

إعلان أسفل المقال