25‏/08‏/2014

إخواني أخواتي الأعزاء خصصت لكم هذه التدوينة من إضافات 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>
* لا تنسى تغيير الروابط والكلمات + الصور .. بخاصتك تكون بنفس المقاس
إخواني أخواتي الأعزاء خصصت لكم هذه التدوينة من إضافات 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>
* لا تنسى تغيير الروابط والكلمات + الصور .. بخاصتك تكون بنفس المقاس
20 Blogger تعليقات
Disqus
20 التعليقات
المشرف
avatar

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

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

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

رابط المدونة ?

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar

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

المشرف
avatar
tadimsunnah 4/18/2015
delete

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

المشرف
avatar

شكرااا لك اخي على اضافاتك الرائعة

المشرف
avatar

كيف يمكني تغيير اللون

المشرف
avatar

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

المشرف
avatar

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

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة