اذا حبيت تغير الاقتباس من بعض الخدمات الغير مناسب
قم البحث عن
blockquote{
احذف هذا الكود
blockquote{
font-style:italic;
padding:10px;
margin:0;
border-left:4px solid $(main.color)
}
وهذا الكود
blockquote{
position:relative;
background-color:rgba(155,155,155,0.05);
}
وهذي الماشرات باكوادها حذف
blockquote:before
blockquote:after
والبحث عن
</style>
في الاعلى لكود ضع
.post-body blockquote {
padding:10px 12px;
border:1px dashed #999;
background-color:#f5f5f5;
direction: rtl;
text-align: right;
max-height:200px;
overflow-y:auto;
line-height:1.8;
border-radius:4px;
}
.post-body blockquote p {
margin: 0;
padding: 0 0 10px;
}
.post-body blockquote p:last-child {
padding-bottom: 0;
}
اقتباس مرتب
فيه سكرول ذكي
مناسب للجوال
متوافق مع قالبك 100%
.post-body blockquote {
padding:12px 15px;
border:1px dashed #999;
background-color:#f5f5f5;
direction: rtl; /* للنص العربي، لو إنجليزي غيّر لـ ltr */
text-align: right; /* لمحاذاة النص */
max-height:200px; /* ارتفاع أقصى */
overflow-y:auto; /* يظهر السكرول فقط عند الحاجة */
line-height:1.8; /* مسافات مريحة بين الأسطر */
border-radius:5px; /* حواف دائرية خفيفة */
box-sizing:border-box;
word-wrap: break-word; /* تكسير الكلمات الطويلة */
}
/* تنسيق الفقرات داخل الاقتباس */
.post-body blockquote p {
margin: 0;
padding: 0 0 10px;
}
/* إزالة المسافة الأخيرة */
.post-body blockquote p:last-child {
padding-bottom: 0;
}
/* إضافة خط جانبي خفيف لمسة جمالية */
.post-body blockquote {
border-left:4px solid #14a077;
}
/* تجاوب مع الجوال */
@media (max-width:768px){
.post-body blockquote {
padding:10px;
font-size:14px;
max-height:150px;
}
}
المطور بالصوره لخلفه
.post-body blockquote {
padding:10px 12px;
border:1px dashed #999;
background-image: url('https://example.com/your-image.jpg'); /* ضع رابط الصورة هنا */
background-size: cover; /* تغطي كامل مساحة الاقتباس */
background-position: center; /* تركز الصورة */
color: #fff; /* نص أبيض ليظهر على الصورة */
text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* تحسين وضوح النص */
direction: rtl;
text-align: right;
max-height:200px;
overflow-y:auto;
line-height:1.8;
border-radius:4px;
box-sizing: border-box;
}
/* تنسيق الفقرات داخل الاقتباس */
.post-body blockquote p {
margin: 0;
padding: 0 0 10px;
}
/* إزالة المسافة الأخيرة */
.post-body blockquote p:last-child {
padding-bottom: 0;
}
***** البرمجه في زر نسخ
1️⃣ HTML داخل التدوينة
في التدوينة ضع الاقتباس هكذا:
<blockquote class="custom-quote">
<p>هنا نص الاقتباس الذي تريد عرضه.</p>
<button class="copy-quote">نسخ المحتوى</button>
</blockquote>
2️⃣ CSS لتنسيق الاقتباس + الخلفية + الزر
.post-body blockquote.custom-quote {
position: relative;
padding:15px 20px;
background-color:#f0f8ff; /* غيّر اللون حسب القالب */
border-left:5px solid #14a077; /* خط جانبي */
border-radius:6px;
max-height:200px;
overflow-y:auto;
line-height:1.8;
direction: rtl;
text-align: right;
margin:15px 0;
box-sizing:border-box;
}
/* فقرات داخل الاقتباس */
.post-body blockquote.custom-quote p {
margin:0 0 10px 0;
}
/* زر نسخ */
.post-body blockquote.custom-quote .copy-quote {
position: absolute;
top:10px;
right:10px;
padding:5px 10px;
font-size:12px;
cursor:pointer;
background-color:#14a077;
color:#fff;
border:none;
border-radius:3px;
}
/* تغييرات على الجوال */
@media (max-width:768px){
.post-body blockquote.custom-quote {
padding:12px;
max-height:150px;
}
.post-body blockquote.custom-quote .copy-quote {
font-size:10px;
padding:4px 8px;
}
}
3️⃣ JavaScript لنسخ المحتوى
ضعه قبل نهاية </body> أو في HTML/JavaScript gadget:
<script>
document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('.copy-quote');
buttons.forEach(btn => {
btn.addEventListener('click', function() {
const text = this.parentElement.querySelector('p').innerText;
navigator.clipboard.writeText(text).then(() => {
alert('تم نسخ الاقتباس!');
});
});
});
});
</script>
✅ النتيجة:
صندوق اقتباس مرتب وجميل
خلفية للقالب أو أي لون تختاره
زر نسخ المحتوى يعمل فورًا
متجاوب للجوال
0 comments :
إرسال تعليق