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

مثال حى

طريقة اضافة رسالة متحركه بتقنية الجي كويري 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9hbKIdQt42eZvrzl71k4AWYe48PNJ7rCPIGeHuyPck6V6zTkKnZJZd7CViVVtPAvuI0_Qm1nxKNTKFQLT1NchgvsJRRO0KJyFdSgNurgfr2qCH0p5gOt_FXLLDdvPuRj4wyYbKwW8ntpT/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi97YQgFDNhRFm7iB2CLv0OB5gsGK2gMvS2aB5Zo8StTARcZGcRDkKYzw0xoJLsxzIJ6AMAh6_ISPs9lsI1FmEwqMVoHCJRh-9EPOfBILL7xvpkZRuihm5T2PXQCmItJ8uwI9gc3kleOpz9/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

نقوم بالبحث داخل الكود عن اكواد الالوان ال

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