سلايد أحترافي لعرض الصور لمدونات البلوجر

<style>
#slider {
  position:absolute !important;
  top:50%;
  right:50%;
  width:650px;
  height:350px;
  margin-top:-175px;
  margin-right:-325px;
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
 }

 .nivoSlider img {
  position:absolute;
  top:0;
  right:0;
  display:none;
 }

 .nivoSlider a {
  border:0;
  display:block;
 }

 .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:75px;
  bottom:29px;
  width:498px;
  padding-top:13px;
  padding-bottom:13px;
  z-index:8;
  border:1px solid #000;
  border-right-color:rgba(0,0,0,.5);
  border-left-color:rgba(0,0,0,.5);
  -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
 }

 .nivo-caption p {
  margin:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:15px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  text-shadow:0px -1px 0px #000;
 }

 .nivo-caption a {
  display:inline !important;
  }

 .nivo-html-caption {
  display:none;
 }

 .nivo-directionNav a {
  position:absolute;
  bottom:30px;
  z-index:9;
  cursor:pointer;
  text-indent:-9999px;
  width:45px;
  height:39px;
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg31UmXG982ILUUGoK6OYvrzmOg4iHE2LYelQFQHAJKP9FZwWvJP8RF0R6S4aLYmtF0IxILMtdVGJ4bPAEMfhHLycVXSY2W0az3y8yEqGJ1NrJ92pfthbezAtGpszKiKyobn0HzgRHO1CE/s1600/helperblogger.com-arrows.png);
  background-repeat:no-repeat;
}

 .nivo-prevNav {
  left:75px;
  background-position:0 0;
  box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
 }

 .nivo-nextNav {
  right:77px;
  background-position:-45px 0px;
  box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
 }

</style> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.code.helperblogger.com/jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('.nivoSlider').nivoSlider({
            effect: 'sliceDown',
            directionNavHide: false,
            captionOpacity: 1,
            controlNav: false
        });
    });
</script>

<div id="slider" class="nivoSlider">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJW7sLkJw18ts8GChyFb0EZDY1y63Chn2AfBFESqgXYtP_K8DepvRIWNhHWkf2eBOgPGSX1VZ18HuoRHe1nBWgRFOJ1MJ0WOqOlxHH9Jy1yaD_9fiARRT5oXS8vmE3khLLRSmVrK55J8Q/s1600/helperblogger.com-5.png"
 alt="Slider Image 1" title="وصف للصورة" />
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCXEdjeQS4WjC3_oMcF3pHQlP26j4T0dAv6xId-FghbJ1f4vQgE84CLy1UI7ymqrMZzkeeIvksc02XGZrxm_a6Dt07FHYMUECNlSmAtoN1AxBuBaPpCB2Q420kw4mf9-TgBrrObbmcp58/s1600/helperblogger.com-4.png"
 alt="Slider Image 2" title="وصف للصورة" />
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE6CJpI73EV4v4oDl__6d08yoTtwSvxQeR2IMtf5TIoPdwgqmiDlk2PnrADBTmN_KZcQDr41Ufxb-_Ouov3bAbNgTGveWrJVjs4drhmPXPw_IslK0aS-3Dxhfth0ILCdl4ore4ITmrwMg/s1600/helperblogger.com-3.png"
 alt="Slider Image 2" title="وصف للصورة" />
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCZ8Ufl8p5VrKRoodGSMX3-_eNNngi6gUG7-3Vw4TgXld7AH5NjnLC4gNacouAJSn8fDeiQFYtoOSuo2WhXuvGSfQeIu8vn3n7gIKm42mNAmvsNCV74oYS52_d3EEnKEBmcL6eSoaWcFU/s1600/helperblogger.com-2.png"
 alt="Slider Image 2" title="وصف للصورة" />
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnFRGVhJ1TrKaLkFP_6r_Ag_KtClV-HCtz4bzJESk7MKacVIZv4vnl4nHgbQvUqonD3PQHpXUvfryCwYtpmhn5SQjab_bZJxVysfGGvogx54VtJc7jYPX3sT8WEgsVbJJ96U6FOf0MrtE/s1600/helperblogger.com-1.png"
 alt="Slider Image 2" title="سلايد مقدم من مدونتي نت" />
</div>