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

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

  • مثال حي للسلايدر شو

    معاينة

    كيفية اضافة هذه الاداه الى مدوناتكم

     انتقل إلى لوحة تحكم مدونتك
         HTML/Javascript   إختر "تخطيط" ثم إضافة أداة ثم اختر
         والآن الصق داخل المستطيل الكود التالي
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    <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 urlundefinedhttp://4.bp.blogspot.com/-aVGCcclfKQo/UR-T3vxFAMI/AAAAAAAABm8/ncwIfUdoLIw/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 urlundefinedhttp://3.bp.blogspot.com/-ZUaX5-lcCi4/UR-TzMXcpuI/AAAAAAAABm0/kokxtfFdNcU/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>
    مايجب عليك تغييره
    • عنوان الموضوع : استبدلها بعنوان الموضوع المراد عرضه في السلايد شو.
    • رابط صورة الموضوع : استبدلها برابط صورة الموضوع المراد عرضه بالسلايد شو.
      # : استبدلها برابط الموضوع المراد عرضه بالسلايد شو. 
      700px : لتغيير عرض السلايد شو .
      306px:لتغيير ارتفاع السلايدشو.

       وبالاخير قم بحفظ الاداه ومبروك عليك السلايدشو
    ستطيل الكود التالي
0 التعليقات

0 التعليقات:

الاشتراك في: تعليقات الرسالة (Atom)