مستجدات متبثة

لتركيب اضافة اتصال بنا Contact us بتصميم جميل للبلوجر .


سلام عليكم .. من جديد أعزائنا كل يوم و نأتيكم جديد ، عملية الاتصال الالكتروني عبارة عن تفاعل كتابي بين البشر عن  طريق الوثائق الالكترونية ، حيث أن النماذج الاتصالية الالكترونية التي تمكننا من الاتصال بالغير تكون مبرمجة حول ثلاث قطب وهي .
  - المستقبل أو المتلقي : هو الذي يتلقى الرسالة الاتصالية ويتفاعل معها . اما بالرد أو تركها غير مقروءة فهو بالحد تفاعل لكن                                        سلبي .
- الوسيلة ( Channel ) : التي سنقوم ببرمجتها اليوم ونقوم بتركيبها على البلوجر ، هي الأداة البرمجية أو القناة التي تستخدم في نقل معلومة اتصالية .
- الرسالة (message) : المحتوى المضمن للمعلومة الاتصالية ، متكاملة ومتوافقة مع الوسيلة أو القناة . ويكون المحتوى مكتوبا أو مصورا ، الا أن وسيلتنا لا تتوافق مع الرسالة المصورة فقط تتوافق مع الرسالة المكتوبة . لكن بالامكان برمجة وسيلة تتوافق مع الرسالة المصورة .

قبل الشروع في أي شيء احفظ قالبك على حاسوبك كاحتياط أولا و الطريقة من هنا .

1- معاينة نموذج  الاتصال بنا :
2 - تركيب نموذج الاتصال :
     - أولا : نضيف صندوق WIDGET جديد للمدونة ، بالدخول للبلوجر ع طريق حسابك ، ثم اختيار المدونة التي ستعدل عليها                  في الأخير تابع الصور التالية .


      - ثانيا: تدوين صفحة جديد على المدونة لكن بهذه الطريقة ، نظغط تحدد HTML فوق المحرر نلق الكود أدناه كما في الصورة                    أسفله .                  
                  --> الكود .
 <div dir="ltr" style="text-align: left;" trbidi="on">
<div id="contact_wrap">
<h3 dir="rtl" style="text-align: right;">
للاتصال بنــا</h3>
<form name="contact-form">
<div dir="rtl" style="text-align: right;">
<input id="ContactForm1_contact-form-name" name="name" placeholder="اسمك " size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" placeholder="بريدك الالكتروني" size="30" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="رسالتك هنا" rows="5"></textarea><input id="ContactForm1_contact-form-submit" type="button" value="ارسال" /></div>
<div dir="rtl" style="text-align: right;">
<a href="http://lhoosnet.blogspot.com/2015/03/programmer-contact-us-blogger.html" target="_blank">ركب لموقعك اتصل بنا</a></div>
<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>
</div>
<style type="text/css">/* Menyembunyikan elemen dalam postingan */#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}</style></div>


    ثالثا : تركيب تصاميم CSS للنموذج ، طريقة التركيب أنظر الصور باالأسفل بعد قراءة الأشطر التالية .
                 - أدخل على قالب ،
                 - تعديل كود HTML
                 - اضغط على Ctrl+Alt ،
                - ستظهر خانة البحث عن الأكود ، ابحث
                - ابحث عن الكود التالي /b:skin

                - و أضف فوقه الكود التالي :
#ContactForm1{display:none;}#contact_wrap {margin: auto;width: 321px;height: 380px;padding: 25px;border-radius: 1em;border-top:1px solid #dbdbdb;border-right:1px solid #b2b2b2;border-left:1px solid #dbdbdb;border-bottom:1px solid #9d9d9d;background-color:#cccccc;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);box-shadow: 1px 1px 5px #ccc;}#contact_wrap h3{color: #e8f3f9;font-family:Georgia;font-size: 20px;font-style:italic;font-weight:bold;margin: 0 -36px 20px -36px;padding: 12px;text-align: center;text-shadow: 2px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;position: relative;}#contact_wrap h3:before {content: ' ';position: absolute;bottom: -10px;left: 0;width: 0;height: 0;border-style: solid;border-width: 10px 0 0 10px;border-color: #333 transparent transparent transparent;}#contact_wrap h3:after {content: ' ';position: absolute;bottom: -10px;right: 0;width: 0;height: 0;border-style: solid;border-width: 0 0 10px 10px;border-color: transparent transparent transparent #333;}#ContactForm1_contact-form-name{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background:#f6f6f6 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-email{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background: #f6f6f6 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-email-message{width: 270px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px;font-family:Arial, sans-serif;background: #f6f6f6 url(http://1.bp.blogspot.com/-QduNKpNbFyQ/UZuZPuE_OfI/AAAAAAAAEPU/Rv4C4Kic2I0/s1600/msg2.png)no-repeat 10px 10px; color:#777;border:1px solid #ccc;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;}#ContactForm1_contact-form-submit {width: 95px; height: 30px; float: right; color: #FFF;padding: 0; cursor:pointer;margin: 25px 0 3px 0 0;background-color:#005a8a;border-radius:4px;text-shadow: 1px 0 0 #1f4962;-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color: #3689b9;border:1px solid #194f6d;}#ContactForm1_contact-form-submit:hover {background:#4c9bc9;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 320px;margin-top:35px;}



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

4- أي استفسار أترك تعليقا على الوضوع ، ان أعجبتك التدوينة شاركها مع أصدقائك ولا تنسى الضغط على زر أعجبني وشكرا على المتابعة .

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