الأربعاء، 25 ديسمبر 2013

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

اليوم اقدم لكم سلايدر شو احترافى ولن تجده الا فى مدونة ابداعاتى ويتميز بالأناقة والجمال والخفة وسهولة التركيب كما يتميز بالحركة الممتازة فلن ترى له مثيل وستشاهد ذلك بنفسك من خلال المعاينة


طريقة التركيب 
اذهب الى لوحة التحكم >> التخطيط >> اضافة أداة >> Html/Javascript
ضع بها هذا الكود
<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 -->
قم بتغيير IMAGE URL برابط الصورة 
قم بتغيير # بالرابط الذى توصل اليه الصورة

دمتم فى ود 
من فضلك اضغظ لايك لمشاهدة لينك التحميل

6 التعليقات:

  1. مشكوووووووووووووووووووور :))

    ردحذف
  2. رائع جدا اخ محمود (h)
    بصراحة انت ممتاز ومدونتك ممتازة جدا جدا
    taha

    ردحذف

ملاحظة : للإبلاغ عن رابط محتوى لا يعمل المرجوا الضغط على " الاتصال السريع " في أسفل القائمة مباشرة لاصلاح الخطأ بسرعة : نحن نسعى دائما لرقي الموقع جميعا من أجل الاستقرار
جميع الحقوق محفوظة © 2014 مدونة ابداعاتىجميعا من أجل الاستقرار