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

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

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

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

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

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

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

معاينة حية