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

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


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

يمكنك إستخدام الإضافة في صفحة او إضافة 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 يغير حجم وعدد البلوكات في السطر الواحد

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

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

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

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


معاينة حية

من نحن

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

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

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

المزيد

6تعليقات

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

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

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

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

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

      حذف
  3. جزاك الله الحسنى وزيادة حبيب قلبِ

    ردحذف
    الردود
    1. وجزاك الله بالمثل أخي الغالي 🌹❤️

      حذف