كود سلايد شو رائع يمكنك ان تجعلى هيدر لمدونتك

ضع كود الـ css اعلى كلمه

الكود:: ]]></b:skin>

وضعة الكود التالى اعلاها

الكود:: #slider-bg {
    margin: 0;
    width : 960px;
    background:#fff;
    }
    #slider-wrapper {
    height: 324px;
    margin: 0;
    padding: 0;
    position : relative;
    width : 960px;
    z-index: 1;
    }
    #slider {
    position :relative;
    width : 960px;
    height:324px;
    background:url(http://1.bp.blogspot.com/-QK5oawQYmgw/TnKXKsfCJhI/AAAAAAAAAwo/ERwg8G28PkM/s1600/loading.gif) no-repeat 50% 50%;
    }
    #slider img {
    position :absolute;
    top:0px;
    right:0px;
    display :none;
    }
    #slider a {
    border:0;
    display :block;
    }
    .nivo-controlNav {
    position :absolute;
    right:260px;
    bottom:-42px;
    display :none;
    }
    .nivo-controlNav a {
    display :block;
    width : 22px;
    height:22px;
    background:url(http://1.bp.blogspot.com/-C1WG2UmXhro/TnKXR2k5p9I/AAAAAAAAAww/byTpwmACcuw/s1600/l-slider-bullet-normal.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-left:3px;
    float :right;
    }
    .nivo-controlNav a.active {
    background-position :0 -22px;
    }
    .nivo-directionNav a {
    display :block;
    width : 50px;
    height:61px;
    text-indent:-9999px;
    border:0;
    }
    a.nivo-nextNav {
    left:-18px;
    background:url('http://4.bp.blogspot.com/-WsXTx93UHVg/TnKXmbB6HUI/AAAAAAAAAxA/v7SrBe9gb1s/s1600/l-slidernav-right.png') no-repeat;
    }
    a.nivo-nextNav:hover{
    background-position :0 -61px;
    }
    a.nivo-prevNav {
    right:-18px;
    background:url('http://3.bp.blogspot.com/-b_9PHTHIkxo/TnKXYq7sfQI/AAAAAAAAAw4/D5NUGheZIYo/s1600/l-slidernav-left.png') no-repeat;
    }
    a.nivo-prevNav:hover{
    background-position :0 -61px;
    }
    .nivo-caption {
    text-shadow:none;
    font-family: Helvetica, Arial, sans-serif;
    }
    .nivo-caption a {
    color:#efe9d1;
    text-decoration:underline;
    }
    #sliderContent {
    margin:50px 50px 0 0;
    position : absolute;
    text-align:center;
    background-color:#FFFFCC;
    color:#333333;
    font-weight:bold;
    padding: 10px;
    }
    #openCloseWrap a {
    display : block;
    font-size: 13px;
    font-weight: bold;
    height: 22px;
    margin: 0;
    position : absolute;
    left: 22px;
    text-indent: -10000px;
    top: 59px;
    width : 26px;
    }
    .nivoSlider {
    position :relative;
    }
    .nivoSlider img {
    position :absolute;
    top:0px;
    right:0px;
    }
    .nivoSlider a.nivo-imageLink {
    position :absolute;
    top:0px;
    right:0px;
    width : 100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display :none;
    }
    .nivo-slice {
    display :block;
    position :absolute;
    z-index:5;
    height:100%;
    }
    .nivo-box {
    display :block;
    position :absolute;
    z-index:5;
    }
    .nivo-caption {
    position :absolute;
    right:0px;
    bottom:0px;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width : 100%;
    z-index:8;
    }
    .nivo-caption p {
    padding:5px;
    margin:0;
    text-align:center;
    font:italic 29px/32px Georgia;
    color:#fff;
    font-weight:bold;
    }
    .nivo-caption p h3{
    font-size:22px;
    font-style:italic;
    color:#f23a66;
    font-weight:bold;
    line-height:30px;
    }
    .nivo-caption a {
    display :inline !important;
    }
    .nivo-html-caption {
    display :none;
    }
    .nivo-directionNav a {
    position :absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
    }
    .nivo-prevNav {
    right:0px;
    }
    .nivo-nextNav {
    left:0px;
    }
    .nivo-controlNav a {
    position :relative;
    z-index:9;
    cursor:pointer;
    }
    .nivo-controlNav a.active {
    font-weight:bold;
    }

ثم ابحث عن

الكود:: <body>

كود الجافا سكربت اسفل

الكود::     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
    <script src='http://jquerywallbase.googlecode.com/files/jquery.tools.min-liquid.js'/>
    <script src='http://jquerywallbase.googlecode.com/files/jquery.nivo.slider.pack-Liquid.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    $(window).load(function() {
    $('#slider').nivoSlider({
    effect: 'boxRandom,boxRain,boxRainGrow', // Specify sets like: 'fold,fade,sliceDown'
    slices: 15, // For slice animations
    boxCols: 8, // For box animations
    boxRows: 4, // For box animations
    animSpeed: 500, // Slide transition speed
    pauseTime: 3000, // How long each slide will show
    startSlide: 0, // Set starting Slide (0 index)
    directionNav: true, // Next & Prev navigation
    directionNavHide: false, // Only show on hover
    controlNav: true, // 1,2,3... navigation
    controlNavThumbs: false, // Use thumbnails for Control Nav
    controlNavThumbsFromRel: false, // Use image rel for thumbs
    controlNavThumbsSearch: '.jpg', // Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
    keyboardNav: true, // Use left & right arrows
    pauseOnHover: true, // Stop animation while hovering
    manualAdvance: false, // Force manual transitions
    captionOpacity: 0, // Universal caption opacity
    prevText: 'Prev', // Prev directionNav text
    nextText: 'Next', // Next directionNav text
    beforeChange: function(){}, // Triggers before a slide transition
    afterChange: function(){}, // Triggers after a slide transition
    slideshowEnd: function(){}, // Triggers after all slides have been shown
    lastSlide: function(){}, // Triggers when last slide is shown
    afterLoad: function(){} // Triggers when slider has loaded
    });
    });
    //]]>
    </script>

الكود:: <div class="header"><div>

او يمكنك وضعة فى اى مكان تريد ان يظهر فية السلايد شو

الكود:: <div id='slider-bg'>
    <div id='slider-wrapper'>
    <div class='nivoSlider' id='slider'>
    <a href='#Link'>
    <img height='324' src='http://www.dresshealthytoday.com/wp-content/uploads/2010/11/2-960x360.jpg' width='960'/>
    </a>
    <a href='#Link'>
    <img height='324' src='http://4.bp.blogspot.com/-iftcgf3YAQ4/TnMCMLK-QEI/AAAAAAAAAxY/OmNJERF8h6k/s1600/nivo-960-340-2.jpg' width='960'/>
    </a>
    <a href='#Link'>
    <img height='324' src='http://www.whartonmedia.com/images/960x360_rocksunset.jpg' width='960'/>
    </a>
    <a href='#Link'>
    <img height='324' src='http://www.shdwi.com/wp-content/uploads/Greens-1155-21-960x360.jpg' width='960'/>
    </a>
    </div>
    </div>
    </div>

كود اخر يمكنك ان تضعة مباشرة بدون السيس مباشر اون لاين
يمكنك وضعة فى اى مكان تريد يعمل اتوماتيك فقط استبدل روابط الصور

الكود:: <style type='text/css'>
      /* <![CDATA[ */
      #w2bSlideContainer           {position: relative;display: block;}
      #w2bNivoSlider               {position:relative;width:990px !important;height:201px !important;min-height:225px !important;background: url("http://4.bp.blogspot.com/-8y7zXs3fLg4/UZ07B95otxI/AAAAAAAACT0/6YcNnfNi_FU/s1600/10.gif") no-repeat 50% 50%; margin: 0px auto 0px;}
      #w2bNivoSlider img           {position:absolute;top:0;left:0;display:none}
      .nivoSlider                  {position:relative;width:100%;height:auto;}
      .nivoSlider img              {position:absolute;top:0;left:0}
      .nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
      .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
      .nivo-slice                  {display:block;position:absolute;z-index:5;height:100%;top:0}
      .nivo-box                    {display:block;position:absolute;z-index:5;overflow:hidden}
      .nivo-box img                {display:block}
      .nivo-caption                {position:absolute;left:0px;bottom:0px;right:0px;background:#000;color:#fff;-ms-filter:"alpha(opacity=80)";text-align:center;filter:alpha(opacity=80);opacity:.8;width:auto;z-index:8;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
      .nivo-caption p              {padding:5px;margin:0}
      .nivo-caption a              {display:inline!important}
      .nivo-html-caption           {display:none}
      .nivo-directionNav a         {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;background:url("http://3.bp.blogspot.com/-bJzN66mSNNc/T7dSdjkzf3I/AAAAAAAABgI/PlGK0Q8OYeU/s1600/w2bArrows.png") no-repeat;text-indent:-9999px;border:0}
      .nivo-prevNav                {left:10px}
      .nivo-nextNav                {background-position:-30px 0!important;right:10px}
      /* ]]> */
    </style>

<script src='http://widgets.way2blogging.org/blogger-widgets/jquery.nivo.slider.pack.js' type='text/javascript'/>
<script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
    $('#w2bNivoSlider').nivoSlider({
          effect           : 'random',
          slices           : 15,
          boxCols          : 8,
          boxRows          : 4,
          animSpeed        : 500,
          pauseTime        : 4000,
          startSlide       : 0,
          directionNav     : true,
          directionNavHide : true,
          controlNav       : false,
          keyboardNav      : false,
          pauseOnHover     : true,
          captionOpacity   : 0.8
    });
});
/* ]]> */
</script>
<div id='w2bSlideContainer'>
<div id='w2bNivoSlider'>
<a href='#'>
<img alt='' src='http://im58.gulfup.com/7I6ZE.jpg' title=''/>
</a>
<a href='#'>
<img alt='' src='http://im58.gulfup.com/oLLMd.jpg' title=' '/>
</a>
<a href='#'>
<img alt='' src='http://im58.gulfup.com/8APse.jpg' title=''/>
</a>
<a href='3'>
<img alt='' src='http://im58.gulfup.com/0DNYg.jpg' title=''/>
</a>
<a href='#'>
<img alt='' src='http://im43.gulfup.com/sua1R.jpg' title=''/>
</a>
<a href='#'>
<img alt='' src='http://im43.gulfup.com/rWxvn.png' title=''/>
</a>

</div>
</div>

ملحوظة ان لم يعمل الكود ابحث عن

الكود:: <body>

وضع فوقها الكود التالى

الكود:: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
    <script src='http://jquerywallbase.googlecode.com/files/jquery.tools.min-liquid.js'/>
    <script src='http://jquerywallbase.googlecode.com/files/jquery.nivo.slider.pack-Liquid.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    $(window).load(function() {
    $('#slider').nivoSlider({
    effect: 'boxRandom,boxRain,boxRainGrow', // Specify sets like: 'fold,fade,sliceDown'
    slices: 15, // For slice animations
    boxCols: 8, // For box animations
    boxRows: 4, // For box animations
    animSpeed: 500, // Slide transition speed
    pauseTime: 3000, // How long each slide will show
    startSlide: 0, // Set starting Slide (0 index)
    directionNav: true, // Next & Prev navigation
    directionNavHide: false, // Only show on hover
    controlNav: true, // 1,2,3... navigation
    controlNavThumbs: false, // Use thumbnails for Control Nav
    controlNavThumbsFromRel: false, // Use image rel for thumbs
    controlNavThumbsSearch: '.jpg', // Replace this with...
    controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
    keyboardNav: true, // Use left & right arrows
    pauseOnHover: true, // Stop animation while hovering
    manualAdvance: false, // Force manual transitions
    captionOpacity: 0, // Universal caption opacity
    prevText: 'Prev', // Prev directionNav text
    nextText: 'Next', // Next directionNav text
    beforeChange: function(){}, // Triggers before a slide transition
    afterChange: function(){}, // Triggers after a slide transition
    slideshowEnd: function(){}, // Triggers after all slides have been shown
    lastSlide: function(){}, // Triggers when last slide is shown
    afterLoad: function(){} // Triggers when slider has loaded
    });
    });
    //]]>
    </script>

مبروك عليكم اجمل سلايد شو

» سلايد شو اليوم السابع سلايد زاتى وافقى حصريا وفقط على منتديات الهجان
» سلايد شو تلقائي إحترافي لمدونات بلوجر أحدث سلايد شو
» شرح عمل أقسام او تصنيفات لمدونتك
» اجمل خطوط الويب لمدونتك
» طريقة اضافة مركز تحميل صور لمدونتك!