The Best
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

The Bestدخول
●● إعلانـات ●●
إعلانك هنا إعلانك هنا إعلانك هنا
إعـلانـات المنتـدى

إحصائيات المنتدى
أفضل الاعضاء هذا الشهر
آخر المشاركات
أفضل الاعضاء هذا الشهر
3696 المساهمات
3004 المساهمات
1681 المساهمات
1054 المساهمات
594 المساهمات
444 المساهمات
251 المساهمات
197 المساهمات
83 المساهمات
59 المساهمات
آخر المشاركات

[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

replyإرسال مساهمة في موضوع
+18
كونان2000
الاميرساسوكي
YoJene
S @ M e H
كويوكو تشان
محمد كركوك العراقي
Mahmoud Soltan
omarpop23
Casper
Zoolraqey
driss1978
princess soma
~ IMA
A Y A N O
نَــانواْ~مَـــافْ
Modal7arbi
goboy
Akatsuki
22 مشترك



description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى Empty[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى 2020-017

بسم الله الرحمن الرحيم

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

يسرنا أن ننشر لكم كود السلايد شو الجديد الخاص بذا بست

و كما ترون فهو يعمل بدون مشاكل مع نسخة Modern BB و مع كل النسخ الأخرى بإذن الله

الكود من تصميم أخي رياض خصيصا للمنتدى جزاه الله خيرا

~

كود سلايد شو - اعلانات متحركة - أحلى منتدى


[ طريقة التركيـب ]

1- كود الجافا :

لوحة الإدارة >> عناصر إضافية >> HTML و JAVASCRIPT >> إدارة أكواد Javascript

تفعيل نظام إدارة أكواد Javascript : - نعـم

ثم : إنشاء كود جديد [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى 2020-016

العنوان : سلايد شو

أضف الكود إلى : جميع الصفحات

[ محتوى مخفي | ضع ردا أولا ]



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

الكود:

<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 I love you

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
كود روعة

يسلموووو

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
_



كود جميل وسوف يتم تركيبة قريباً  [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى 866468155.

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
شكرا اكاتسكي استفدت من الكود [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى 2347500315

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
ثانكس ،، كنت ادور عليه من زمان TwT

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
روعة شكرا لك 

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
شكرا

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
شكراً لك

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
بارك الله فيكم

description[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى Emptyرد: [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى

more_horiz
tnX
 
 KonuEtiketleri عنوان الموضوع
[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى
 Konu BBCode BBCode
privacy_tip صلاحيات هذا المنتدى:
تستطيع الرد على المواضيع في هذا المنتدى
replyإرسال مساهمة في موضوع
remove_circleمواضيع مماثلة
chat_bubble[ JavaScript + CSS ] تغيير علبة الألوان في صندوق الرد لشكل إحترافي و جميل | أحلى منتدى
chat_bubbleسلايد شو احمر وازرق لاحلى منتدى
chat_bubble[ شرح ] إضافة نافذة الرد السريع ( أحلى منتدى )
chat_bubble[ شـرح ] اضافة مجموعة جديدة ( أحلى منتدى )
chat_bubbleطريقة تغيير رابط المنتدى ( أحلى منتدى )