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

The Bestدخول
●● إعلانـات ●●
اعلانك هنا كبير إعلانك هنا ديوان الإلكتروني
أفضل الاعضاء هذا الشهر
آخر المشاركات
أفضل الاعضاء هذا الشهر
315 المساهمات
239 المساهمات
114 المساهمات
110 المساهمات
53 المساهمات
45 المساهمات
39 المساهمات
30 المساهمات
25 المساهمات
23 المساهمات
آخر المشاركات


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

+11
omarpop23
Casper
Zoolraqey
driss1978
princess soma
~ IMA
αуαησ
نَــانواْ~مَـــافْ
Modal7arbi
goboy
Akatsuki
15 مشترك



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


[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى H9R9IUO
[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى RT69Sre
[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

[ أكآتسوكيـآت ] : مدونتي [ [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ] | معرضي [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ] | متجـري [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط] ]  [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى 866468155

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 Linki رابط الموضوع
 Konu BBCode BBCode
 Konu HTML Kodu HTML code
privacy_tip صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى