اضافة رسالة متحركه بتقنية الجي كويري jquery slide

السلام عليكم ورحمة الله وبركاته موعدنا اليويم مع درس في غاية الجمال والروعه بتقنيه اصبحت معروفه لمعظم المدونين
انها تقنية الجي كويري المبهره والتي فاقت الجافا سكربت والاجاكس بمراحل عده
فهي تعطي مساحات اكبر من الابداع سواء في الشكل او المضمون
الاضافه التي بين ايدينا الان عباره عن اداه سهله وبسيطه تعتمد علي تقنية الجي كويري اعتماد كل
وفائد تلك الاضافه انها لا تاخذ مكان في المدونه فهي عباره عن زر صغير في غايه الاناقه
يكون اما علي يسار المدونه او يمينها او اعلى او بالاسفل عند الضغط عليه يخرج لنا ماتحتويه الاضافه
سواء كان ماتحتويه  كود جافا سكربت مثل حالة الطقس او اخر الموضوعات وخلافه 
او تكون عباره عن نصوص كتابيه منسقه,باختصار تستطيع وضع ما شئت من خلال تلك الاضافه.
ولرؤية مثال عليها قبل التطبيق ماعليك الا مشاهدة زر الفيس بوك علي يمين مدونة تقارب
وعن الذهاب اليه بمؤشر الماوس انظر ماذا ستشاهد وانظر ايضا ما ستشاهده عند تركك اياه بالماوس
ولمشاهدة مثال اخر يمكنك زيارة الرابط التالي
للعلم كما قلت مسبقا تستطيع وضع ما شئت من انواع الاكواد المختلفه حتى اكواد ادسنس مسموح بها.
للتطبيق ابدا بسم الله الرحمن الرحيم
وشاهد المثال ثم طبق الخطوات ان اعجبتك

مثال حى

اضغط هنا لرؤية مثال حى
هذا مثال حى للاضافة وقد وضعت عدة مرات باكثر من شكل


طريقة اضافة رسالة متحركه بتقنية الجي كويري jquery slide

تابع الخطولات بانتباه

 
سجل دخول الي لوحة تحكم مدونتك> ثم الي تصميم -> ثم الي تحرير Html
ابحث عن هذا الكود
ضع قبله الكود الذي بالاسفل

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">script>

ثم ابحث مره اخرى عن هذا الكود
وضع الكود الذي بالاسفل ايضا قبل منه

<script src="http://bloggerblogwidgets.googlecode.com/files/jquery.slidePanel.min.js" type="text/javascript">script>
الان قم بالبحث عن هذا الكود 
وضع الكود التالى قبل منه


<style type="text/css">
a.w2btrig1{position: absolute;background:#88BBD4 url(http://2.bp.blogspot.com/-DmseCaEjVro/Tf4ToLUrEZI/AAAAAAAAA78/Uqkqb6flFnw/s143/w2b_plus.png) 6% 50% no-repeat;text-decoration: none;font-size: 16px;letter-spacing:-1px;font-family: verdana, helvetica, arial, sans-serif;color:#FFFFFF;padding:4px 12px 6px 24px;font-weight: bold;z-index:99999;}
a.w2btrig1.left {left: 0;border-top-right-radius: 5px;-moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px;-moz-border-radius-bottomright: 5px;-webkit-border-bottom-right-radius: 5px;border-bottom-right-radius: 5px;}
a.w2btrig1:hover {background-color:#5599BB;}
a.active.w2btrig1 {background:#666666 url(http://2.bp.blogspot.com/-eUk0ISNTjDU/Tf4Tnx-DYQI/AAAAAAAAA74/2tnydRL_AMw/s143/w2b_minus.png) 6% 50% no-repeat;}
.w2bpane1 {color:#CCCCCC;position: absolute;display: none;background: #000000;width: 300px;height: auto;z-index:99997;}
.w2bpane1.left {left: 0;padding: 20px 30px 20px 100px;border-top-right-radius: 15px;-moz-border-radius-topright: 15px;-webkit-border-top-right-radius: 15px;-moz-border-radius-bottomright: 15px;-webkit-border-bottom-right-radius: 15px; border-bottom-right-radius: 15px;}
</style><script type="text/javascript">
$(document).ready(function(){$('#myw2bpane1').slidePanel({triggerName: '#myw2btrig1', triggerTopPos: '20px', panelTopPos: '10px',});});
</script>
<a href="#" id="myw2btrig1" class="w2btrig1 left">ضع هنا اسم للاضافه</a>
<div id="myw2bpane1" class="w2bpane1 left">ضع الكود هنا</div>


 ملاحظه هامه:قم ببتغيير  مابالون الاحمرداخل الكود بالمتغيرات المطلوبه
واستبدال جملة ضع الكود هنا بكود الاضافه التي تود عرضها داخل الصندوق
سواء كانت كود اعلانات ادسنس او كود المتابعين للمدونه او المعجبين بها
ع الفيس بوك او اخر المواضيع ....الخ او تستطيع وضع نص منسق.
واستبدال جملة ضع هنا اسم الاضافة باي اسم تريده انت لها
الان سنقوم سويا بشرح اكواد ال css داخل الاضافه وطرق التعديل عليها
خلفية الاضافه#
لون اضافي عند الضغط#
خلفية الزر#
لون خط الزر#
حجم الخط px

لون خلفية صندوق الاضافه#
لون خط محتوى الاضافه#
عرض الاضافه px






























نقوم بالبحث داخل الكود عن اكواد الالوان ال
خاصه بزر الاضافه وكذلك الخلفيه وتغييرها للشكل الذي يحلو لنا
الان نكون قد انتهينا من درسنا الحصري مع موعد جديد ودرس جديد من دروس بلوجر الحصريه


أصدقاء(تطوير ويب)
تعليقات Facebook
2تعليقات Blogger

2 عدد التعليقات على موضوع اضافة رسالة متحركه بتقنية الجي كويري jquery slide

MSOMYH يقول...

السلام عليكم اخى الرجاء كتابة الاكواد المراد البحث عنها وشكرا لك

مدونة تقارب يقول...

@MSOMYH
التمس منك العذر اخي سيتم تعديل الموضوع ووضع الاكواد التاقصه

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .