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

The Bestدخول
●● إعلانـات ●●
اعلانك هنا كبير إعلانك هنا ديوان الإلكتروني
أفضل الاعضاء هذا الشهر
آخر المشاركات
أفضل الاعضاء هذا الشهر
251 المساهمات
239 المساهمات
108 المساهمات
92 المساهمات
46 المساهمات
45 المساهمات
30 المساهمات
25 المساهمات
22 المساهمات
19 المساهمات
آخر المشاركات


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

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



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

more_horiz
تذكير بمساهمة فاتح الموضوع :

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

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

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

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

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

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

~

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


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

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

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

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

ثم : إنشاء كود جديد [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 2 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 ] كود سلايد شو أحلى منتدى - صفحة 2 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 ] كود سلايد شو أحلى منتدى - صفحة 2 866468155 I love you


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

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

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

more_horiz
[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 2 1f60d  [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 2 1f60d  [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 2 1f60d  [ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 2 1f60d

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

more_horiz
thanks

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

more_horiz
شكرا على المرور و آمل أن يفيدكم الكود ^^

[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 2 866468155


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

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

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

more_horiz
عاشت الايادي

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

more_horiz
الف الف الف شكر 
تسلمين على الكود الراااائع جداً

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

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

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

more_horiz
تسلم ايديك موضع مفيد جدا

لاصحاب أحلي منتدي..


[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 2 Rt69sr10
[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى - صفحة 2 Untitl17
W W W . T H E B 3 S T . C O M
 
 KonuEtiketleri عنوان الموضوع
[ JavaScript + CSS + HTML ] كود سلايد شو أحلى منتدى
 Konu Linki رابط الموضوع
 Konu BBCode BBCode
 Konu HTML Kodu HTML code
privacy_tip صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى