حصرى : اضافة سلايدر شو لمدونتك بشكل جميل للغاية

<style>

.slider1 { position: relative; z-index: 5; }

.slider1 .shell { position: relative; }

.slider1 .slider-wrapper { position: absolute; top: -233px; left: 0; } 

.slider1 .slider-holder { float: left; display: inline; width: 520px; height: 276px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTIKc8aH-oDM8JYDupJK8NNrCfzovzo_7tBy-LvI6uDK4u5QSJLa7bv5j8kQBoL6-4lMW_JRaCzIiFVa8KIfDl4YMSyAmFQ_TvVLYCqfctYRKtS_woHTkHkibvbMhtohoY0-2fpMGDq80/s1600/home1-slider.png) no-repeat 0 0; position: relative; margin-left: 14px; } 

.slider1 .slider-holder .content { width: 469px; height: 242px; position: relative; overflow: hidden; margin: 14px 0 0 26px; } 

.slider1 .slider-holder .content ul { list-style: none outside none; position: relative; overflow: hidden; } 

.slider1 .slider-holder .content ul li { width: 469px; height: 242px; position: relative; overflow: hidden; } 

.slider1 .slider-holder .content .jcarousel-clip { width: 469px; height: 242px; position: relative; overflow: hidden; } 

.slider1 .slider-holder .carousel-prev,

.slider1 .slider-holder .carousel-next { position: absolute; top: 114px; width: 52px; height: 53px; display: block; font-size: 0; line-height: 0; text-indent: -4000px; }

.slider1 .slider-holder .carousel-prev { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2yJFuehAxtGLHzfrlnSrtfmvidCf_HToPilU5a6wWDXc-7TIbA-hmK7WvmmZAAEpbC37Y6DtCB29R22vXW-aQKGBe3jLwy8IkMXftWOIE4BmZl0vlXn5VUXyVF6veh69_tVuSxrIEZU0/s1600/carousel1-prev.png) no-repeat 0 0; left: -13px;}

.slider1 .slider-holder .carousel-next { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWQXabsoO4iDI1ZDRqlrL1LsTv_M0VpDaxuubjIrBgBBlYS33dqFGkvds9CzinCw-CEfBACLGd3PpAEPOQCgGGu9lugSLlLUqIhZbw9GPGYXQmyvi8D15FLJGicFoCXqqF5jQNWGrHmyI/s1600/carousel1-next.png) no-repeat 0 0; right: -13px;}

.slider1 .slider-sidebar { float: left; display: inline; width: 350px; margin: 7px 0 0 75px; }

.slider1 .slider-sidebar h2 { font-size: 35px; font-weight: bold; color: #fff; text-transform: none; text-shadow: 1px 1px 1px #459126; margin-bottom: 16px; }

.slider1 .slider-sidebar p { font-size: 14px; line-height: 20px; color: #fff; }

.slider1 .slider-sidebar .slider-btn { margin-top: 28px; }

.slider1 .slider-nav { position: absolute; bottom: -21px; left: 208px; }

.slider1 .slider-nav ul { list-style: none outside none; }

.slider1 .slider-nav ul li { float: left; display: inline; width: 15px; height: 15px; margin-right: 6px; }

.slider1 .slider-nav ul li a { float: left; display: inline; width: 15px; height: 15px; font-size: 0; line-height: 0; text-indent: -4000px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpqRA81m8Y-PFpGnwy107zyZtk8FlwqUZQW355aNYYPVMWEZUooTcqE3G8sNY__mqAPJqDhsgv_S8YTfXcarq2X1-1Juvlp1rBGsPd7bchZYNuAy4CS1pktpFNbTJAy6WQlFRuy9fF-Us/s1600/slider1-pagination.gif) no-repeat 0 0; }

.slider1 .slider-nav ul li a:hover,

.slider1 .slider-nav ul li a.active { background-position: right 0; }

.slider2 { }

.slider2 .shell { position: relative; }

.slider2 .slider-holder { width: 100%; position: absolute; top: -235px; left: -10px;}

.slider2 .slider-holder .content { width: 100%; height: 367px; margin: 10px 0 0 17px; position: relative; overflow: hidden; }

.slider2 .slider-holder .content ul { list-style: none outside none; position: relative; overflow: hidden; }

.slider2 .slider-holder .content ul li { width: 100%; height: 367px; position: relative; }

.slider2 .slider-holder .content .jcarousel-clip,

.slider2 .slider-holder .content .jcarousel-container { width: 100%; height: 367px; position: relative; overflow: hidden; }

.slider2 .slider-holder .content ul li .image-holder { width: 450px; float: left; display: inline; }

.slider2 .slider-holder .content ul li .image-holder img { display: block; margin: 30px 0 0 25px; }

.slider2 .slider-holder .content ul li .text-holder { width: 350px; float: left; display: inline; margin: 55px 0 0 35px;}

.slider2 .slider-holder .content ul li .text-holder h2 { font-size: 35px; font-weight: bold; color: #fff; text-transform: none; text-shadow: 1px 1px 1px #459126; margin-bottom: 16px; }

.slider2 .slider-holder .content ul li .text-holder p { font-size: 14px; line-height: 20px; color: #fff; margin-bottom: 15px; }

.slider2 .slider-holder .content ul li .text-holder ul li { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEEKHDUk2OifgxNW3w8qPkUIvOyOE8wptbfvLtk5y8VCcnesKYEI3-EzBxWdfBSguu4lyZgi53HPc7ArlM_Aau2FnPav4o3EdCE6aOl29LLPKmnh6lsyXPEG4JWCwn1Pc4Fa8sbr0Nx2U/s1600/slider-custom-bullet.png) no-repeat 0 5px; padding-left: 20px; font-size: 14px; color: #fff; width: auto; height: auto; margin-bottom: 3px; }

.slider2 .slider-holder .content ul li .text-holder .slider-btn { margin: 25px 0 0 15px; }

.slider2 .slider-holder .slider-bar { height: 50px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4BJS04sAc3yluz91R5n_GkI1XolhMfFwbM_qJQ9Lx84E07kA9FWzJFhiYhHGDGZsOGmDChSXUs_bu7LCXIpmgOGT6Ke5bwr6a94naj0N0C2dL33og-nLzGxnPi4xIWW13k2y0vLlbHmw/s1600/slider2-bar-bg.png) repeat 0 0; position: absolute; bottom: 18px; left: 19px; width: 957px; z-index: 10; }

.slider2 .slider-holder .slider-bar .content { width: 780px; height: 50px; margin: 0 0 0 20px; }

.slider2 .slider-holder .slider-bar .content .jcarousel-clip,

.slider2 .slider-holder .slider-bar .content .jcarousel-container { width: 780px; height: 50px; }

.slider2 .slider-holder .slider-bar .content ul { list-style: none outside none; position: relative; }

.slider2 .slider-holder .slider-bar .content ul li { width: 780px; height: 50px;position: relative; color: #fff; font-size: 15px; line-height: 50px; }

.slider2 .slider-holder .slider-bar .content ul li a { font-weight: bold; color: #fdbb38; font-size: 15px; }

.slider2 .slider-holder .slider-bar .content ul li a:hover { color: #fff; text-decoration: none; }

.slider2 .slider-holder .slider-bar .carousel-down,

.slider2 .slider-holder .slider-bar .carousel-up { position: absolute; top: 2px; display: block; width: 41px; height: 44px; font-size: 0; line-height: 0; text-indent: -4000px; }

.slider2 .slider-holder .slider-bar .carousel-down { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUdM-YoDl8409q8oxJ_Q1gA-dEUxVPDZHp1xzfcp1QzdV4Hn5r3Oeu6nz6xhG9c_ioPz7xWE7C7b8_YJYsOk32zkbWcuoRHzLUN9o8TgKnI6no5ohUFg5hy2LoOOhVgMlLeg4V7yruHfo/s1600/carousel-down.png) no-repeat 0 0; right: 63px;}

.slider2 .slider-holder .slider-bar .carousel-up { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGy9lu8R9EFKCsxUrpAWsAuTye1Oz_ov8y6jBC56i4LvquFlilVTVaKTTr15kPCD6PX5LO9RNzmh1IU6sgq1nQM71Qi1qwfLKXGOzeVv2CsoE-c9m3XqAxr7u7URZ0nhbaLmHvue794vc/s1600/carousel-up.png) no-repeat 0 0; right: 18px; }

</style>

<script src="http://wbt.googlecode.com/svn/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>

<script src="http://wbt.googlecode.com/svn/easySlider1.5.js" type="text/javascript" charset="utf-8"></script>

<script src="http://wbt.googlecode.com/svn/jquery.jcarousel.js" type="text/javascript" charset="utf-8"></script>

<script src="http://wbt.googlecode.com/svn/js-func.js" type="text/javascript" charset="utf-8"></script>

<!-- slider 1 -->

<div class="slider1">

<div class="shell">

<!-- slider holder -->

<div class="slider-holder">

<div class="content">

<ul>

<li><img src="IMAGE URL" alt="" /></li>

<li><img src="IMAGE URL" alt="" /></li>

<li><img src="IMAGE URL" alt="" /></li>

<li><img src="IMAGE URL" alt="" /></li>

<li><img src="IMAGE URL" alt="" /></li>

<li><img src="IMAGE URL" alt="" /></li>

<li><img src="IMAGE URL" alt="" /></li>

</ul>

</div>

<a href="#" class="carousel-prev">prev</a>

<a href="#" class="carousel-next">next</a>

<div class="slider-nav">

<ul>

<li><a href="#">Link Title</a></li>

<li><a href="#">Link Title</a></li>

<li><a href="#">Link Title</a></li>

<li><a href="#">Link Title</a></li>

<li><a href="#">Link Title</a></li>

<li><a href="#">Link Title</a></li>

<li><a href="#">Link Title</a></li></ul>

</div>

</div>

<!-- end slider holder -->

<div class="cl">&nbsp;</div>

</div>

</div>

<!-- end slider 1 -->