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







أليك أهم و أجمل اضافة لمدونة بلوجر blogger نموذج اتصل بنا الجديد سهل التركيب وأحترافي الشكل حيث تعتبر صفحة اتصل بنا مهمة وعلى كل صاحب موقع او مدونه يجب ان تتوافر هذا الاضافة بموقعه (contact us form html) اهمية صفحة أتصل بنا لمدونة بلوجر وأيضا للمواقع والمنتديات :- تساعد الزوار على التواصل مع صاحب الموقع بخصوص مساعدة او اذا كان هناك رابط لايعمل او اي أمر اخر يدور في ذهن الزائر يسهل عليه تواصل مع مشرف مدونة الشكل الجديد لصفحة الأتصال بنا 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="http://lh5.googleusercontent.com/-iyW9jqINZ-o/AAAAAAAAAAI/AAAAAAAABgk/2vud2g5VBh8/s512-c/photo.jpg" /></a></div>

أحمد غازي
مطور مواقع 
من العراق
للتواصل معي</div>
</div>
<div class="contact-social-title">
مشاركة على صفحات تواصل</div>
<div class="contact-social">
<ul>
<li title="Be Facebook Fan"><a href="http://facebook.com/compromath/" rel="nofollow"><img src="https://3.bp.blogspot.com/-ItRge4ExyPM/WLGuPzMNJrI/AAAAAAAABc4/GD3vFk5MOzUgrDjgC7REIlykd0-NQaI0ACLcB/s1600/facebook%2Bicon.png" /></a></li>
<li title="Follow on Twitter"><a href="https://twitter.com/compromath" rel="nofollow"><img src="https://1.bp.blogspot.com/-0ifsCvU2iyg/WLGuQoNPZzI/AAAAAAAABdM/cBuFV60RoRQwKPbfAILlo_uiLOb4EplzACLcB/s1600/twitter%2Bicon.png" /></a></li>
<li title="Follow on Google Plus"><a href="https://plus.google.com/+compromath" rel="nofollow"><img src="https://3.bp.blogspot.com/-VJGWhCggjSA/WLG2JjkzikI/AAAAAAAABds/gu0IJKMlJj0mrM7skxwNr3ffLgM7jg03gCLcB/s1600/google%2Bplus%2Bicon.png" /></a></li>
<li title="Connection on Linkedin"><a href="https://www.blogger.com/"><img src="https://3.bp.blogspot.com/-1AtLT4ASRT8/WLGuQP_1mlI/AAAAAAAABdA/iwp_8j9-0So_jTElal9IuU7ASCNyhQFVACLcB/s1600/linkedin%2Bicon.png" /></a></li>
<li title="Follow on RSS"><a href="https://www.blogger.com/"><img src="https://4.bp.blogspot.com/-MR7UuGHTw_Y/WLG1b8rVRRI/AAAAAAAABdo/iYQljH5zwNQF6X1P7o5FRIfJtbmjUMChQCLcB/s1600/rss%2Bicon.png" /></a></li>
</ul>
</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;
التعديل على الكود
جزء 1
غير احمد غازي الى اسمك او اسم موقعك
مطور المواقع غيرها الى اختصاصك
العراق غيره الى بلدك
4- غير هذا الرابط برابط صورتك او صورة موقعك
5- غير احمد غازي برابط موقعك

جزء 2 خاصة بأيقونات تواصل
1-غيره الى صفحتك بالفيس بوك
2- ضع معرف حسابك في تويتر
3- صفحتك على جوجل بلس
4-ضع حسابك في linkedin
5- ضع rss لمدونتك

https://www.traidnt.net/vb/traidnt2709240/