2016/09/18

اتصل بنا بشكل مبسط و جميل

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

الخطوة الأولى: إضافة أداة "اتصل بنا" إلى المدونة.
سجل دخولك إلى بلوجر ثم اذهب إلى [ تخطيط ] و في القائمة الجانبية نضغط على إضافة أداة، 
و سوف تفتح لك نافذة جديدة و على اليسار نضغط على المزيد من الأدوات تم نموذج الاتصال (كما توضح الصورة أسفله).

الآن أصبح لديكم نموذج الاتصال في القائمة الجانبية
لكن، أرجو أن لا تتسرعوا... لأننا سوف نقوم بحذفه (و ليس يدويا إنما باستعمال الأكواد) إن شاء الله في الخطوة الثالثة.

الخطوة الثانية: إنشاء صفحة "اتصل بنا".
الآن نصغط على [ الصفحات ]، تم صفحة جديدة (كما توضح الصورة أسفله).
و يمكنكم تسميتها "contact us" ، "contact" أو "page de contact" أو كما تحبون....

نضغط على HTML (كما تبين الصورة الآتية).

ثم نلصق هذا الكود أسفله كما تبين الصورة السابقة.
<div id="contact_wrap"><h3>Formulaire de contact</h3><form name="contact-form"><input id="ContactForm1_contact-form-name" name="name" placeholder="Nom" size="30" type="text" value="" /><input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><input id="ContactForm1_contact-form-submit" type="button" value="Envoyer" /><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></div><style type="text/css">/* Menyembunyikan elemen dalam postingan */#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}</style></div>
ثم نضغط على " نشر " في أعلى الصفحة على يسارك.

الخطوة الثالثة: تطبيق أكواد CSS. 
من أجل التعديل على مظهر نموذج الاتصال و حذف هذه الإضافة من القائمة الجانبية، سوف نقوم بإضافة أكواد CSS. 
و هناك نموذجين، [نموذج بألوان خفيفة] و [نموذج بألوان غامقة]. اضغط على اسم النموذج للمعاينة.

الآن نذهب [ قالب ] ثم [ تحرير HTML] 
و باستعمال المفتاحين Ctl+F نبحث على الوسم ]]></b:skin> ثم نلصق قبله مباشرة أكواد CSS الموافقة للنموذج الذي تريدونه. 
ملحوظة للتوضيح أكثر:
يتم إضافة أكواد النموذج قبل وسم إغلاق أكواد CSS في قالب المدونة.

أكواد CSS الخاصة بالــ [نموذج بألوان خفيفة]
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghth1GyWIiQnNVX_15n8Y98HQeRC3q9MjAGJU3WmxK_goLc9-uqDP2CqZXtdQZ-YR-N_XRH3J4lKkcVRbqPlpwr0pNVljjLHOp-mWdroppW6_hMmU8mUlav0J750Aee9_tOuvrPOSicYc/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Ta9wvluJuKVumxd4gz8JmJI-ukFnmpdp92-RUlFqnmo_KXEIUikQTjG0mAwse5ytnYHdUhEiVf3tD2MzQ-iKp7iKzEFD91oyrTN7qIkpZsm1QOEt46Kfp1meKcDABCwvKtVC8N8AsUA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd8j8T02NHuLuvZgahTIWwM26EflUbNtnaO2ZWk_FC3QvTKztjwq12UfbFo1zNh6RqpvgYNJ-exZsIFY2SbQEC7plhBsmpSFOLbuhA-Gv8Ddfswg3dwp2Lv2yp-13inn1T7szoDsFoLjQ/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;}

أكواد CSS الخاصة بالــ [نموذج بألوان غامقة]
#ContactForm1{display:none;} #contact_wrap {margin: auto;width: 321px;height: 380px;padding: 25px;border-radius: 1em;border: #600 solid 1px;border-bottom: #420000 solid 1px;background-color:#983738;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#bf5355', endColorstr='#983738');background-image:-webkit-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-moz-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-ms-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:-o-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);background-image:linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);}#contact_wrap h3{color: #fff;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 #3b5931;-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;background-color: #659156;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: #000 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 #000;}#ContactForm1_contact-form-name{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background:#2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghth1GyWIiQnNVX_15n8Y98HQeRC3q9MjAGJU3WmxK_goLc9-uqDP2CqZXtdQZ-YR-N_XRH3J4lKkcVRbqPlpwr0pNVljjLHOp-mWdroppW6_hMmU8mUlav0J750Aee9_tOuvrPOSicYc/s1600/user.png)no-repeat 10px center; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;}#ContactForm1_contact-form-email{width: 270px; height:auto;margin: 5px auto; padding: 10px 10px 10px 40px;background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Ta9wvluJuKVumxd4gz8JmJI-ukFnmpdp92-RUlFqnmo_KXEIUikQTjG0mAwse5ytnYHdUhEiVf3tD2MzQ-iKp7iKzEFD91oyrTN7qIkpZsm1QOEt46Kfp1meKcDABCwvKtVC8N8AsUA/s1600/pen.png)no-repeat 10px center; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 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: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRAMppS8URJ7fv9JRud9xYVtmok7LKk0gpwR4OrPUx33j9HG4FmpyL503N5dxOPCNldM7qlmvXRzD0PoIIjhrTQ64n-2wxPr5oicf2xSEfsKt862xI-KfNvNc7VvspVQJL0zHPp15hh58/s1600/msg.png)no-repeat 10px 10px; color:#d2d2d2;border:1px solid #ce6d6e;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 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: #659156;border:1px solid #333;}#ContactForm1_contact-form-submit:hover {background:#5d894d;}#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 320px;margin-top:35px;}
ثم حفظ النموذج.
و هكذا نكون قد انتهينا من درسنا هذا و ارجو أن تعجبكم طريقة إضافة هذه الإضافة.
و بطبيعة الحال، من لديه دراية في أكواد CSS، يمكنه التعديل عليها كما يشاء.
و إذا واجهتم أية مشاكل، فلا تترددوا في طرحها ضمن تعليقاتكم.
الموضوع السابق
الموضوع التالي

0 تعليقات: