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

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

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

الشكل الجديد لصفحة الأتصال بنا 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