الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
إخواني أخواتي الأعزاء خصصت لكم هذه التدوينة من إضافات css - html - jquery ، وبالطبع طريقة تركيبها على قالب بلوجر هي شرائح سلايد ثابتة كما أسميها سبق وقدمت لكم شرائح كما بالمدونة ، أما بخصوص هاته الشرائح فتوجد تأثيرات مختلفة وسأخصص تأثييرين في هذه التدوينة ما يميز الإضافات أنها تتغير بحسب المكان التي ستضع فيهاإما بشكل مستطيل بأربع شرائح وشكل مربع بشريحتيين لذا فأينما وضعتها ستلائم موقعك أو مدونتك لذا نبدأ أولا بالمعاينة
شرح طريقة التركيب
1 .نتوجه لقالب >> تحرير
2.ابحث بإستعمال CTRL+F عن <head> ثم ضع الكود التالي فوقه
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>
واجهة "معرض حسام"
</h3>
<span>
5
</span>
<a href='www.ar1web.com' target='_blank'>
طلب الخدمة
</a>
</figcaption>
</figure>
</li>
</ul>
* لا تنسى تغيير الروابط والكلمات + الصور .. بخاصتك تكون بنفس المقاس
ملحوظة:
يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
السلام عليكم.
ردحذفأخي أنا أريد أن ينطبق التأثير الثاني على صور المواضيع الموجودة في الصفحة الرئيسية، لمتابعة قراءة التدوينة (بدلا من طلب الخدمة)، فما الذي أغيره في كود html الأخير وأين أضعه لينطبق على كافة الصور في الصفحة الرئيسية وصفحات الأقسام؟
وشكرًا جزيلًا.
أخي هذا ليس تأثير يخص المواضيع أو غيرها فقط هي شرائح لعرض شيئ ما
حذفراجع المعاينات لكي تفهم
نعم أخي راجعت المعاينات، وفي المعاينة الثانية يوجد شرائح لعرض شيء ما كما قلت، وفي هذه الشرائح صور، ويوجد تأثير على هذه الصور وهو عند مرور مؤشر الماوس يظهر لون من الأسفل إلى الأعلى مع عبارة طلب الخدمة. وأنا كنت أقصد أني أريد أن ينطبق هذا التأثير على صور المواضيع في الصفحة الرئيسية إن أمكن، مع عبارة: "تابع القراءة" بدلًا من "طلب الخدمة". ولا أريد الشرائح.. بل أريد التأثير فقط.. ويوجد في بعض المدونات تأثيرات مشابهة على صور المواضيع في الصفحة الرئيسية. أرجو أن تكون فكرتي قد وصلت. وشكرًا لك.
حذفللأسف لا يمكن تطبيق الطريقة للمواضيع وغيرها ، لأنها تتضمن كود js خاص فقط بالشرائح
حذفللأسف لا يمكن تطبيق الطريقة للمواضيع وغيرها ، لأنها تتضمن كود js خاص فقط بالشرائح
حذفحسنًا مشكور أخي.
حذفأخ حسام .. أنا قمت بتطبيق كل شئ ولكن القالب الذى أمتلكه فيه شرائح سلايد بالصور التى كانت مركبة على مدونة عرب ويب قبل سرقة الأضافة وعند تطبيق الأضافة بالتأثير الأول لم يتغير شئ !!
ردحذفإتبع الخطوات كما هي وستشتغل معك لا غير ، لم أفهم قصدك بـ سرقة الإضافة
حذفمدونة عادل ويب قامت بسرقة الأضافة الخاصة بك ويمكنك رؤية المثال هنا لأننى حصلت على القالب وأنا أقوم بتغيير جزرى للقالب وأريد أن أغير شرائح الصور حتى لا يقال على أننى سارق مع العلم أننى لم أسرق الأضافة بل عادل ويب المثال :
حذفhttp://msrawy4mix.blogspot.com
عليك بحذف الإضافة القديمة وإضافة الجديدة
حذفالسلام عليكم
ردحذفأخي أنا طبقت جميع الخطوات ولم يعمل السلايدر بشكل صححيح كما في المعاينة أرجو إفادتي
رابط المدونة ?
حذفأخى الكريم لم أستطيع حذف الإضافة القديمة !
ردحذفالسلام عليكم
ردحذفهناك بعض المواضيع المحذوفة كيف يمكنني ان أتصفحها مرة اخرى وشكراً
اهلا
حذفسيتم نشرها نحاول مراجعتها وإصلاح بعض الأشياء
أغبى مدون رأيته في حياتي
ردحذفهههههههههههه ده انت اغبي شخص في العالم حسام افضل مدون رايته في حياتي
حذفشكرااا لك اخي على اضافاتك الرائعة
ردحذفكيف يمكني تغيير اللون
ردحذفاخي عجبني القالب
ردحذف