اضافة خدماتك على خمسات بشكل سلايد شو في بلوجر

السلام عليكم ورحمة الله تعالى وبركاته

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

لمعاينة الاضافة اضغط هنا

طريقة الاضافة للمدونة

الخطوة الاولى:

1 .اولا توجه للقالب 

2. ابحث بإستعمال CTRL+F عن  <head/>

3. ضع الكود التالي قبله [ فوقه ]

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

الخطوة الثانية:

1. ابحث عن : <b:skin/><[[

2. ضع الكود التالي فوق <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: 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;
}

بعد ان حفضت القالب توجه لتخطيط واضف اداة جديدة واختر جافا سكربت وضع لكود التالي داخله

 <ul class='grid cs-style-3'>
          <li>
            <figure>
              <img alt='img04' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR6r2u_6Eh_jYnTNG6DVflDKqsH3fKwrIBCZMamzLPjX491UpioUkZXD4jtxa6qK88zprlnurGKxr9wCnh5d1E3F8n9d1YIWeNN8RLsRFASgbQTyPlrXw1J0LVMpdnly9Z4mfdSDzaO4E/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs8k_BkYAs_rFMKbJMaQ2mRukS0grUqgrN2TDXcXmjx6n00P3o3LnZTR0PSltjGDR4ufqu4nXlhLVLoyPLTJJqyB4mPwzrOAG5yztDzTQN6BjYbnW9yFP534joRels3OVHSL-zEJ3z25w/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht2XRmdOHUH4GZRE8-xYr7Y1h8-v0HhC9k2YhDxwjg-kwg8xcsuP7F1DQIWLk8rqlwGvsYOlD8wiJ08vXmxaXcz-hsys5v9qMkl25utd28GA3hmN5AL6VCk-yhMUfqqN0g_nwqC-tWLGU/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeO7VyAyTwTBxWIQNUcWsGrz1FoD-gl138VPCoyEhpyQGFBwLNElp8tnWfIwgxc02iV7jhvc75gGPklOE4DU6tz5Jc47O2CtJAIZKGCX1IltCOplZo_Imsy87d471qO2hvgPCXTtJYOCo/s1600/1.png'/>
              <figcaption>
                <h3>
واجهة &quot;معرض حسام&quot;
                </h3>
                <span>
                  5
                </span>
                <a href='www.ar1web.com' target='_blank'>
                  طلب الخدمة
                </a>
              </figcaption>
            </figure>
          </li>
        </ul>

مصدر الاضافة مدونة عرب ويب

ارجو ان تكون الاضافة قد اعجبتكم شكرا على المتابعة