BLANTERWISDOM101

اضافة نموذج اتصل بنا (صفحة اتصل بنا) لمدونة بلوجر بشكل احترافي

الأربعاء، 12 ديسمبر 2018

اضافة نموذج اتصل بنا (صفحة اتصل بنا) لمدونة بلوجر بشكل احترافي

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

الشكل الجديد لصفحة الأتصال بنا Contact-Form :- هنالك اكثر من كود جاهز اتصال بنا ولكن ما يهمنا هو الشكل بالطبع جميعنا نريد ان نجعل مواقعنا مريحه وجميله للزوار لذلك الاضافة التي سوف نضيفها الى مدونة بلوجر blogger أضافة فريده من نوعها لن ترى مثلها في بقية مدونات

معاينه الشكل 


تركيب الأضافة الى مدونات بلوجر 


 الأن نقوم بتركيب كود اتصل بنا 
    اذهب الى مدونتك  ومن ثم الى صفحات انشاء صفحه حولها من تأليف الى html واحذف اي كود تجده والصق الكود التالي



رمز Code:

<div dir="rtl" style="text-align: right;" trbidi="on">

<div class="contact_form">
<div class="contact_form-left">
<div class="form" style="float: left;">
ضع رسالتك هنا
<div class="widget ContactForm" id="ContactForm2">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
أسمك
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
أيميلك *
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
رسالتك *
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>

<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="أرسال" />
<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>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="contact_form-right">
<div style="float: left;">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="asidebar" style="clear: both; text-align: left;">
<a href="http://www.compromath.com/p/about.html" imageanchor="1"><img border="0" src="https://2.bp.blogspot.com/-tcF6GCwK0no/VV-ARhQddiI/AAAAAAAAABg/2UoxEUCMRGQ/s1600/photo-1421757295538-9c80958e75b0.jpg" /></a></div>


 مدونة ميدوز للمعلوميات

</div>
</div>
<div/>
</div>

<style>
#ContactForm2 {
    background: #4b4747;
}
    
    .contact_form {
    border: 1px solid #f5f5f5;
    padding: 0px 10px 20px 0;
    overflow: hidden;
    background: #e1e1e1;
}
    
.contact_form-left {
    padding: 2%;
    float: left;
    width: 376px;
}
    
.contact_form-right {
    width: 278px;
    float: left;
    padding: 2%;
}
    
    .contact-form-widget {
    margin: 0 auto;
    padding: 5%;
    width: 100%;
    max-width: 100%;
}
    
.contact-form-email-message {
        width: 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }
.form p {
    color: #5cb85c;
}
.asidebar img {
    border-radius: 70px;
    border: 2px solid #949e9e;
    width: 57%;
    padding: 1%;
}
.contact-social {
    float: left;
    background: black;
    padding: 5px;
    width: 250px;
}
.contact-social img {
    max-width: 40px;
}
.contact-social ul {
    list-style: none;
    display: inline;
}
.contact-social ul li {
    float: left;
    padding: 4px;
}
.contact-social ul li a{}
.contact-social-title p {
    float: left;
    background: #191919;
    color: #ffdb00;
    padding: 3px;
}
</style></div>

التعديل على الكود


  1. غير مدونة ميدوز للمعلوميات  الى اسمك او اسم موقعك مطور المواقع غيرها الى اختصاصك 
  2.  غير هذا رابط برابط صورتك او صورة موقعك https://2.bp.blogspot.com/-tcF6GCwK0no/VV-ARhQddiI/AAAAAAAAABg/2UoxEUCMRGQ/s1600/photo-1421757295538-9c80958e75b0.jpg

مشاركة المقال :
Medoz

انا محمد خالد عندي 20 سنه مدون عن التقنيه بالاخص بلوجر

0 comments