افضل وأخف كود slide show لعرض الصور والفيديو للمدونات عن طريق اضافة أداه

كود عرض الصور والفيديو سلايد شو slide show ،

هذا الكود الرائع والمميز حقيقة والذي يمتاز بخفته وسهولة تركيبه ،
حيث يتم تركيبه في المدونه عن طريق اضافة أداه ( تخطيط ----> اضافة اداه )
كما يمكنك عرض صور فقط او صور وفيديو او عرض مواضيع
وتستطيع التحكم في مكان الكود عن طريق سحب الأداه في المكان الذي تريده
كما يمكنك التحكم في طول وعرض الكود ، وزيادة عدد المواضيع المعروضه بتكرار الرابط
صورة الكود

الكود

/* JavaScript Image Slider By http://alnaje7oon.blogspot.com/ */

#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/AVvXsEh926OscoNuifRs9EbLQ2IlOa__7Caad4QGLMCJ5j3Ja5CakNQkr7IMQmO97WC2qV2hr9FLq5OeqnEl3_ZWVKAmVM6nrYvgj8J1WPvnTwqkJuAzM4JdjZlDeAseor1G24YAvZAHXaVhLw/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%;
     position: relative;
     margin: 0 auto;
     box-shadow: 0px 1px 5px 010007;
    }

#slider img {
     position: absolute;
     border: none;
     display: none;
    }

#slider a.imgLink {
     z-index: 2;
     display: none;
     position: absolute;
     top: 0px;
     right: 0px;
     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: 0px;
     bottom: 0px;
     z-index: 3;
     overflow: hidden;
     font-size: 0;
    }

div.mc-caption-bg {
     background-color: #0066CC;
    }

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: none;
     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/AVvXsEhLsN11XikVvwEI6vxMHYP19GPAuscpjaTQTh1hfr1sQR_rs8G-YFZQV0OH90Hf_4BKebXF0M4waQyYTwtF-XKTQcrE3njDJtnL2ICWDfWOtjBXeb1SnWZvIZfR6qlXK78eeQ0KXvMs-Q/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>

تعليقات

4 تعليقات

إرسال تعليق

مسوق إنجاز15 يونيو 2013 في 10:13 ص
شكرا جزيلا عى هذا الكود الرائع ... إنه أكثر من ممتاز
حذف التعليق
ابو امجد الكلباني8 أبريل 2014 في 6:43 ص
الله يعطيهم العافيه
حذف التعليق
toufik daddi13 ديسمبر 2015 في 11:35 ص
thank
you
حذف التعليق
ANF Store26 يونيو 2016 في 6:36 م
الف شكررررررررررررررر
حذف التعليق

آرائكم تسعدنا, لمتابعة التعليق وحتى نرد عليك فقط ضع إشارة على إعلامي
شكرا لك

مدونة الكلباني

افضل وأخف كود slide show لعرض الصور والفيديو للمدونات عن طريق اضافة أداه

كود عرض الصور والفيديو سلايد شو slide show ،

الكود

saeed alkalabani

من أنا

Default