EnglishFrenchGermanSpainItalianDutchRussianPortugueseArabic

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

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

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

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

ثم بعد ذالك إبحث عن الوسم التالي ]]></b:skin>

ثم فوقه ضع هذا الكود
#ContactForm1 {display:none}
هذا الاخير لإخفاء اداة إتصل بنا من مدونتك لكنها تبقى موجودة فقط لا تضهر
بعد ذالك ياتي دور تركيب الشكل الجديد

كل اللي عليك هو إضافة أداة جديدة ثم ضع فيها هذا الكود


<style>
#form-evolutions { position:fixed; bottom: 0; left:20px; float:right; } #contact-faceblog { height:310px; width:280px; background:#e9fbe9; border:1px solid #2A3E4C; padding:10px; display:none; } #ContactForm1_contact-form-name{ width: 230px; 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 #2A3E4C; box-shadow: 1px 1px 10px #2A3E4C inset; } #ContactForm1_contact-form-email{ width: 230px; 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 #2A3E4C; box-shadow: 1px 1px 10px #2A3E4C inset; } #ContactForm1_contact-form-email-message{ width: 230px; 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 #2A3E4C; box-shadow: 1px 1px 10px #2A3E4C inset; } #ContactForm1_contact-form-submit { width: 95px; height: 30px; float: right; color: #000; font-weight: bold; padding: 0; cursor:pointer; margin: 25px 0 3px 0 0; background-color:#2A3E4C; text-shadow: 1px 0 0 #999; border:1px solid #2A3E4C; } #ContactForm1_contact-form-submit:hover { background:#2A3E4C; } #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{ width: 230px; margin-top:30px; } #contactbutton { height:38px; width:302px; background-image:url('http://im72.gulfup.com/XfVIxt.png'); display:block; cursor:pointer; margin:auto; }
</style>
<script src="http://faceblog-evolutions.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $("#contactbutton").click(function(){ if ($("#contact-faceblog").is(":hidden")){ $("#contact-faceblog").slideDown("slow"); } else{ $("#contact-faceblog").slideUp("slow"); } }); }); function closeForm(){ setTimeout('$("#contact-faceblog").slideUp("slow")', 2000); }
</script>
<div id="form-evolutions">
<div id="contact-faceblog">
<form name="contact-form">
<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 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 id="contactbutton"></div>
</div>

هذا كل شيئ وستكون الإضافة قد ركبت على مدونتك
لو حبيت مثلا تغيير مكانها فغير في الكود التالي
{ position:fixed; bottom: 0; left:20px; float:right; }

فوق=top
تحت=bottom
يمين=right
يسار=left

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