الثلاثاء، 29 أبريل، 2014

سلايد شو احترافى للصور لمدونات بلوجر 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>

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

6 التعليقات:

  1. موضوع في المستوي اخي محمود شكرا لك

    ردحذف
    الردود
    1. شكرا لمرورك اخى نزار
      عود كريم للاطلال على اخر مواضيعى

      حذف
  2. موضوع جميل سلمت يداك

    ردحذف
    الردود
    1. شكرا يا غالى للمرور العطر

      حذف
  3. موضوع راااااااااااااااااااااااااااااااااااااااااائع جدا لكن ما ضبط معي , لما أجرب الخطوة 1 بيقولو لي هناك خطاء (b)

    ردحذف
    الردود
    1. الخطوة الأولى خاصة بالسى اس اس اخى
      فقط ضعها تحت وسم <head> وطبق الخطوة الثانية واحفظ
      لا مجال للخطأ فيها ولو لم تحل برجاء ارفاق صورة للمشكلة
      شكرا لمرورك يا طيب (f)

      حذف

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