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

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

●● إعلانـات ●●
اعلانك هنا كبير إعلانك هنا إعلانك هنا
أفضل الاعضاء هذا الشهر
آخر المشاركات
أفضل الاعضاء هذا الشهر
495 المساهمات
351 المساهمات
184 المساهمات
119 المساهمات
93 المساهمات
66 المساهمات
34 المساهمات
32 المساهمات
27 المساهمات
27 المساهمات
آخر المشاركات


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

replyإرسال مساهمة في موضوع
+13
محمد كركوك العراقي
Mahmoud Soltan
omarpop23
Casper
Zoolraqey
driss1978
princess soma
~ IMA
αуαησ
نَــانواْ~مَـــافْ
Modal7arbi
goboy
Akatsuki
17 مشترك



descriptiondefault[ 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

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

more_horiz
كود روعة

يسلموووو

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

more_horiz
_



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

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

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

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

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

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

more_horiz
روعة شكرا لك 

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

more_horiz
شكرا

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

more_horiz
شكراً لك

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

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

descriptiondefaultرد: [ 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[ شرح ] إضافة نافذة الرد السريع ( أحلى منتدى )