دليل الاشهار العربي افضل موقع عربي في الدعاية والاشهار وفهرسة المواقع والمنتديات في محركات البحث. تقنيات،تصميم،وخدمات أخرى
 
الرئيسيةالرئيسية  س .و .جس .و .ج  التسجيلالتسجيل  دخولدخول  
 

 صناديق عرض المواضيع المميزة بطريقة جديدة

اذهب الى الأسفل 
كاتب الموضوعرسالة
Mc nabulsy
 
 
Mc nabulsy

البلد : فلسطين
الجنس : ذكر
المساهمات : 3674
نقاط النشاط : 5769

صناديق عرض المواضيع المميزة بطريقة جديدة Empty
مُساهمةموضوع: صناديق عرض المواضيع المميزة بطريقة جديدة   صناديق عرض المواضيع المميزة بطريقة جديدة Emptyالأربعاء 10 يونيو 2020 - 17:07

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


اقدم لكم كود جديد وهو لعرض اكثر 3 مواضيع مميزة في المكان اللي تريده 
وهو عبارة عن كود يعرض 3 مواضيع بـ 3 صور مع وصف صغير مع كل موضوع وبعدها زر للانتقال للموضوع
ويمكنك وضعه اينما تريد في المواضيع او الاقسام او الرئيسية او الهيدر او الفوتر
صناديق عرض المواضيع المميزة بطريقة جديدة Separa10
معاينة الكود :
صناديق عرض المواضيع المميزة بطريقة جديدة 1117
https://i.servimg.com/u/f93/15/47/21/99/1117.png
صناديق عرض المواضيع المميزة بطريقة جديدة Separa10
تركيب الكود :


اولا توجه نحو لوحة الادارة - مظهر المنتدى - الوان - ورقة css
واضف الكود التالي

الكود:
.article-list{color:#313437;background-color:#fff}.article-list p{color:#7d8285}.article-list h2{font-weight:700;margin-bottom:40px;padding-top:40px;color:inherit}@media (max-width:767px){.article-list h2{margin-bottom:25px;padding-top:25px;font-size:24px}}.article-list .intro{font-size:16px;max-width:500px;margin:0 auto}.article-list .intro p{margin-bottom:0}.article-list .articles{padding-bottom:40px}.article-list .item{padding-top:50px;min-height:425px;text-align:center}.article-list .item .name{font-weight:700;font-size:16px;margin-top:20px;color:inherit}.article-list .item .description{font-size:14px;margin-top:15px;margin-bottom:0}.article-list .item .action{font-size:24px;width:24px;margin:22px auto 0;line-height:1;display:block;color:#4f86c3;opacity:.85;transition:opacity .2s;text-decoration:none}.article-list .item .action:hover{opacity:1}




ومن ثم توجه الى اينما اردت وضع الكود وضع الاكواد التالية مع التعديل عليها بما يلزم

الكود:

<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
    <!-- Start: Article List -->
    <div class="article-list">
        <div class="container">
            <!-- Start: Intro -->
            <div class="intro">
                <h2 class="text-center">مواضيع مهمه</h2>
            </div>
            <!-- End: Intro -->
            <!-- Start: Articles -->
            <div class="row articles">
                <div class="col-sm-6 col-md-4 item"><a href="#"><img class="img-fluid" src="https://i.servimg.com/u/f93/15/47/21/99/buildi10.jpg"></a>
                    <h3 class="name">عنوان الموضوع</h3>
                    <p class="description">هنا يمكنك وضع وصف للموضوع الخاص بك او الذي تريد الاعلان عنه ليجب الزائر للاطلاع</p><a class="action" href="#"><i class="fa fa-arrow-circle-right"></i></a></div>
                <div class="col-sm-6 col-md-4 item"><a href="#"><img class="img-fluid" src="https://i.servimg.com/u/f93/15/47/21/99/desk10.jpg"></a>
                    <h3 class="name">عنوان الموضوع</h3>
                    <p class="description">هنا يمكنك وضع وصف للموضوع الخاص بك او الذي تريد الاعلان عنه ليجب الزائر للاطلاع</p><a class="action" href="#"><i class="fa fa-arrow-circle-right"></i></a></div>
                <div class="col-sm-6 col-md-4 item"><a href="#"><img class="img-fluid" src="https://i.servimg.com/u/f93/15/47/21/99/loft10.jpg"></a>
                    <h3 class="name">عنوان الموضوع</h3>
                    <p class="description">هنا يمكنك وضع وصف للموضوع الخاص بك او الذي تريد الاعلان عنه ليجب الزائر للاطلاع</p><a class="action" href="#"><i class="fa fa-arrow-circle-right"></i></a></div>
         
 </div>
            <!-- End: Articles -->
        </div>
    </div>
    <!-- End: Article List -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
</html>




انتهى الشرح
صناديق عرض المواضيع المميزة بطريقة جديدة Separa10
الكود من شرح وانشاء : Mc Nabulsy 
جميع الحقوق محفوظة لـ دليل الاشهار العربي
يمنع النقل دون ذكر المصدر
والسلام ختام


توقيع : Mc nabulsy


شركة انكور التطويرية
لا اقوم بالرد والمساعدة على الخاص, اتابع معكم فقط  في الاقسام المخصصة في حال قدرتي على حل المشكلة
الرجوع الى أعلى الصفحة اذهب الى الأسفل
Oussama.Gfx
مشرف خدمات أصحاب المواقع

Oussama.Gfx

البلد : المغرب
الجنس : ذكر
المساهمات : 617
نقاط النشاط : 785

صناديق عرض المواضيع المميزة بطريقة جديدة Empty
مُساهمةموضوع: رد: صناديق عرض المواضيع المميزة بطريقة جديدة   صناديق عرض المواضيع المميزة بطريقة جديدة Emptyالإثنين 29 يونيو 2020 - 1:18

جميل جداً


توقيع : Oussama.Gfx


صناديق عرض المواضيع المميزة بطريقة جديدة Aiyo--12

منتديات دليل الإشهــــار العربي 
www.pubarab.com/forum

** منتديات جوبز التطويرية من هنا 
رابط التسجيل مباشرة  بالمنتدى من هنا
www.ghobz.rigala.net

صناديق عرض المواضيع المميزة بطريقة جديدة Vr7y9y10
الرجوع الى أعلى الصفحة اذهب الى الأسفل
الطائرالحر
 
 
الطائرالحر

البلد : فلسطين
الجنس : ذكر
المساهمات : 743
نقاط النشاط : 1018

صناديق عرض المواضيع المميزة بطريقة جديدة Empty
مُساهمةموضوع: رد: صناديق عرض المواضيع المميزة بطريقة جديدة   صناديق عرض المواضيع المميزة بطريقة جديدة Emptyالجمعة 24 يوليو 2020 - 22:42

جميل
ينقل للقسم المناسب  gg444g


الرجوع الى أعلى الصفحة اذهب الى الأسفل
 
صناديق عرض المواضيع المميزة بطريقة جديدة
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
دليل الإشهار العربي :: منتدى تطوير المواقع والمنتديات :: تطوير المواقع و المنتديات :: قسم تطوير المواقع والمنتديات-
انتقل الى:  
جميع الحقوق محفوظة لمنتدى دليل الإشهار العربي