منتديات احفاد الرسول

بسم الله الرحمن الرحيم قُلْ هُوَ اللَّهُ أَحَدٌ اللَّهُ الصَّمَدُ لَمْ يَلِدْ وَلَمْ يُولَدْ وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ
 
الرئيسيةاليوميةس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخولتفسير القران الكريم قراءة القران الكريماذاعات القران الكريمكتبقنواتقصص رائعة منتديات الياس عيساوي بث قناة الجزيرةاوقات الصلاةاستماع للقراءن الكريم
دليل سلطان للمواقع الإسلامية

شاطر | 
 

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

اذهب الى الأسفل 
كاتب الموضوعرسالة
eliasissaoui
Admin
avatar

ذكر عدد المساهمات : 16999
تاريخ التسجيل : 04/07/2013
الموقع : https://www.youtube.com/watch?v=QriWAmC6_40

مُساهمةموضوع: إداة إتصل بنا بشكل جديد منبثق من الأسفل   الإثنين مارس 31, 2014 3:00 am

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


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

ثم بعد ذالك إبحث عن الوسم التالي ]]></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

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


بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيمِ  قُلْ هُوَ اللَّهُ أَحَدٌ (1) اللَّهُ الصَّمَدُ (2) لَمْ يَلِدْ وَلَمْ يُولَدْ (3) وَلَمْ يَكُنْ لَهُ كُفُوًا أَحَدٌ (4) 

 
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://info-noor-islam.ahlamontada.com
 
إداة إتصل بنا بشكل جديد منبثق من الأسفل
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات احفاد الرسول :: منتدى: المعلوميات :: إضافات بلوجر المميزة Blogger widget-
انتقل الى:  
تعليقات فيسبوك

تابعنا على فيسبوك
online
تويتر طائر


هذه الرسالة تفيد أنك غير مسجل .

و يسعدنا كثيرا انضمامك لنا ...

للتسجيل اضغط هـنـا