في السابق كنت قد وضعت تدوينة عن سلايدر رااائع، لكن للاسف لم يعمل مع اغلب من جربه، لهذا اضطررت الى اخفاء التدوينة و البحث عن سلايدر اخر، راائع، و جمييل، بحركاة جميلة، يليق بمدوناتكم الجميلة، و الحمد لله استطعت ان احضر لكم سلايدر مقدم من Nivo، و معدل بواستطتي، اذا كان يهمك الامر فلتتفضل بالدخول :)

 
        /*Start Nivo Slider Css http://ridasail.blogspot.com*/
        /*
        * Copyright 2011, Gilbert Pellegrom,
        * Free to use and abuse under the MIT license.
        * http://www.opensource.org/licenses/mit-license.php
        * Modified By - Rida SAIL @ ridasail.blogspot.com For blogger by - Rahul Ippar @ helperblogger.com
        *
        * August 2012
        */
        /* The Nivo Slider styles */
        #slider {
        width: 618px;
        height: 246px;
        }
        .nivoSlider {
        position: relative;
        }
        .nivoSlider img {
        position: absolute;
        top: 0px;
        left: 0px;
        }
        /* If an image is wrapped in a link */
        .nivoSlider a.nivo-imageLink {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border: 0;
        padding: 0;
        margin: 0;
        z-index: 6;
        display: none;
        }
        /* The slices and boxes in the Slider */
        .nivo-slice {
        display: block;
        position: absolute;
        z-index: 5;
        height: 100%;
        }
        .nivo-box {
        display: block;
        position: absolute;
        z-index: 5;
        }
        /* Caption styles */
        .nivo-caption {
        position: absolute;
        left: 0px;
        bottom: 0px;
        background: #000;
        color: #fff;
        opacity: 0.8;
        /* Overridden by captionOpacity setting */
        width: 100%;
        z-index: 8;
        }
        .nivo-caption p {
        padding: 5px;
        margin: 0;
        }
        .nivo-caption a {
        display: inline !important;
        }
        .nivo-html-caption {
        display: none;
        }
        /* Direction nav styles (e.g. Next & Prev) */
        .nivo-directionNav a {
        position: absolute;
        top: 45%;
        z-index: 9;
        cursor: pointer;
        }
        .nivo-prevNav {
        left: 0px;
        }
        .nivo-nextNav {
        right: 0px;
        }
        /* Control nav styles (e.g. 1,2,3...) */
        .nivo-controlNav a {
        position: relative;
        z-index: 9;
        cursor: pointer;
        }
        .nivo-controlNav a.active {
        font-weight: bold;
        }
        /*
        Skin Name: Pascal Theme
        Skin URI: http://nivo.dev7studios.com
        Skin Type: fixed
        Description: A nice, light skin for the Nivo Slider.
        Version: 1.0
        Author: Gilbert Pellegrom & Pascal Gartner
        Author URI: http://dev7studios.com
        */
        .theme-pascal.slider-wrapper {
        width: 668px;
        height: 299px;
        margin: 0 auto;
        padding-top: 17px;
        position: relative;
        }
        .theme-pascal .nivoSlider {
        position: relative;
        width: 630px;
        height: 235px;
        margin-left: 19px;
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIdPdEN9CcPXFKrh5rYz0M4pQL9X8Ym96DKcPqh7WnR6qI0CdbOV7srCvqHqN2KcE99OYTtv5lAZmLyX6eagABBE0GMTOF8BSw1DqWy0gliksaCeKxEDf940bgbnZm38NnR5XExHakCgEX/s1600/helperblogger-loading.gif) no-repeat 50% 50%;
        }
        .theme-pascal .nivoSlider img {
        position: absolute;
        top: 0px;
        left: 0px;
        display: none;
        width: 630px;
        /* Make sure your images are the same size */
        height: 235px;
        /* Make sure your images are the same size */
        }
        .theme-pascal .nivoSlider a {
        border: 0;
        display: block;
        }
        .theme-pascal .nivo-controlNav {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoQLMUl3zduRnZni7m0f1Agh_Ze1_iCKeFrKo9YzqR5Fdj9OSVMKaaYa-YutDNZ1uo5cZPHL9imzv7g6pML4QWK77woS1VC_enCEvo0qZiVHX4lfotcB0w_EXo_myEV0NRK1tfo6KYFEQJ/s1600/helperblogger-controlnav.png) no-repeat;
        width: 251px;
        height: 40px;
        position: absolute;
        left: 200px;
        /* Tweak this to center bullets */
        bottom: -42px;
        padding: 8px 0 0 82px;
        z-index: 20;
        }
        .theme-pascal .nivo-controlNav a {
        display: block;
        width: 22px;
        height: 22px;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMqiw1WhbLMwzuThVrMuUiqggciRLo2TDT4I5K6yrEg-WuPadOaZ1OsHkdEvokjPJ7Jp8sXFy87DbtzPURAoRDPIrH5htdjXvZp_gNe6m2J6ieI1vifMepJVT7lx2nATUhMsqf1U_byVsg/s1600/helperblogger-bullets.png) no-repeat;
        text-indent: -9999px;
        border: 0;
        margin-right: 3px;
        float: left;
        }
        .theme-pascal .nivo-controlNav a.active {
        background-position: 0 -22px;
        }
        .theme-pascal .nivo-directionNav a {
        display: none;
        }
        .theme-pascal .nivo-caption {
        bottom: 40%;
        left: auto;
        right: 0px;
        width: auto;
        max-width: 630px;
        overflow: hidden;
        background: #fff;
        text-shadow: none;
        font-family: arial, serif;
        color: #4c4b4b;
        }
        .theme-pascal .nivo-caption p {
        padding: 5px 15px;
        color: #333;
        font-weight: bold;
        font-size: 27px;
        text-transform: uppercase;
        }
        .theme-pascal .nivo-caption a {
        color: #333;
        font-weight: bold;
        font-size: 27px;
        text-transform: uppercase;
        }
        .theme-pascal .ribbon {
        width: 111px;
        height: 111px;
        position: absolute;
        top: -8px;
        left: -8px;
        z-index: 300;
        }
        /*End Nivo Slider Css http://ridasail.blogspot.com*/

        <!-- Nivo Slider Scripts Starts-->
        <script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
        <script src='http://helperblogger.x10.mx/scripts/jquery.nivo.slider.pack.js' type='text/javascript'/>
        <script type='text/javascript'>
        $(window).load(function() {
        $(&#39;#slider&#39;).nivoSlider();
        });
        </script>
        <!-- Nivo Slider Script Ends-->

        <div class="slider-wrapper theme-pascal">
        <div class="ribbon">
        </div>
        <div id="slider" class="nivoSlider">
        <a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
        <a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
        <a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
        <a href="YOUR LINK HERE"><img src="IMAGE URL HERE" alt="" title="ADD CAPTION HERE"/></a>
        </div>
        <div id="htmlcaption" class="nivo-html-caption">
        </div>
        </div>

... نهاية الشرح ...

اقرا ايضا :

  إدراج صور المعلقين في التعليقات المجهولة   

  كيفية تركيب قوالب بلوجر   
  إضافة أحاديث نبوية متغيرة بتغير الصفحة   

  سلايدر شو رائع بأكثر من حركة مميزة .  

  طريقة سريعة وسهلة لاختبار سرعة موقعك او مدونتك  

  تغيير أيقونة Favicon على لمدونتك او موقعك   

ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجل

لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل