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

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

إخواني الكرام كيف حالكم

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

صورة من الشكل

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

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

ضعها في السيدبار او الفوتر

ثم بعد ذالك إبحث عن الوسم التالي ]]></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ6DuM-67SL5GnkvS3ZGxpRKDEoPZrSpAZz7i9ZTSXdKmQICdiziamwieM3sGM2Z2-RY9AxZg0QwSH-KGIvkdQkkokumQ9wgU0_feiko1TSZHgNBhGKOdtNfB8s8xpLhD4aVFhPxssXgI/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgycjPCmNmGS5aRSchZnODLx3qomXWEKhdD-onoXg8sRj5qPkcZCacG7IdXGp_sk0bKreZ8_M115Qobh_j5zF0veinF9CJ7xEBhr4thYpx8uP-Fs59iQRTpGK57UAf4GHyoEs2XEWtuHVY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiniaeEX6_5gSO3kR6qRQBhWdAvW_1dlbKNU14EVrrj6P9cnC_YpANss5YMkDYlz0CJHDSvHyMsAFes3DgULMkJwEr5gblY2QVVMHrGyQiVViU3HV1wYmRC-_ZLC4Do_J5sz7Uows1alp8/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

هذه اهم تعديلات ثم يمكنك تغيير الألوان فقط غير كون اللون بكود لون آخر

هذا كل شيئ اتمنى ان يعجبكم الشكل الجديد للإضافة

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

بواسطة : Unknown

المصدر