احيانا يكون لدينا مجموعة كتب مفضلة نريد مشاركتها مع زوار مدوناتنا أو تكون المدونة نفسها قائمة على تقديم العديد من الكتب.
أو حتى هناك من لديهم كتب يبيعونها بالتسويق بالعمولة لكن لا يوجد طريقة عرض مناسبة
والطريقة المتعارف عليها هي عبر قالب مكتبة وطبعا هذه القوالب تخص فقط مدونات الكتب التي لا يوجد فيها تدوين غير الكتب
لكن لو مدونتك هي مدونة للتدوين وتريد اضافة بعض الكتب فالحل في هذا الموضوع
الصق هذا الكود في صفحة أو موضوع
<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>
الجامع المسند الصحيح المختصر من أُمور رسول الله صلى الله عليه وسلّم وسننه وأيامه
تحميلصحيح الإمام مسلم بن الحجاج
شراءكتاب في المعلومات الأساسية التي يجب على المسلم معرفتها
تصفح مباشرالجامع المسند الصحيح المختصر من أُمور رسول الله صلى الله عليه وسلّم وسننه وأيامه
تحميلصحيح الإمام مسلم بن الحجاج
تحميلكتاب في المعلومات الأساسية التي يجب على المسلم معرفتها
تحميل
لقد طبتها بنجاح ، شكرا يا جميل الروح الشيخ عمرو الرائع
ردحذفصاحب القلب الطيب
https://bibliothequesmounir48.blogspot.com
على الرحب والسعة اخي الحبيب
حذفويمكنك بعد هذا الكود display:grid;
أن تضيف
margin:20px auto;
هذا سيجعل هناك مسافة بينها وبين العناصر التي قبلها وبعدها سيكون الشكل افضل عندك
نعم طبقتها والنتيجة صحيحة 100%
حذفبارك الله فيك شيخ
👍
حذفوفيك بارك الله
اضافة جميلة شكرا لحضرتك ♥
ردحذفالعفو أستاذ أحمد , تشرفت بمرورك الكريم 🌹
حذفحضرتك بقالك فترة مبتردش على التعليقات مش قصدى حاجة اتمنى تكون بخير
ردحذفمرحباً أخي الحبيب , الحمد لله انا بخير شكراً جزيلاً لك.
حذفأنا أقوم بالرد على التعليقات كلها أى تعليق عليه ردود ستجد تحت صورة الكاتب رمز ان ضغط عليه سيظهر الردود.