طلب كود

السلام عليكم احلي فريق

اريد كود صفحه html

يكون مثل هذه الصوره
محتاج الكود فقط وانا هعدل عليه
ان احط صور المواضيع هكذا واول ما العضو يدوس علي الصوره يحوله الي الموضوع الي اختاره
وشكرا مقدما

وعليكم السلام @mo essam
مارئيك بالكود الموجود في هذا المنتدى https://rami1.ahlamontada.com/

لما تضغط على الصورة يحولك الى موضوع

تفضل اخي عاين الكود:

اضغط هنا لمعاينة الكود

تقدر تاخد الاكواد من الموقع بالاعلى او تفضل مجموعه مع بعض

الكود:: <style>
* {box-sizing: border-box;}
.mcnabulsy {
position: relative;
width: 50%;
max-width: 300px;
}

.image {
display: block;
width: 100%;
height: auto;
}

.motacode {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}

.mcnabulsy:hover .motacode {
opacity: 1;
}
</style>

<div class="mcnabulsy">
<a href="#"><img src="https://i93.servimg.com/u/f93/15/47/21/99/39111.png" alt="Avatar" class="image"></a>
<div class="motacode">هنا وصف الصورة</div>
</div>

عند التكرار فقط كرر الكود التالي

الكود:: <div class="mcnabulsy">
<a href="#"><img src="https://i93.servimg.com/u/f93/15/47/21/99/39111.png" alt="Avatar" class="image"></a>
<div class="motacode">هنا وصف الصورة</div>
</div>

كونان2000 كتب:: وعليكم السلام @mo essam
مارئيك بالكود الموجود في هذا المنتدى https://rami1.ahlamontada.com/

لما تضغط على الصورة يحولك الى موضوع

وعليكم السلام

حلو بس عايز اكتر كم واحده

Mc nabulsy كتب:

تفضل اخي عاين الكود:

اضغط هنا لمعاينة الكود

تقدر تاخد الاكواد من الموقع بالاعلى او تفضل مجموعه مع بعض

الكود:: <style>
* {box-sizing: border-box;}
.mcnabulsy {
  position: relative;
  width: 50%;
  max-width: 300px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.motacode {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.mcnabulsy:hover .motacode {
  opacity: 1;
}
</style>

<div class="mcnabulsy">
  <a href="#"><img src="https://i93.servimg.com/u/f93/15/47/21/99/39111.png" alt="Avatar" class="image"></a>
  <div class="motacode">هنا وصف الصورة</div>
</div>

عند التكرار فقط كرر الكود التالي

الكود:: <div class="mcnabulsy">
<a href="#"><img src="https://i93.servimg.com/u/f93/15/47/21/99/39111.png" alt="Avatar" class="image"></a>
<div class="motacode">هنا وصف الصورة</div>
</div>

مشكور اخي علي المجهود بس انا عايزها كود واحد لانها لما بكرر الكود بينزلو تحت بعض ومش راضيين يتظبطو جمب بعض لو تقدر تساعدني يكون كود زي الصوره المرسله بالموضوع

هلا @mo essam
هل هذا يمشي الحال https://rami1.ahlamontada.com/

كونان2000 كتب:: هلا @mo essam
هل هذا يمشي الحال https://rami1.ahlamontada.com/

هلا اخي يمشي الحال وتسلم علي المجهود الرجاء ارسال الكود

اولا شي ضع التالي بالcss

الكود:: .forum-description {
float: right;
border: solid #f44336 2px;
display: inline-block;
padding: 10px;
background: #0c0b0b;
text-align: center;
}

.forum-wsf {
border: 0;
top: 11.6rem;
right: 0;
color: #dddfe4;
color: #FFF;
font-size: 14px;
z-index: 1;
margin: 5px auto;
background: #4caf50;
padding: 10px;
}

.two_forums {
margin: 10px -5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-content: space-between;
align-items: center;
justify-content: space-evenly;
}
.forum-section {
padding: 0 15px;
margin-bottom: 20px;
white-space: normal;
width: 24%;
margin: 5px 0 5px;
margin-top: 5px;
height: 300px;
padding: 0 !important;
}
.forum-content {
margin-right: 0 !important;
}

.forum-image {
font-size: 0;
}
.forum-image img {
width: 147px;
height: 170px;
}
.forum_name {
color: #FFF;
font-size: 14px;
z-index: 1;
margin: 3px auto;
background: rgba(105 114 156 / 80%);
padding: 10px;
}
.forum_name:hover {
background: #000;
}
@media (max-width: 750px) {
.forum-section {
width: 48%;
}
}

ثم ضع الكود التالي بالhtml

الكود:: <br />
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>

<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>

<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>

<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div><br />
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>

<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>

<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>

<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div><br />
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>

<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>

<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>

<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div>
<div class="forum-description">

<div class="forum-image">
      <a href="https://rami1.ahlamontada.com/t104-topic"><img src="https://2img.net/u/1915/13/16/66/avatars/1-2.jpg" /></a>
</div>

<div class="forum_name" style="">
      اكتب هنا اي شيء
</div><a href="888"></a>
<div class="forum-wsf">
      اكتب اي شيء هنا
</div>

</div><br />

وانت غير الصور والرابط لكل صورة كما تريد
clown

هل تم الحل اخي

@كونان2000
أريد نفس هذا الكود ولكن يعمل تلقائيا
النسخه الاخيره

أفندينا كتب:: @كونان2000
أريد نفس هذا الكود ولكن يعمل تلقائيا
النسخه الاخيره

اهلا بك اخي @أفندينا,
لا اظن ان هذه الاكواد تصلح انها تكون تلقائي

الاعلانات التلقائية لا تصلح للمنتديات المليانه اعضاء..

الاعلانات التلقائية تصلح لما يكون عندك موقع خالي من الاعضاء وخاص بالافلام والبرامج,

المنتديات تصلح للاعلانات اليدوية يتحكم بها المدير وحده
ولا يضع اعلان الا للمواضيع المهمة والحصرية فقط

اما التلقائيه تحط لك مواضيع قديمة وجديده وكل شيء ماله داعي.
وكل عضو يقدر يضع مساهمات ومواضيع
وبعض الاعضاء يفتحون مواضيع عبارة عن سؤال فقط
وهذا يعني ان لوحة الاعلانات تمتلئ بمواضيع وردود غير ضرورية

واحب اقول لك اني حذفت لوحة الشرف التلقائية من منتدى الدعم
لانها تتعطل لما ينشط المنتدى وتعمل فقط لما يكون المنتدى قليل النشاط,

فما بالك بالاعلانات التلقائية.. طبعا هيه راح تتعطل وراح تسببلك الكثير من المشاكل,

ولذلك انا اعتذر منك اخي افندينا
لن اعمل لوحة اعلانات تلقائية

لكن احاول ان شاء الله اعمل لكم بديل يعمل تلقائي بدون مشاكل
وليس اعلانات تلقائية

تحياتي
:باضحك بلطف:

أخي الكريم @كونان2000
أنا لا أريده لمنتدى عام و مكتظ بالاعضاء
فكما تعلم أنشأت مؤخرا منتدى خاص بالأفلام فقط
ولا يوجد به أي أعضاء و اعتقد إن هذا الكود يصلح معه
بحسب قولك

هلا اخي @أفندينا
لازم اشوف منتداك اول

ممكن تضع رابط منتداك

الاخ @كونان2000
https://mexaشt-aflam.yoo7.com/forum

هلا اخي @أفندينا
انا الان فهمت

يوجد بالفعل هذه الميزة بالمنتديات,
تعرف ميزة الصور التي تمت مشاركتها مؤخرًا؟
هي تعمل تلقائي وتضع اخر صور مع رابط الموضوع

------------------
ممكن نغير شكلها لتكون كما تريد
لكن كما قلت لك فتح المواضيع التي بها صور يكون خاص للمدير فقط,
اما الاعضاء يضعون رد لكن بدون صور كبيرة
حتى لا تمتلئ باعلانات غير ضرورية

@كونان2000
تمام أخي كونان هذا ما اقصده
يعني مثلا مثل هذا الموقع
https://myciiima.autos/

هلا @أفندينا

اوه انا ما عملت نفس الموقع
وضعت الوان من عندي طلب كود 1f622

شوف هذه https://anime.forumperso.com/images

@الغالي موجود
تمام قريبه جدا من المطلوب
بس لو تكون في هيئة بوابه
أو صفحة هتمل

mo essam كتب:: السلام عليكم احلي فريق

اريد كود صفحه html

يكون مثل هذه الصوره
محتاج الكود فقط وانا هعدل عليه
ان احط صور المواضيع هكذا واول ما العضو يدوس علي الصوره يحوله الي الموضوع الي اختاره
وشكرا مقدما

هذا استايل او الروابط حذف

>>> لوحة إدارة كامله خذف سهل يعني الاعداد اليمين

أفندينا كتب:: @الغالي موجود
تمام قريبه جدا من المطلوب
بس لو تكون في هيئة بوابه
أو صفحة هتمل

هلا اخي @أفندينا
عادي انت ضع اللوحة في الصفحة الرئيسية
واجعل الفئات والاقسام غير مرئية للزوار

هكذا الزوار يشاهدون لوحة اعلانات المواضيع فقط
ولا يشاهدون الاقسام

وهذا كود الcss للتحكم بالالوان والخلفيات

الكود:: .container-imgs-list .image_item, .container-imgs-list img{
   width: 250px!important;
   height: 250px!important;
}
div#imageList {
   background: #162f3a;
   margin-top: 0px !important;
}
.container-imgs-list .text_overlay {
  font-size: 15px;
   background: rgb(0 0 0);
   color: antiquewhite;

}
.container-imgs-list .image_item:hover .text_overlay {
   background: #03202e;
  padding-bottom: 20px;
}

#wrap > div.forum > div.forum-header:after {
   text-align: center;
   font-size: 30px;
   content: "لوحة الاعلانات";
}
#wrap > div.forum > div.forum-header {
   font-size: 0px;
}
#wrap > div.forum > div.forum-header i.material-icons, #page-desc, #wrap > div.page-header{
   display: none;
   font-size: 0;
}
#wrap > div.forum {
   border: solid #0f1b24 20px;
}

مر على الموضوع اسبوع تقريباً , هذه يعني ان الموضوع تم حلة او أهملت من صاحب المشكلة رجاء في حال كانت لديك المشكلة مستمر او اي استفسار اخر قم بفتح موضوع جديد سيتم غلق الموضوع & يرسل الى الأرشيف

يرجى مراجعة : قوانين منتدى الدعم

> من هنا لمراسلة الإدارة لوضع مواضيع الشروحات الجديدة و الأكواد للدراسة <
>> من هنا لمراسلة الإدارة بشكايات بخلاف طلبات كلمة السر او الشروحات <<

> لمراسلة الإدارة لطلب كلمة سر جديدة لمنتداك <