لغة القالب

إضافة بلوكات معلوماتية لبلوجر

Admin
الاثنين, نوفمبر 20, 2023

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


إضافة بلوكات معلوماتية لبلوجر

يمكنك إستخدام الإضافة في صفحة او إضافة HTML/JavaScript

<style>

#cnmu-blocks-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;}

.cnmu-blocks{display:grid;grid-template-columns:50px 1fr;grid-template-rows:50px 1fr 26px;background-color:#f8f8f8;padding:10px;border-radius:4px;border:1px solid #eee;box-sizing:border-box;gap:20px 10px;transition:box-shadow .4s;}

.cnmu-blocks:hover{box-shadow:0 0 6px #bbb;}

.cnmu-blocks i{grid-area:1/1/1/1;font-size:50px;text-align:center;color:#446FAA;}

.cnmu-blocks h5{grid-area:1/2/1/2;line-height:50px;font-size:25px;color:#446FAA;}

.cnmu-blocks p{grid-area:2/1/2/3;margin:0;padding:0;}

.cnmu-blocks a{grid-area:3/1/3/3;padding:0 12px!important;margin:0!important;text-decoration:none!important;background-color:#446faa;height:26px;font-size:90%;width:fit-content;color:#fff;border-radius:2px;transition:background-color .4s;}

.cnmu-blocks a:hover{background-color:#000;}

</style>


<div id="cnmu-blocks-container">


<!--Block-->

<div class="cnmu-blocks">

<i class="fa fa-info-circle"></i>

<h5>من نحن</h5>

<p>أكتب ما تريد</p>

<a href="#">المزيد</a>

</div>

<!--Block-->


</div>

شرح الكود

الرقم 300 يغير حجم وعدد البلوكات في السطر الواحد

كرر الكود من بداية الى نهاية الكودين بالأزرق للحصول على صندوق جديد

استبدل الكود الأحمر بالأيقونة المناسبة من مكتبة الأيقونات

طبعا استبدل الكلمات العربية بما تريد ورمز # في زر المزيد بالرابط المراد فتحه عند الضغط على الزر

هناك كود مكرر باللون الوردي هذا هو اللون المستخدم في الإضافة استبدله بلون مناسب لقالبك


معاينة حية

من نحن

كن مدون هو موقع متخصص في تطوير منصة بلوجر وتقديم جيدد الإضافات والدروس للمدونين

المزيد
خدماتنا

نقدم خدمات الصيانة والإصلاح والقوالب المدفوعة عبر موقعنا مركز بلوجر

المزيد

تعليقك يساهم في تطوير المحتوى ويزيد من الفائدة بمشاركتنا بأفكارك واقتراحاتك , رأيك يهمنا فساهم بتعليقاتك معنا
يرجى عدم وضع روابط خارجية في التعليقات لضمان نشرها

  1. السلام عليكم أستاذ
    أنت رائع كعادتــك
    ما شاء الله عليك
    وفقك الرحمن 🤲

    ردحذف
    الردود
    1. الله يرفع قدرك أخي منير , شكراً لك يا غالي على الدعم واللهم آمين واياكم

      حذف
  2. شكرا جدا لحضرتك مبدع كالعادة ♥

    ردحذف
    الردود
    1. حبيبي أخي احمد تسلم يا غالي , سررت كثيراً بمرورك

      حذف

عدد المواضيع