اضافة سلايدر افقي بتأثيرات مميزة

اضافة سلايدر افقي بتأثيرات مميزة


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

طريقة تركيب الأضافة

1 .نتوجه لقالب >> تحرير
2.ابحث بإستعمال CTRL+F عن <head> ثم ضع الكود التالي فوقه

 <script src='https://ar1web-com.googlecode.com/svn/trunk/slide-img.js'/> 

3. ابحث عن : <b:skin/><[[ ثم ضع كود التأثير المختار فوقه

/* www.6ef.co */
.grid {
padding: 0;
margin: 0 auto;
list-style: none;
text-align: center;
overflow: hidden;
}
.grid li {
display: inline-block;
width: 300px;
margin: 0 0 10px 10px;
text-align: right;
position: relative;
background: #FFF;
padding: 10px;
box-shadow: 0 0 3px #C9C6C6;
}
.grid figure {
margin: 0;
position: relative;
}
.grid figure img {
width: 100%;
display: block;
position: relative;
}
.grid figcaption {
position: absolute;
top: 0;
right: 0;
padding: 10px;
background: #1F4977;
color: #33F55B;
}
.grid figcaption h3 {
margin: 20px 0 0;
padding: 0;
color: #FFF;
font: normal 17px ges,tahoma;
text-align: center;
display: block;
}
.grid figcaption span:before {
content: '$';
}
.grid figcaption a {
text-align: center;
padding: 11px 10px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}
/* www.ar1web.com */
.cs-style-3 figure {
overflow: hidden;
}
.cs-style-3 figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .cs-style-3 figure:hover img, .cs-style-3 figure.cs-hover img {
-webkit-transform: translateY(-130px);
-moz-transform: translateY(-130px);
-ms-transform: translateY(-130px);
transform: translateY(-130px);
}
.cs-style-3 figcaption {
width: 93.3%;
top: auto;
height: 92%;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style-3 figure:hover figcaption, .cs-style-3 figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.cs-style-3 figcaption a {
position: absolute;
bottom: 45px;
left: 75px;
border-radius: 3px;
}
figcaption span {
font: normal 16px tahoma;
position: relative;
padding: 0 21px 0;
top: 0;
}
.cs-style-3 figcaption a:hover {
background:#fff;
color:#ED4E6E;
}

 4. يتبقى فقط كود HTML ويمكنك وضعه بالمكان المناسب لك في القالب أو حتى في التخطيط عبر إضافة Html/Javascript

<ul class='grid cs-style-3'>
          <li>
            <figure>
              <img alt='img04' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj-Qec3AuXeL-Qt0nTUIltB6VtGeLPTKm-nuA0d3RW-Qiailx-ziH5Jt7qHnb9Vmh4KOyA19SwaekVNyOFfVhthRQXoS7V2L7nvYCkXGTuSUZfeQY0O7kaMuw4Ar7d0CEBGP2CLSfV-BZr/s1600/1.png'/>
              <figcaption>
                <h3>
                 تحويل صورتك الشخصية إلى كرتون
                </h3>
                <span>
                  10
                </span>
                <a href='http://www.6ef.co' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img alt='img01' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Ma49FsJiVqjwxgW10XcorbWkjZMM_9S_gJXTu93TzokYTE3qU_FpeaDSd3RrT67plf8JvH8XQM7Q_s4co2C-OzegCM5RO-7q8cRyafTLT1XXt-u7jYr4UObA9I_s1k2jQHGaJvyptgz_/s1600/2.png'/>
              <figcaption>
                <h3>
                تصميم احترافي لصورتك الشخصية
                </h3>
                <span>
                  5
                </span>
                <a href='http://www.6ef.co' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img alt='img02' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglWEYVKHwQFlAKdV1ZXZQclbsIWnnqol14qPz4_V6tdlafaaPg7oq7JOjWpa7Vl8wDtWE3XRYG3RGoh6dhdVixOSpxCqFlrscwUSlbQ59DNoqqTRDaGCfsoHENllajq47OsYTN5eltK2Ba/s1600/3.png'/>
              <figcaption>
                <h3>
تصميم صور احترفية لعرض خدماتك في خمسات
                </h3>
                <span>
                  5
                </span>
                <a href='http://www.6ef.co' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img alt='img05' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO637pbwAXcr2JH99NWIvEeQU8KXo6A5vsyd6PXKZi7EeQjVqV4HqISIuqtwbvEqd3ScWIXasvhjXfMDye7DPHcBRk5dHMWro3k4Y0x_aGUu1z-Yl0r4JmH_D2lQVuId_fYRamIfJU2tZl/s1600/1.png'/>
              <figcaption>
                <h3>
واجهة &quot;معرض حسام&quot;
                </h3>
                <span>
                  5
                </span>
                <a href='http://www.6ef.co' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
        </ul> 

مبروك عليك السلايدر , لا تغادر قبل وضع كلمة شكر , ومشاركة الموضوع في تواصل الشبكات الاجتماعيه 
 

شارك الموضوع

مواضيع ذات صلة

الاشتراك في: تعليقات الرسالة (Atom)