سلايد شو احترافى للصور لمدونات بلوجر 2014

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

الخطوة الأولى 

<style>.image-container{
width: 600px;
height: 401px;
position: relative;
margin: 25px auto;
box-shadow: 0 0 2px 1px #525447;
border : 12px solid #fff;
}
input[type='radio']{
display: none;
}
label{
position: absolute;
width: 35px;
font-size: 22px;
text-align: center;
padding: 5px 0;
background: #5EAEFF;
border-radius: 50%;
z-index: 60;
top: 430px;
display: block;
color : #fff;
box-shadow:0 0 0 4px rgba(165, 173, 180, 0.53);
cursor: pointer;
-webkit-transition : all .5s ease;
}
label[for='button-1']{
left: 210px;
}
label[for='button-2']{
left: 260px;
}
label[for='button-3']{
left: 308px;
}
label[for='button-4']{
left: 356px;
}

.image > *{
width: 150px;
height: 401px;
position: relative;
float: left;
}
.part1 > * , .part2 > * , .part3 > * , .part4 > *{
position: absolute;
width: inherit;
height : inherit;
}
input[type='radio']:checked+label{
box-shadow:0 0 0 4px rgba(170, 173, 161, 0.35), inset 0 0 10px 1px #8C8D97;
color : #5EAEFF;
background: #fff;
}
input[type='radio']#button-1:checked ~ .image .pi1 {
z-index: 18;
width : inherit;
-webkit-transition : width .6s ease-in-out ;
}
input[type='radio']#button-1:checked ~ .image .pi2 , .pi3 , .pi4 {
width : 0;
-webkit-transition : width 0 ease-in-out .6s;
}
input[type='radio']#button-2:checked ~ .image .pi2 {
z-index: 18;
width : inherit;
-webkit-transition : width .6s ease-in-out;
}
input[type='radio']#button-2:checked ~ .image .pi1 , .pi3 , .pi4 {
width: 0;
-webkit-transition : width 0 ease-in-out .6s;
}
input[type='radio']#button-3:checked ~ .image .pi3 {
z-index: 18;
width : inherit;
-webkit-transition : width .6s ease-in-out;
}
input[type='radio']#button-3:checked ~ .image .pi1 , .pi2 , .pi4 {
width: 0;
-webkit-transition : width 0 ease-in-out .6s;
}
input[type='radio']#button-4:checked ~ .image .pi4 {
z-index: 18;
width : inherit;
-webkit-transition : width .6s ease-in-out;
}<style/>

الخطوة الثانيـــــــــــــة 

<div class="image-container">
<input type="radio" id='button-1' name='controls' checked />
<label for="button-1">1</label>
<input type="radio" id='button-2' name='controls' />
<label for="button-2">2</label>
<input type="radio" id='button-3' name='controls' />
<label for="button-3">3</label>
<input type="radio" id='button-4' name='controls' />
<label for="button-4">4</label>
<div class="image">
<div class="part1"><div class="pi1" style="background:url(http://i.cubeupload.com/g1Ywsi.png) 0 0;"></div>
<div class="pi2" style="background:url(http://i.cubeupload.com/fttETX.png) 0 0;"></div>
<div class="pi3" style="background:url(http://i.cubeupload.com/MiahXu.png) 0 0;"></div>
<div class="pi4" style="background:url(http://i.cubeupload.com/PxgSjm.png) 0 0;"></div>
</div>
<div class="part2"><div class="pi1" style="background:url(http://i.cubeupload.com/g1Ywsi.png) -150px 0;"></div>
<div class="pi2" style="background:url(http://i.cubeupload.com/fttETX.png) -150px 0;"></div>
<div class="pi3" style="background:url(http://i.cubeupload.com/MiahXu.png) -150px 0;"></div>
<div class="pi4" style="background:url(http://i.cubeupload.com/PxgSjm.png) -150px 0;"></div>
</div>
<div class="part3"><div class="pi1" style="background:url(http://i.cubeupload.com/g1Ywsi.png) -300px 0;"></div>
<div class="pi2" style="background:url(http://i.cubeupload.com/fttETX.png) -300px 0;"></div>
<div class="pi3" style="background:url(http://i.cubeupload.com/MiahXu.png) -300px 0;"></div>
<div class="pi4" style="background:url(http://i.cubeupload.com/PxgSjm.png) -300px 0;"></div>
</div>
<div class="part4"><div class="pi1" style="background:url(http://i.cubeupload.com/g1Ywsi.png) -450px 0;"></div>
<div class="pi2" style="background:url(http://i.cubeupload.com/fttETX.png) -450px 0;"></div>
<div class="pi3" style="background:url(http://i.cubeupload.com/MiahXu.png) -450px 0;"></div>
<div class="pi4" style="background:url(http://i.cubeupload.com/PxgSjm.png) -450px 0;"></div>
</div>
</div>
</div>