EnglishFrenchGermanSpainItalianDutchRussianPortugueseArabic

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

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

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

كما ترون في الصورة شكل أكثر من رائع أحسن من الشكل العادي 
وتتيمرز أيضا بتأثير ظهور جميل سأترككم تكتشفون ذالك بانفسكم بعد تركيب الإظافة في مونتكم
أو شيئ إبحث عن الوسم التالي ]]></b:skin>
ثم فقوه ضع هذا الكود

#ContactForm1 {display:none}

هذا الكود سيجعل أداة إتصل بنا مضافة لكن مخفية وهذا لكي نظهرها فقط في الصفحات المستقلة
طيب بعد ان اظفت الأداة وركبت الكود إذهب للصفحات ثم أظف صفحة جديدة فارغة وغير المحرر من تأليف إلى 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>

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

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

إرسال تعليق

التالي السابق الرئيسية