خدمه جميله جدا يا اخى , شكرا
العفو
نايس جدا والله حاجة جميلة جدا يسلمو
خدمة ممتازة من شخص ممتاز جدااااا
خدمة رائع من شخص ممتاز جدا
وتتواصل الحصريات من مدونة ابداعاتى فى موضوع جديد وحصرى عن اضافة سلايدر شو احترافى لمدونتك بشكل بسيط ومنسق لا يؤثر على سرعة مدونتك على خلاف غيره لذلك قررت تقديمه لكم فى هذا الموضوع متابعينا الكرام والسلايدر شو له فوائد كثيرة ربما يجهلها بعضنا فهو يعمل كأحد عوامل جذب الزوار فى أغلب المدونات ولكى تستفيد منه أبلغ استفادة لابد أن تضع به أفضل ما لديك من مواضيع ولكى لا أطيل عليكم هيا بنا للمعاينة وطريقة التركيب
بالفعل قد نال اعجابك
لا تقلق ستحصل على شكل مماثل لمدونتك
♫ طريقة التركيب ♫
الخطوة الأولى
اذهب للوحة تحكم مدونتك >> القالب >> تحرير 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>
ثم غير روابط الصور بما يناسبك
الأن قد انتهى الموضوع
اى استفسار اتركه فى تعليق
0 تعليقات 