طريقة إضافة السلايدر إلى مدونات بلوجر

بسم الله الرحمن الرحيم

و الصلاة و السلام على أشرف المرسلين

و بعد أحبتي في الله موضوع درسنا اليوم هو كيفية إضافة سلايدر إحترافي إلى مدونات بلوجر.
فهي إضافة يمكنك من التحكم الكامل فيها.

أولا : هذا هو شكل الإضافة :

كيفية إضافة الأداة :

كالعادة نتجه من مدونتنا إلى تخطيط ثم إلى إضافة أداة ثم تضيف كود ال Html التالي :

الكود بلغة Html

<style type="text/css">#mcis{display:none}#sliderFrame{position:relative;width:468px;margin:0 auto;border:3px solid #e1e0e2}#ribbon{width:111px;height:111px;position:absolute;top:-4px;right:-4px}#slider{width:468px;height:260px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0bs8fZ_yFJ7hYDzfKHnqar6NI_GSl0w79dvRHEIJWMD3OCzMyCPLripOEqrUrMEGAKvvd_vrYSeG0nakzowhIjXcdxAW80fPjOHubWeawAJ-8ujfXiIlHW1m1J4uDksWUwWA2jrQMVA/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%;position:relative;margin:0 auto;box-shadow:0 1px 5px 010007}#slider img{position:absolute;border:0;display:none}#slider a.imgLink{z-index:2;display:none;position:absolute;top:0;right:0;border:0;padding:0;margin:0;width:100%;height:100%}div.mc-caption-bg,div.mc-caption-bg2{position:absolute;width:100%;height:auto;padding:0;right:0;bottom:0;z-index:3;overflow:hidden;font-size:0}div.mc-caption-bg{background-color:#06c}div.mc-caption{font:bold 25px/21px traditional arabic;color:#0000;z-index:4;padding:10px 0;text-align:center}div.mc-caption a{color:#FB0}div.mc-caption a:hover{color:#DA0}div.navBulletsWrapper{top:250px;right:190px;width:150px;background:0;padding-right:20px;position:relative;z-index:5;cursor:pointer}div.navBulletsWrapper div{width:11px;height:11px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjElCZM091pzeAG5KLj8YFUK3khoclv1nS69-H7Q3u4potKyrRSZQhblgR9Wap9VEyL44-MA9EG922wmPBLbMUUvzva6k11HrhdKtFwbJExd2RzhSiI_MWFNMhsO1_JrTF1eGFWIibj9w/h120/mdonti-n.blogspot.com-bullet.png) no-repeat 0 0;float:right;overflow:hidden;vertical-align:middle;cursor:pointer;margin-left:11px;_position:relative}div.navBulletsWrapper div.active{background-position:0 -11px}#slider{transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}</style>
<script src="http://my-mdonti.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">
<a href="uuuu"><img src="iiii" alt="nnnn"/></a>
<a href="uuuu"><img src="iiii" alt="nnnn"/></a>
<a href="uuuu"><img src="iiii" alt="nnnn"/></a>
<a href="uuuu"><img src="iiii" alt="nnnn"/></a>
</div></div>

نرى الآن كيفية التعديل على الكود :
غير uuuu إلى إلى روابط المواضيع.
غير iiii إلى صور المواضيع.
غير nnnn إلى عناوين المواضيع.

إلى هنا أكون قد انهيت الموضوع . لطلب شرح أو للإستفسار :
راسلني على إيميل المدونة :imad-13@tw.ma
أو على حسابي على الفيسبوك : fb/imadostoos.fans

دمتم بود.