طريقة تجزئة الهيدر و جعله متحرك
4 مشترك
منتدى الدعم و المساعدة لأحلى المنتديات :: منتدى الدعم والمساعدة :: مشاكل في تنسيق مظهر أو تصميم أو صور أو الوان المنتدى :: أرشيف قسم "مشاكل في تنسيق مظهر المنتدى"
صفحة 1 من اصل 1
طريقة تجزئة الهيدر و جعله متحرك
السلام عليكم و رحمة الله و بركاته
أخباركم شباب ؟
كنت محتاج كود يقوم بتقسيم الهيدر لأكثر من صورة , مثلاً خلفية و اللوجو
لكني اريد اخلي اللوجو صور متغيرة مثلاً 3 صورة بتتالى
نفس نظام الإعلانات في احلى منتدى
مثال لموقع اللي محتاج شكل الكود مثله : https://www.chewy.com
و شكراً
ابوعلي البلقاوي يعجبه هذا الموضوع
رد: طريقة تجزئة الهيدر و جعله متحرك
وعليكم السلام ورحمة الله وبراكاته
هلا اخي @Fish Club
انا ركبت هيدر لما تضغط على السهم تتغير الصور
هل هو مناسب ام لا
هلا اخي @Fish Club
انا ركبت هيدر لما تضغط على السهم تتغير الصور
هل هو مناسب ام لا
عدل سابقا من قبل كونان2000 في الثلاثاء 11 أكتوبر 2022 - 17:49 عدل 1 مرات
ابوعلي البلقاوي و Fish Club يعجبهم هذا الموضوع
رد: طريقة تجزئة الهيدر و جعله متحرك
كونان2000 كتب:وعليكم السلام ورحمة الله وبراكاته
هلا اخي @Fish Club
انا ركبت هيدر لما تضغط على السهم تتغير الصور
هل هو مناسب ام لا
جميل كونان تسلم ايدك
لكن يا ريت تعديل بسيط بس
تحت الهيدر الصور المستخدمه الاعلانات عليها
فيا إما نخفي هذه الصور ، او اننا نخلي الاعلانات تحتها
ابوعلي البلقاوي يعجبه هذا الموضوع
رد: طريقة تجزئة الهيدر و جعله متحرك
ابوعلي البلقاوي كتب:
هل تم الحل اخي
لسه منتظر كونان يرسل الكود
ابوعلي البلقاوي يعجبه هذا الموضوع
رد: طريقة تجزئة الهيدر و جعله متحرك
والله اسف اخي عالتأخر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 يعجبه هذا الموضوع
رد: طريقة تجزئة الهيدر و جعله متحرك
كونان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 يعجبه هذا الموضوع
رد: طريقة تجزئة الهيدر و جعله متحرك
كونان2000 كتب:نعمFish Club كتب:سؤال الأول في التومبيلات صح
تمام انا جربته و شغال تمام
شكراً لك كونان
دمت بود
ابوعلي البلقاوي و كونان2000 يعجبهم هذا الموضوع
مواضيع مماثلة
» احتاج طريقة اضافة اعلان متحرك في المنتدي
» طلب طريقة وضع نص متحرك في بيانات العضو
» طريقة وضع فاصل متحرك بين المساهمة والتوقيع
» طريقة وضع شىء متحرك اسفل المنتدى فى كل الصفحات
» اريد طريقة لاضافة اعلان متحرك
» طلب طريقة وضع نص متحرك في بيانات العضو
» طريقة وضع فاصل متحرك بين المساهمة والتوقيع
» طريقة وضع شىء متحرك اسفل المنتدى فى كل الصفحات
» اريد طريقة لاضافة اعلان متحرك
منتدى الدعم و المساعدة لأحلى المنتديات :: منتدى الدعم والمساعدة :: مشاكل في تنسيق مظهر أو تصميم أو صور أو الوان المنتدى :: أرشيف قسم "مشاكل في تنسيق مظهر المنتدى"
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى