طريقة انشاء صفحة اتصل بنا في مدونة بلوجر - Contact Us

   

  ان اهم شيء لمدون بلوجر في مدونته هو اضافة اتصل بنا او Contact us بالانجليزية فهي تسمح له بالتواصل مع زواره ومعرفة احتياجاتهم وطلباتهم كما تقدم له ميزة معرفة ايميلتاهم ليرسل اليهم التدوينات الجديدة مباشرة لبريدهم , هذه الاضافة تلعب دورا مهما في خلق الاتصال وعلاقة مع القراء فهم يلعبون دورا حيويا في ابلاغك باخطاءك ومساعدتك على الرقي وتقديم الافضل لذا اليوم سنشرح لكم كيفية اضافة اداة اتصل بنا لمدونتك على بلوجر .

 

طريقة اضافة الاداة :  

• اولا نتجه الى بلوجر وسجل دخولك الى مدونتك 
• من لوحة التحكم اتجه الى " التخطيط او Mise en page " 

 

•  من صفحة التخطيط نضغط على " اضافة اداة - Add gadget "  من اي مكان نريده
• من النافذة التي تظهر لنا نختار " المزيد من الادوات - More gadget " تظهر على اليسار 
• ثم نضغط على الاداة " نموذج الاتصال - Contact form "

ثانيا : اضافة الاكواد CSS الى القالب :

 نقوم بالذهاب الى لوحة التحكم الخاصة بنا ثم نتوجه الى " القالب - Template " ثم نضغط على "تحرير Html - Edit html ' 

 

ثم اضغط في لوحة المفاتيح على الزرين  "Ctrl + F" ونبحث عن الزر ]]></b:skin> ثم اضف قبله/فوقه الكود التالي :

/* CSS Contact */
 #ContactForm1,#ContactForm1 br{
    display:none;
}
 #ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
     width:50%;
    height:auto;
    margin:5px auto;
    padding:10px;
    background:#fff;
    color:#444;
    border:1px solid #e9e9e9;
    border-radius:3px;
    transition:all 0.5s ease-out;
}
 #ContactForm1_contact-form-email-message{
    width:450px;
    height:175px;
    margin:5px 0;
    padding:10px;
    background:#fff;
    color:#444;
    font-family:'
    Open Sans'
    ,sans-serif;
    border:1px solid #e9e9e9;
    border-radius:3px;
    transition:all 0.5s ease-out;
}
 #ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
    outline:none;
    background:#fff;
    color:#666;
    border-color:rgba(81,203,238,1);
    box-shadow:0 0 5px rgba(81,203,238,0.7);
}
 #ContactForm1_contact-form-submit {
    font-family: 'Noto Kufi Arabic';
    float:right;
    background:#f3f3f3;
    color:#aaa;
    margin:10px auto;
    vertical-align:middle;
    cursor:pointer;
    padding:10px 18px!important;
    font-weight:700;
    font-size:14px;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:0.5px;
    border:none;
    border-radius:4rem;
    background-image: linear-gradient(-95deg, #f53b3b 0%, #f53b3b 50%, transparent 50%, transparent 100%);
    background-size:200%;
    background-position:0 0;
    background-repeat:no-repeat;
    transition: background-position .4s ease, color .4s ease;
    height: initial;
    line-height: initial;
}
 #ContactForm1_contact-form-submit:hover {
    color:#fff;
    background-position:100% 0;
}
 #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
     width:450px;
    margin-top:35px;
}

ثالثا : انشاء صفحة جديدة ثم اضافة كود html داخلها : 

من لوحة التحكم نتوجه الى " صفحات او Pages " ثم قم بانشاء صفحة جديدة 

بعدها من صفحة التحرير ضع عنوانا للصفحة  مثلا " راسلنا " 

ثم انتقل من وضع التأليف الى ضع html ثم قم بلصق الكود التالي :  

<div dir="rtl" style="text-align: right;">
<form name="contact-form">
<span style="color: #666666; font-family: Noto Kufi Arabic, Helvetica, serif; font-weight: 700;"><i class="fa fa-user"></i> الإسم </span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /><br />
<br />
<span style="color: #666666; font-family: Noto Kufi Arabic, Helvetica, serif; font-weight: 700;"><i class="fa fa-envelope"></i> عنوان البريد الإلكتروني <span style="color: #f56954; font-size: x-small; font-weight: bold;">ضروري</span></span><br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /><br />
<br />
<span style="color: #666666; font-family: Noto Kufi Arabic, Helvetica, serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> المحتوى <span style="color: #f56954; font-size: x-small; font-weight: bold;">ضروري</span></span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="إرسال" />  <br />
<br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments {display:none;}
</style>
</div>

بعد لصق الكود في صفحة Html قم بالضغط على زر " النشر او Publier " 

بعد نشر الصفحة يمكنك عرضها بالضغط على View حيث يمكنك بعدها الحصول على رابطها من اجل

 استخدامه في اقسام الموقع او فيما تحتاجها

هنا نكون وصلنا للنهاية نتمنى ان الشرح نال اعجابكم 

مصدر التدوينة مدونة : دون صح