انشاء منتدى مجانيطريقة تجزئة الهيدر و جعله متحرك
4 مشترك
منتدى الدعم و المساعدة لأحلى المنتديات :: منتدى الدعم والمساعدة :: مشاكل في تنسيق مظهر أو تصميم أو صور أو الوان المنتدى :: أرشيف قسم "مشاكل في تنسيق مظهر المنتدى"
صفحة 1 من اصل 1
طريقة تجزئة الهيدر و جعله متحرك
من طرف Fish Club الإثنين 10 أكتوبر 2022 - 17:54
السلام عليكم و رحمة الله و بركاته
أخباركم شباب ؟
كنت محتاج كود يقوم بتقسيم الهيدر لأكثر من صورة , مثلاً خلفية و اللوجو
لكني اريد اخلي اللوجو صور متغيرة مثلاً 3 صورة بتتالى
نفس نظام الإعلانات في احلى منتدى
مثال لموقع اللي محتاج شكل الكود مثله : https://www.chewy.com
و شكراً 
Fish Club-
-
عدد المساهمات : 65
معدل النشاط : 901
السُمعة : 1 -
ابوعلي البلقاوي يعجبه هذا الموضوع
رد: طريقة تجزئة الهيدر و جعله متحرك
من طرف كونان2000 الإثنين 10 أكتوبر 2022 - 19:59
وعليكم السلام ورحمة الله وبراكاته
هلا اخي @Fish Club
انا ركبت هيدر لما تضغط على السهم تتغير الصور
هل هو مناسب ام لا
هلا اخي @Fish Club
انا ركبت هيدر لما تضغط على السهم تتغير الصور
هل هو مناسب ام لا
عدل سابقا من قبل كونان2000 في الثلاثاء 11 أكتوبر 2022 - 17:49 عدل 1 مرات
كونان2000- احلى نائب
-
عدد المساهمات : 1775
معدل النشاط : 3688
السُمعة : 332 -
ابوعلي البلقاوي و Fish Club يعجبهم هذا الموضوع
رد: طريقة تجزئة الهيدر و جعله متحرك
من طرف Fish Club الإثنين 10 أكتوبر 2022 - 20:35
كونان2000 كتب:وعليكم السلام ورحمة الله وبراكاته
هلا اخي @Fish Club
انا ركبت هيدر لما تضغط على السهم تتغير الصور
هل هو مناسب ام لا
جميل كونان تسلم ايدك 
لكن يا ريت تعديل بسيط بس
تحت الهيدر الصور المستخدمه الاعلانات عليها
فيا إما نخفي هذه الصور ، او اننا نخلي الاعلانات تحتها
Fish Club-
-
عدد المساهمات : 65
معدل النشاط : 901
السُمعة : 1 -
ابوعلي البلقاوي يعجبه هذا الموضوع
كونان2000- احلى نائب
-
عدد المساهمات : 1775
معدل النشاط : 3688
السُمعة : 332 -
Fish Club يعجبه هذا الموضوع
Fish Club-
-
عدد المساهمات : 65
معدل النشاط : 901
السُمعة : 1 -
ابوعلي البلقاوي يعجبه هذا الموضوع
رد: طريقة تجزئة الهيدر و جعله متحرك
من طرف ابوعلي البلقاوي الثلاثاء 11 أكتوبر 2022 - 11:11
هل تم الحل اخي
ابوعلي البلقاوي- اشراف عام المساعدة
-
عدد المساهمات : 2435
معدل النشاط : 8519
السُمعة : 29 -
رد: طريقة تجزئة الهيدر و جعله متحرك
من طرف Fish Club الثلاثاء 11 أكتوبر 2022 - 11:33
ابوعلي البلقاوي كتب:
هل تم الحل اخي
لسه منتظر كونان يرسل الكود 
Fish Club-
-
عدد المساهمات : 65
معدل النشاط : 901
السُمعة : 1 -
ابوعلي البلقاوي يعجبه هذا الموضوع
رد: طريقة تجزئة الهيدر و جعله متحرك
من طرف كونان2000 الثلاثاء 11 أكتوبر 2022 - 17:31
والله اسف اخي عالتأخرFish Club كتب:هل تم الحل اخيلسه منتظر كونان يرسل الكود
انشغلت شويه (●ˇ∀ˇ●)
------
طريقة التركيب
ابحث في الهيدر عنالكود التالي
- الكود:
<div id="header-banner">
<div class="wrap">
<!-- BEGIN switch_desc -->
<h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>
<!-- END switch_desc -->
</div>
</div>
احذفه وضع مكانه التالي
- الكود:
<div id="header-banner">
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="https://2img.net/u/1915/13/16/66/avatars/2-77.jpg" style="height: 200px;width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" style="height: 200px;width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="https://2img.net/u/1811/68/54/94/avatars/223857-5.png" style="height: 200px;width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="https://2img.net/u/1811/68/54/94/avatars/12652-43.jpg" style="height: 200px;width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="https://2img.net/u/1811/68/54/94/avatars/151904-87.png" style="height: 200px;width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="https://2img.net/u/1811/68/54/94/avatars/2-98.jpg" style="height: 200px;width: 100%;">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
</div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("demo");
let captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
</div>
ثم ضع االتالي في الcss
- الكود:
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
.container {
position: relative;
}
.mySlides {
display: none;
}
.column {
display: flex;
float: right;
width: 16.66%;
justify-content: center;
}
.cursor {
cursor: pointer;
}
.row {
margin: auto !important;
}
.prev, .next {
background: rgba(0, 0, 0, 0.8);
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.prev {
right: 0;
border-radius: 3px 0 0 3px;
}
.next {
left: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.caption-container {
text-align: center;
background-color: #222;
padding: 0px;
color: white;
}
.container {
width: auto !important;
}
.container {
padding: inherit !important;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
كونان2000- احلى نائب
-
عدد المساهمات : 1775
معدل النشاط : 3688
السُمعة : 332 -
Fish Club يعجبه هذا الموضوع
رد: طريقة تجزئة الهيدر و جعله متحرك
من طرف Fish Club الثلاثاء 11 أكتوبر 2022 - 17:37
كونان2000 كتب:والله اسف اخي عالتأخرFish Club كتب:هل تم الحل اخيلسه منتظر كونان يرسل الكود
انشغلت شويه (●ˇ∀ˇ●)
------
طريقة التركيب
ابحث في الهيدر عنالكود التالي
- الكود:
<div id="header-banner">
<div class="wrap">
<!-- BEGIN switch_desc -->
<h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>
<!-- END switch_desc -->
</div>
</div>
احذفه وضع مكانه التالي
- الكود:
<div id="header-banner">
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<div class="container">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="https://2img.net/u/1915/13/16/66/avatars/2-77.jpg" style="height: 200px;width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" style="height: 200px;width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="https://2img.net/u/1811/68/54/94/avatars/223857-5.png" style="height: 200px;width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="https://2img.net/u/1811/68/54/94/avatars/12652-43.jpg" style="height: 200px;width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="https://2img.net/u/1811/68/54/94/avatars/151904-87.png" style="height: 200px;width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="https://2img.net/u/1811/68/54/94/avatars/2-98.jpg" style="height: 200px;width: 100%;">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
</div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("demo");
let captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
</div>
ثم ضع االتالي في الcss
- الكود:
body {
font-family: Arial;
margin: 0;
}
* {
box-sizing: border-box;
}
img {
vertical-align: middle;
}
.container {
position: relative;
}
.mySlides {
display: none;
}
.column {
display: flex;
float: right;
width: 16.66%;
justify-content: center;
}
.cursor {
cursor: pointer;
}
.row {
margin: auto !important;
}
.prev, .next {
background: rgba(0, 0, 0, 0.8);
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.prev {
right: 0;
border-radius: 3px 0 0 3px;
}
.next {
left: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.caption-container {
text-align: center;
background-color: #222;
padding: 0px;
color: white;
}
.container {
width: auto !important;
}
.container {
padding: inherit !important;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
ولا يهمك كونان ^^
سؤال الأول في التومبيلات صح
Fish Club-
-
عدد المساهمات : 65
معدل النشاط : 901
السُمعة : 1 -
رد: طريقة تجزئة الهيدر و جعله متحرك
من طرف كونان2000 الثلاثاء 11 أكتوبر 2022 - 17:46
نعمFish Club كتب:سؤال الأول في التومبيلات صح
كونان2000- احلى نائب
-
عدد المساهمات : 1775
معدل النشاط : 3688
السُمعة : 332 -
Fish Club يعجبه هذا الموضوع
رد: طريقة تجزئة الهيدر و جعله متحرك
من طرف Fish Club الثلاثاء 11 أكتوبر 2022 - 17:51
كونان2000 كتب:نعمFish Club كتب:سؤال الأول في التومبيلات صح
تمام انا جربته و شغال تمام
شكراً لك كونان
دمت بود
Fish Club-
-
عدد المساهمات : 65
معدل النشاط : 901
السُمعة : 1 -
ابوعلي البلقاوي و كونان2000 يعجبهم هذا الموضوع
رد: طريقة تجزئة الهيدر و جعله متحرك
من طرف العود السعودية الثلاثاء 11 أكتوبر 2022 - 18:37
يعطيك العاااافيه
العود السعودية-
-
عدد المساهمات : 159
معدل النشاط : 1142
السُمعة : 3 -
Fish Club يعجبه هذا الموضوع
مواضيع مماثلة» احتاج طريقة اضافة اعلان متحرك في المنتدي
» طلب طريقة وضع نص متحرك في بيانات العضو
» طريقة وضع فاصل متحرك بين المساهمة والتوقيع
» طريقة وضع شىء متحرك اسفل المنتدى فى كل الصفحات
» اريد طريقة لاضافة اعلان متحرك
» طلب طريقة وضع نص متحرك في بيانات العضو
» طريقة وضع فاصل متحرك بين المساهمة والتوقيع
» طريقة وضع شىء متحرك اسفل المنتدى فى كل الصفحات
» اريد طريقة لاضافة اعلان متحرك
منتدى الدعم و المساعدة لأحلى المنتديات :: منتدى الدعم والمساعدة :: مشاكل في تنسيق مظهر أو تصميم أو صور أو الوان المنتدى :: أرشيف قسم "مشاكل في تنسيق مظهر المنتدى"
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى