شكل جديد لإضافة إتصل بنا في صفحة مستقلة

إخواني الكرام كيف حالكم اليوم اتمنى تكونوا بألف خير

اليوم بإذن الله سأقدم لكم شكل جديد وحصريا على المدونة لأداة إتصل بنا الخاصة ببلوجر

وأيضا هذه الإظافة لن تحتاج لوضعها في الصفحة الرئيسية كأداة عادية بل ستضعها في صفحة مستقلة

حتى لا أطيل عليكم ههي صورة من الإضافة

كما ترون في الصورة شكل أكثر من رائع أحسن من الشكل العادي 

وتتيمرز أيضا بتأثير ظهور جميل سأترككم تكتشفون ذالك بانفسكم بعد تركيب الإظافة في مونتكم

أو شيئ إبحث عن الوسم التالي ]]></b:skin>

ثم فقوه ضع هذا الكود

هذا الكود سيجعل أداة إتصل بنا مضافة لكن مخفية وهذا لكي نظهرها فقط في الصفحات المستقلة

طيب بعد ان اظفت الأداة وركبت الكود إذهب للصفحات ثم أظف صفحة جديدة فارغة وغير المحرر من تأليف إلى HTML

كما في الصور التالية

ثم بعد ذالك ضع الكود التالي في المحرر 

اقتباس :

<div dir="rtl" style="text-align: right;" trbidi="on">
<style>
#wrap-contact {width:530px; margin:20px auto 0; height:auto;} #form_wrap-contact { overflow:hidden; height:446px; position:relative; top:0px; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #form_wrap-contact:before {content:""; position:absolute; bottom:128px;left:0px; background:url('http://3.bp.blogspot.com/-cmD_gxIBhmo/Ugp1CmUG5xI/AAAAAAAAF9Y/5CUD_WnjOvw/s1600/before.png'); width:530px;height: 316px;} #form_wrap-contact:after {content:"";position:absolute; bottom:0px;left:0; background:url('http://4.bp.blogspot.com/-Ufp_JwBgLhE/Ugp1OAYZRPI/AAAAAAAAF9g/nWV0YQrBP8o/s1600/after.png'); width:530px;height: 260px; } #form_wrap-contact.hide:after, #form_wrap-contact.hide:before {display:none; } #form_wrap-contact:hover {height:776px;top:-200px;} #contact-form {background:#e9fbe9; position:relative;top:200px;overflow:hidden; height:200px;width:450px;margin:0px auto;padding:20px; border: 1px solid #52e052; box-shadow: 0px 0px 5px #00ff00; -webkit-transition: all 1s ease-in-out .3s; -moz-transition: all 1s ease-in-out .3s; -o-transition: all 1s ease-in-out .3s; transition: all 1s ease-in-out .3s;} #contact-form:hover {height:530px;} #ContactForm1_contact-form-name{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background:#000 url(http://2.bp.blogspot.com/-GoNmkIDybR0/UZuZDpVOXaI/AAAAAAAAEO8/pNPaQU1aiwQ/s1600/user.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email{ width: 399px; height:auto; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://3.bp.blogspot.com/-zGxMJ_C5R60/UZuZGnKgcuI/AAAAAAAAEPE/KwPOHFuBffc/s1600/pen.png)no-repeat 10px center; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-email-message{ width: 399px; height: 150px; margin: 5px auto; padding: 10px 10px 10px 40px; background: #000 url(http://4.bp.blogspot.com/-RzL4e1-qZD4/UZuZMsnxqSI/AAAAAAAAEPM/y-NS0XTs-x8/s1600/msg.png)no-repeat 10px 10px; color:#999; border:1px solid #00ff00; box-shadow: 1px 1px 10px #00ff00 inset; } #ContactForm1_contact-form-submit { width: 450px; height: 30px; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#52e052; text-shadow: 1px 0 0 #999; border:1px solid darkgreen; } #ContactForm1_contact-form-submit:hover { background:#00ff00; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 400px; margin-top:30px; }
</style>

<br />
<div id="wrap-contact">
<div id="form_wrap-contact">
<form id="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="الإسم الكريم" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="البريد الإلكتروني" placeholder="البريد الإلكتروني" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="الرسالة" placeholder="الرسالة" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="أرسل" />
<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>
</div>
</div>

وهكذا تكون إنتهيت من تركيب الشكل الجديد لإظافة إتصل بنا

أتمنى ان تعجبكم الإظافة الجديدة وأي سؤال لا تتردد في طرحه 

بالتوفيق للجميع ودمتم في رعاية الله وحفظه