شرائح سلايد بالصور بتأثيريين

شرائح سلايد بالصور بتأثيريين

يوجد الآن مشاهدة التعليقات : 20

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

إخواني أخواتي الأعزاء خصصت لكم هذه التدوينة من إضافات css - html - jquery ، وبالطبع طريقة تركيبها على قالب بلوجر هي شرائح سلايد ثابتة كما أسميها سبق وقدمت لكم شرائح كما بالمدونة ، أما بخصوص هاته الشرائح فتوجد تأثيرات مختلفة وسأخصص تأثييرين في هذه التدوينة ما يميز الإضافات أنها تتغير بحسب المكان التي ستضع فيهاإما بشكل مستطيل بأربع شرائح وشكل مربع بشريحتيين لذا فأينما وضعتها ستلائم موقعك أو مدونتك لذا نبدأ أولا بالمعاينة
شرح طريقة التركيب
1 .نتوجه لقالب >> تحرير
2.ابحث بإستعمال CTRL+F عن <head> ثم ضع الكود التالي فوقه
 <script src='https://ar1web-com.googlecode.com/svn/trunk/slide-img.js'/>
3. ابحث عن : <b:skin/><[[ ثم ضع كود التأثير المختار فوقه
التأثير الأول
/* www.ar1web.com */
.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: left;
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;
left: 0px;
padding: 10px;
background: #1F4977;
color: #fff;
}
.grid figcaption h3 {
margin: 20px 0 0;
padding: 0;
color: #FFF;
font: normal 17px ges,tahoma;
text-align: center;
display: block;
}
.cs-style-4 figcaption a:hover {
background: #fff;
color: #ED4E6E;
}
.grid figcaption a {
text-align: center;
padding: 11px 10px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}

.cs-style-4 li {
    perspective: 1700px;
    perspective-origin: 0 50%;
}
.cs-style-4 figure {
    transform-style: preserve-3d;
}
.cs-style-4 figure > div {
    overflow: hidden;
}
.cs-style-4 figure img {
    transition: transform 0.4s;
}
 
.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
    transform: translateX(25%);
}
.cs-style-4 figcaption {
    height: 88.5%;
    width: 50%;
    opacity: 0;
    backface-visibility: hidden;
    transform-origin: 0 0;
    transform: rotateY(-90deg);
    transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
    opacity: 1;
    transform: rotateY(0deg);
    transition: transform 0.4s, opacity 0.1s;
}
.cs-style-4 figcaption a {
    position: absolute;
    bottom: 20px;
    right: 20px;
}
التأثير الثاني
/* www.ar1web.com */
.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-4'>
         <li>
     <figure>
                    <div><img alt='img04' src='http://1.bp.blogspot.com/--VxsGm26rF0/U_JL4DYkXjI/AAAAAAAAFKY/8wC98CfOPbI/s1600/finish.jpg'/></div>
      <figcaption>
       <h3>قريبا</h3>
       <span>Soon</span>
                          <a href='/'>ألقي نظرة</a>
      </figcaption>
     </figure>
    </li>
         <li>
     <figure>
                    <div><img alt='img04' src='http://1.bp.blogspot.com/--VxsGm26rF0/U_JL4DYkXjI/AAAAAAAAFKY/8wC98CfOPbI/s1600/finish.jpg'/></div>
      <figcaption>
       <h3>قريبا</h3>
       <span>SooN</span>
                          <a href='/'>ألقي نظرة</a>
      </figcaption>
     </figure>
    </li>
         <li>
     <figure>
                    <div><img alt='img04' src='http://1.bp.blogspot.com/--VxsGm26rF0/U_JL4DYkXjI/AAAAAAAAFKY/8wC98CfOPbI/s1600/finish.jpg'/></div>
      <figcaption>
       <h3>قريبا</h3>
       <span>SooN</span>
                          <a href='/'>ألقي نظرة</a>
      </figcaption>
     </figure>
    </li>
         <li>
     <figure>
                    <div><img alt='img04' src='http://1.bp.blogspot.com/--VxsGm26rF0/U_JL4DYkXjI/AAAAAAAAFKY/8wC98CfOPbI/s1600/finish.jpg'/></div>
      <figcaption>
       <h3>قريبا</h3>
       <span>SooN</span>
                          <a href='/'>ألقي نظرة</a>
      </figcaption>
     </figure>
    </li>
        </ul>
التأثير الثاني
 <ul class='grid cs-style-3'>
          <li>
            <figure>
              <img alt='img04' src='http://3.bp.blogspot.com/-C2ExmqlpB_8/U3OQ9C7LBQI/AAAAAAAADCw/i8l20qZWO_0/s1600/1.png'/>
              <figcaption>
                <h3>
                 تحويل صورتك الشخصية إلى كرتون 
                </h3>
                <span>
                  10
                </span>
                <a href='www.ar1web.com' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img alt='img01' src='http://2.bp.blogspot.com/-3EidbVMn1u0/U3OjR--ehnI/AAAAAAAADDI/KRddaMxpKRE/s1600/2.png'/>
              <figcaption>
                <h3>
                تصميم احترافي لصورتك الشخصية
                </h3>
                <span>
                  5
                </span>
                <a href='www.ar1web.com' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img alt='img02' src='http://3.bp.blogspot.com/-4zG1-BRVJcM/U3OjQ2hcjnI/AAAAAAAADDA/ZHtFkIorjoY/s1600/3.png'/>
              <figcaption>
                <h3>
تصميم صور احترفية لعرض خدماتك في خمسات 
                </h3>
                <span>
                  5
                </span>
                <a href='www.ar1web.com' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img alt='img05' src='http://2.bp.blogspot.com/-LVCBMviU9TQ/U4Bydq9wx6I/AAAAAAAADM8/V5uIlEhj0vg/s1600/1.png'/>
              <figcaption>
                <h3>
واجهة &quot;معرض حسام&quot;
                </h3>
                <span>
                  5
                </span>
                <a href='www.ar1web.com' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
        </ul>
* لا تنسى تغيير الروابط والكلمات + الصور .. بخاصتك تكون بنفس المقاس
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 20 تعليقًا:

  1. السلام عليكم.

    أخي أنا أريد أن ينطبق التأثير الثاني على صور المواضيع الموجودة في الصفحة الرئيسية، لمتابعة قراءة التدوينة (بدلا من طلب الخدمة)، فما الذي أغيره في كود html الأخير وأين أضعه لينطبق على كافة الصور في الصفحة الرئيسية وصفحات الأقسام؟

    وشكرًا جزيلًا.

    ردحذف
    الردود
    1. أخي هذا ليس تأثير يخص المواضيع أو غيرها فقط هي شرائح لعرض شيئ ما
      راجع المعاينات لكي تفهم

      حذف
    2. نعم أخي راجعت المعاينات، وفي المعاينة الثانية يوجد شرائح لعرض شيء ما كما قلت، وفي هذه الشرائح صور، ويوجد تأثير على هذه الصور وهو عند مرور مؤشر الماوس يظهر لون من الأسفل إلى الأعلى مع عبارة طلب الخدمة. وأنا كنت أقصد أني أريد أن ينطبق هذا التأثير على صور المواضيع في الصفحة الرئيسية إن أمكن، مع عبارة: "تابع القراءة" بدلًا من "طلب الخدمة". ولا أريد الشرائح.. بل أريد التأثير فقط.. ويوجد في بعض المدونات تأثيرات مشابهة على صور المواضيع في الصفحة الرئيسية. أرجو أن تكون فكرتي قد وصلت. وشكرًا لك.

      حذف
    3. للأسف لا يمكن تطبيق الطريقة للمواضيع وغيرها ، لأنها تتضمن كود js خاص فقط بالشرائح

      حذف
    4. للأسف لا يمكن تطبيق الطريقة للمواضيع وغيرها ، لأنها تتضمن كود js خاص فقط بالشرائح

      حذف
    5. حسنًا مشكور أخي.

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

    ردحذف
    الردود
    1. إتبع الخطوات كما هي وستشتغل معك لا غير ، لم أفهم قصدك بـ سرقة الإضافة

      حذف
    2. مدونة عادل ويب قامت بسرقة الأضافة الخاصة بك ويمكنك رؤية المثال هنا لأننى حصلت على القالب وأنا أقوم بتغيير جزرى للقالب وأريد أن أغير شرائح الصور حتى لا يقال على أننى سارق مع العلم أننى لم أسرق الأضافة بل عادل ويب المثال :
      http://msrawy4mix.blogspot.com

      حذف
    3. عليك بحذف الإضافة القديمة وإضافة الجديدة

      حذف
  3. السلام عليكم
    أخي أنا طبقت جميع الخطوات ولم يعمل السلايدر بشكل صححيح كما في المعاينة أرجو إفادتي

    ردحذف
  4. أخى الكريم لم أستطيع حذف الإضافة القديمة !

    ردحذف
  5. السلام عليكم
    هناك بعض المواضيع المحذوفة كيف يمكنني ان أتصفحها مرة اخرى وشكراً

    ردحذف
    الردود
    1. اهلا
      سيتم نشرها نحاول مراجعتها وإصلاح بعض الأشياء

      حذف
  6. tadimsunnah4/18/2015

    أغبى مدون رأيته في حياتي

    ردحذف
    الردود
    1. هههههههههههه ده انت اغبي شخص في العالم حسام افضل مدون رايته في حياتي

      حذف
  7. شكرااا لك اخي على اضافاتك الرائعة

    ردحذف
  8. كيف يمكني تغيير اللون

    ردحذف
  9. غير معرف4/16/2016

    اخي عجبني القالب

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم