![[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى Empty](https://2img.net/i/empty.gif)
![[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى 2020-017](https://servimg.com/r/4512891418/2020-017.png)
بسم الله الرحمن الرحيم
السلام عليكم و رحمة الله تعالى و بركآته
يسرنا أن ننشر لكم كود السلايد شو الجديد الخاص بذا بست
و كما ترون فهو يعمل بدون مشاكل مع نسخة Modern BB و مع كل النسخ الأخرى بإذن الله
الكود من تصميم أخي رياض خصيصا للمنتدى جزاه الله خيرا
~
كود سلايد شو - اعلانات متحركة - أحلى منتدى
[ طريقة التركيـب ]
1- كود الجافا :
لوحة الإدارة >> عناصر إضافية >> HTML و JAVASCRIPT >> إدارة أكواد Javascript
تفعيل نظام إدارة أكواد Javascript : - نعـم
ثم : إنشاء كود جديد
![[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى 2020-016](https://servimg.com/r/4512891418/2020-016.png)
العنوان : سلايد شو
أضف الكود إلى : جميع الصفحات
[ محتوى مخفي | ضع ردا أولا ]
2- كود الـ CSS
لوحة الإدارة >> مظهر المنتدى >> الصور و الألوان >> ألوان >> ورقة تصميم css
الكود:
/* سلايد شو THEB3ST.COM -------*/
/* Slideshow */
.theb3st-slideshow-container {
--button-color-bg: #0CC7B7;
--button-color-text: #fff;
--img-color-bg: #fff;
--img-color-shadow: #0CC7B7;
position: relative;
width: 896px;
height: 200px;
margin: 0 auto;
}
.theb3st-slideshow-container button {
padding: 0;
border: none;
}
.theb3st-slideshow-previous-slide,
.theb3st-slideshow-next-slide {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 40px;
width: 30px;
font-size: 1.5rem;
line-height: 100%;
cursor: pointer;
background-color: var(--button-color-bg);
color: var(--button-color-text);
opacity: 50%;
transition: opacity 0.3s ease !important;
}
.theb3st-slideshow-previous-slide:hover,
.theb3st-slideshow-next-slide:hover {
opacity: 90%;
}
.theb3st-slideshow-previous-slide {
left: 0;
border-radius: 0 15px 15px 0;
}
.theb3st-slideshow-next-slide {
right: 0;
border-radius: 15px 0 0 15px;
}
.theb3st-slideshow-slides-container {
display: flex;
overflow-x: hidden;
height: 100%;
width: 100%;
}
.theb3st-slideshow-slide {
height: 100%;
width: auto;
display: flex;
align-items: center;
justify-content: flex-start;
background-color: #ddd;
}
.theb3st-slideshow-slide img {
box-sizing: content-box;
height: 145px;
width: 200px;
padding: 6px;
margin: 5px;
border: 1px solid #ddd;
background-color: var(--img-color-bg);
transition: box-shadow 0.3s ease, transform 0.2s ease-in-out !important;
}
.theb3st-slideshow-slide img:hover {
box-shadow: 0 0 10px var(--img-color-shadow);
transform: scale(1.035, 1.035);
}
.theb3st-slideshow-slide a {
width: auto;
height: auto;
}
@media only screen and (max-width: 896px) {
.theb3st-slideshow-container {
width: 672px;
}
}
@media only screen and (max-width: 672px) {
.theb3st-slideshow-container {
width: 448px;
}
}
@media only screen and (max-width: 448px) {
.theb3st-slideshow-container {
width: 224px;
}
}
3- كود HTML
لوحة الإدارة >> إدارة عامة >> الرسائل و الإيميلات >> الإعلانات الخاصة
أضف الكود في إعلان واحد جديد ( و لا تضف أي اعلانات أخرى حتى يعمل بشكل طبيعي )
+ تأكد من جعل الاعدادات هكذا :
![[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى 2020-018](https://servimg.com/r/4512891418/2020-018.png)
الكود:
<div class="theb3st-slideshow-container">
<div class="theb3st-slideshow-slides-container">
<div class="theb3st-slideshow-slide">
</a> <a href="رابط الموضوع"><img alt="عنوان الاعلان" src="رابط الصورة" />
</a> <a href="رابط الموضوع"><img alt="عنوان الاعلان" src="رابط الصورة" />
</a> <a href="رابط الموضوع"><img alt="عنوان الاعلان" src="رابط الصورة" />
</a> <a href="رابط الموضوع"><img alt="عنوان الاعلان" src="رابط الصورة" />
</a> <a href="رابط الموضوع"><img alt="عنوان الاعلان" src="رابط الصورة" />
</a> <a href="رابط الموضوع"><img alt="عنوان الاعلان" src="رابط الصورة" />
</a> <a href="رابط الموضوع"><img alt="عنوان الاعلان" src="رابط الصورة" />
</a> <a href="رابط الموضوع"><img alt="عنوان الاعلان" src="رابط الصورة" />
</div>
</div>
<button class="theb3st-slideshow-previous-slide" onclick="swipeSlideBS(this.parentElement,-1)">
❯
</button>
<button class="theb3st-slideshow-next-slide" onclick="swipeSlideBS(this.parentElement,1)">
❮
</button>
</div>ما عليك إلا تكرار هذا الكود لاضافة المزيد من الاعلانات :
الكود:
</a> <a href="رابط الموضوع"><img alt="عنوان الاعلان" src="رابط الصورة" /> ~
جميع الحقوق محفوظة لـمنتدى ذا بست The Best | theb3st.com
يمنع النقـل دون ذكر المصدر كاملا مع رابط الموضوع ! و الله رقيب عتيد ~
![[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى 866468155](/users/2614/24/16/96/smiles/866468155.gif)
![[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى 2347500315](/users/2614/24/16/96/smiles/2347500315.gif)
