-->

طريقه اضافة سلايد شو احترافي لمدونات بلوجر

طريقه اضافة سلايد شو احترافي لمدونات بلوجر


    السلام عليكم اخواني , سنتطرق اليوم في هذه التدوينه الى كيفية اضافة سلايد شو Slidershow احترافي لمدونات بلوجر بطريقه سهله جدا ومميزه حيث تعتمد هذه الاضافه على كود الجافا سكريب ,  يعني تقدر تضيف هذا السلايد شو الى مدونتك بخطوه واحده فقط وهي اضافة اداهHTML/JavaScript  , مايميز هذا السلايد شو انه يضفي لمسة جميلة على المدونات حيث يساهم بشكل كبير في إثارة انتباه الزائر إلى أكثر المواضيع أهمية. الأمر بسيط جدا و سأحاول تبسيطه أكثر قدر الإمكان ان شاء الله
    اضافة سلايد شو لمدونات بلوجر

    معاينة


    كيفيه اضافه هذه الاداه الى المدونه
    انتقل إلى لوحة تحكم مدونتك
         HTML/Javascript   إختر "تخطيط" ثم إضافة أداة ثم اختر
        والآن الصق داخل المستطيل الكود التالي

    <style type="text/css">
    /* alb33dani.blogspot.com */
    #sliderFrame {position:relative;width:700px;margin: 0 auto 40px;}
           
    #slider {
    width:700px;height:306px;/* Make it the same size as your images */
    background:#fff urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHz9WFKMRIOPOqpnddsIjU-fK5eZGdiz56tfCet8ljuXx99SQBLNUiyL_nA2DEP_25aCCxyhOxRtcWwrQgCJjTAgZriLLNeIAsdxZ_oaiVDtDwbFxdrt9Pe5ZRyq4MdGPRE8Cl1q1GK7Nz/s1600/loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
        }
    #slider img {
    position:absolute;
    border:none;
    display:none;
        }
    /* the link style undefinedif an image is wrapped in a link) */
    #slider a.imgLink {
    z-index:2;
    display:none;position:absolute;
    top:0px;left:0px;border:0;padding:0;margin:0;
    width:100%;height:100%;
        }
    /* Caption styles */
    div.mc-caption-bg, div.mc-caption-bg2 {
    position:absolute;
    width:100%;
    height:auto;
    padding:0;
    left:0px;
    bottom:15px;
    z-index:3;
    overflow:hidden;
    font-size: 0;
        }
    div.mc-caption-bg {
    background-color:black;
        }
    div.mc-caption {
    font: bold 14px/20px Arial;
    color:#EEE;
    z-index:4;
    padding:10px 0;
    text-align:center;
        }
    div.mc-caption a {
    color:#FB0;
        }
    div.mc-caption a:hover {
    color:#DA0;
        }
    /* ------ built-in navigation bullets wrapper ------*/
    div.navBulletsWrapper  {
    top:320px; left:280px; /* Its position is relative to the #slider */
    width:150px;
    background:none;
    padding-left:20px;
    position:relative;
    z-index:5;
    cursor:pointer;
        }
    /* each bullet */
    div.navBulletsWrapper div
        {
    width:11px; height:11px;
    background:transparent urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz49s1ACn5KoquLaQp56T5xuOCgBjWHqKcWaHffAMwbxMrAGpsgo_sfTDsjr7toxzpJcGzHlD1V33VHIHJPawsBoC5mcKq_kDBVC6d9oDGdaK-P_taOXkvgg92jPNR7cHzFh1iqhnYeU4h/s1600/bullet.png) no-repeat 0 0;
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
    margin-right:11px;/* distance between each bullet*/
    _position:relative;/*IE6 hack*/
        }
    div.navBulletsWrapper div.active {background-position:0 -11px;}
    /* --------- Others ------- */
    #slider
        {
    transform: translate3dundefined0,0,0);
    -ms-transform:translate3dundefined0,0,0);
    -moz-transform:translate3dundefined0,0,0);
    -o-transform:translate3dundefined0,0,0);
        }
    </style>
    <script src="http://dimpost.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
    <div id="sliderFrame">
    <div id="slider">
    <a href="#"><img src="رابط الصوره الاولى" alt="عنوان الموضوع الاول" /></a>
    <a href="#"><img src="رابط الصوره الثانيه" alt="عنوان الموضوع الثاني" /></a>
    <a href="#"><img src="رابط الصوره الثالثه"alt="عنوان الموضوع الثالث" /></a>
    <a href="#"><img src="رابط الصوره الرابعه"alt="عنوالن الموضوع الرابع" /></a>
    <a href="#"><img src="رابط الصوره الخامسه" alt="عنوان الموضوع الخامس"/></a>
    </div>
    </div>


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

    Mohamed Shaban
    @مرسلة بواسطة
    كاتب ومحرر في مدونة : مدونة انتا الكسبان .
    1. رائع مشكور على مجهودك ولكن السلايدر يتوقف فى بعض الصور

      ردحذف
      الردود
      1. قم بحذفة وتنزيلة من جديد وقم يتغير رابط الصورة (اى رفعها على سيرفراخر للرفع )

        حذف