إضافة مكتبة كتب الى مدونات بلوجر

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

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

لكن هناك حل بسيط يمكنك عمله مع تلك الإضافة

وهي أن تصنع مكتبة من أكواد HTML , CSS تكون مناسبة لوضعها في موضوع واحد أو صفحة تضع بها أهم الكتب التي تريد

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


<style>
#books-lib{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:50px 30px;padding:0 0 0 10px;box-sizing:border-box;}
#books-lib a.books{text-decoration:none;color:#000 !important;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;}
#books-lib .books > *{position:absolute;top:0;width:100%;height:100%;box-sizing:border-box;}
#books-lib .books img{object-fit:cover;right:0;}
#books-lib .book-info{background-color:#fff;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;box-shadow:0 0 10px rgba(0,0,0,.5) inset;}
.book-info h5{font-size:120%;margin:0;padding:0;}
.book-info p{font-size:90%;opacity:.8;}
#books-lib .book-info b{background-color:#008ace;color:#fff;padding:5px 10px;border-radius:5px;}
#books-lib .book-info b:hover{background-color:#000;}
#books-lib .books:hover .book-info{transform:rotateY(0);}
@media screen and (max-width : 500px) {#books-lib {max-width: 250px;margin: 0 auto;} }
</style>



<div id="books-lib">


<!--Book-->

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

<img src="*" />

<div class="book-info">

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

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

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

 </div>

</a>

<!--Book-->


</div>

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

من وسم البداية [[]] الى وسم النهاية المماثل هو كود كتاب واحد

السطر الأول رمز # استبدله برابط الكتاب

رمز * في السطر الثاني صورة الكتاب

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

كرر كود الكتاب من وسم البداية الى وسم النهاية لتحصل على كتاب جديد

تعديل

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

المدون صحراوي منير22 مايو 2025 في 9:06 ص
إضافة عالية المستوى ورائعة جدا تستحق التجربة صراحة لكل المواقع التي تهتم بتنزيل الكتب وبيعها ونشرها ، هذه الإضافة قوية جدا
جزاك الله خيرا شيخنا
ردحذف
الردود