إنشاء مكتبة للكتب HTML-CSS

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

أو حتى هناك من لديهم كتب يبيعونها بالتسويق بالعمولة لكن لا يوجد طريقة عرض مناسبة 

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

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


إنشاء مكتبة للكتب HTML-CSS

الصق هذا الكود في صفحة أو موضوع

<style>

#cnmu-books{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:50px 30px;padding:0 0 0 10px;box-sizing:border-box;}

#cnmu-books a.books{text-decoration:none;color:#fff;position:relative;background-color:#fff;padding:0!important;margin:0!important;border:1px solid #eee;box-shadow:-2px 2px #ddd,-4px 4px #bbb,-6px 6px #ccc,-8px 8px 1px #999;height:320px;overflow:hidden;}

#cnmu-books .books > *{position:absolute;top:0;width:100%;height:100%;box-sizing:border-box;}

#cnmu-books .books img{object-fit:cover;right:0;}

#cnmu-books .book-info{background-color:#333;right:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:5px 10px;transition:all .4s;gap:10px;transform:rotateY(90deg);text-align:center;}

.book-info strong{font-size:120%;}

.book-info p{font-size:90%;opacity:.8;}

#cnmu-books .books:hover .book-info{transform:rotateY(0);}

@media screen and (max-width : 500px) {#cnmu-books {max-width: 250px;margin: 0 auto;} }

</style>


<div id="cnmu-books">

  

<!--Book-->

<a class="books" href="#" target="_blank">

 <img src="*" />

 <div class="book-info">

   <strong>اسم الكتاب</strong>

   <p>نص او وصف</p>

   <b>كلمة بخط سميك</b>

   </div>

</a>

<!--Book-->


</div>


شرح الإستخدام

كرر من بداية كلمة <!--Book--> الى الكلمة المشابهة لها لتحصل على كتاب جديد
رمز # برابط تحميل الكتاب او موقع الكتاب او حتى رابط شراء
رمز * استبدله بصورة الكتاب
عدل الكلمات العربية بما تريد

معاينة

8تعليقات

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

  1. لقد طبتها بنجاح ، شكرا يا جميل الروح الشيخ عمرو الرائع
    صاحب القلب الطيب
    https://bibliothequesmounir48.blogspot.com

    ردحذف
    الردود
    1. على الرحب والسعة اخي الحبيب
      ويمكنك بعد هذا الكود display:grid;
      أن تضيف
      margin:20px auto;
      هذا سيجعل هناك مسافة بينها وبين العناصر التي قبلها وبعدها سيكون الشكل افضل عندك

      حذف
    2. نعم طبقتها والنتيجة صحيحة 100%
      بارك الله فيك شيخ

      حذف
    3. 👍
      وفيك بارك الله

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

    ردحذف
    الردود
    1. العفو أستاذ أحمد , تشرفت بمرورك الكريم 🌹

      حذف
  3. حضرتك بقالك فترة مبتردش على التعليقات مش قصدى حاجة اتمنى تكون بخير

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

      حذف