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

السلام عليكم ورحمة الله وبركاته موعدنا اليويم مع درس في غاية الجمال والروعه بتقنيه اصبحت معروفه لمعظم المدونين
انها تقنية الجي كويري المبهره والتي فاقت الجافا سكربت والاجاكس بمراحل عده

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

مثال حى

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

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

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

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

&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"&gt;script&gt;

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

&lt;script src="http://bloggerblogwidgets.googlecode.com/files/jquery.slidePanel.min.js" type="text/javascript"&gt;script&gt;

الان قم بالبحث عن هذا الكود
وضع الكود التالى قبل منه

<style type="text/css"> a.w2btrig1{position: absolute;background:#88BBD4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9lcOHgnHTOlQx7385BYlt_kLxobjY8LDYwNm6N-BAYI_TXYBX5RRhITp2GXuMNwULhSbotTyCVYrFTMavQuP3lbJE0GhCGiYRZDZovguimT1DM5IJALHUQA4tybMZJOJw1v9n08Hzn_tL/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/AVvXsEhUkWA9BurvYFEnyzkCNMk0m81lUHS-q5KuFhaNPpyD59BHyK5iihFhKgNSFF4DgyyzwDcdC3zSQzO4FJ1y2nmEmjdpFNs3pYH3XgZHW_PJMSdp_WEMa91Tf-CPsDPzTNilsPyX2RW_NIv1/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 داخل الاضافه وطرق التعديل عليها