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




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

♫ طريقة التركيب  ♫

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

اذهب للوحة تحكم مدونتك >> القالب >> تحرير HTML 
ابحث عن وسم  <head> 
وذلك بالضغط على CTRL + F من لوحة المفاتيح 
ضع تحته مباشرة هذا الكود


<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/>

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


ثم انتقل للتخطيط >> اضافة أداة >> html/javascript
( حدد مكان الاضافة فى المكان الذى تريد ظهور السلايدر فيه )
أو حدد مكان السلايدر من القالب وضع الكود 
ضع بها كود الـ HTML  التالى 
<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>

ثم غير روابط الصور بما يناسبك 
الأن قد انتهى الموضوع 
اى استفسار اتركه فى تعليق
من فضلك اضغظ لايك لمشاهدة لينك التحميل
الأقسام
كاتب الموضوع Unknown في الثلاثاء, أبريل 29, 2014