القائمة الرئيسية

الصفحات

[Blogger plugins] : ستايل رائع وبسيط لصندوق الإقتباس في بلوجر

[Blogger plugins] : ستايل رائع وبسيط لصندوق الإقتباس في بلوجر
عادة ما تُعرض فقرة الإقتباس في القوالب الإفتراضية لبلوجر في متصفحات "المعايير المتوافقة" بتأثير "علامة إقتباس كبيرة في البداية" ، وفي متصفّح إنترنت إكسبلورر تُعرض الإقتباسات بحدّ أيسر سميك وخلفية رمادية خفيفة.


وعلى عكس تقنيات الإقتباس الأخرى، هذا الاسلوب لا يتطلب إدخال عنصر مستوى الكتلة "block-level element"" على سبيل المثال : وسم <p> ، ولذلك، فإنه يتحوّل إلى فقرة داخل عنصر الصيغة المضمّنة inline-styled element للحفاظ على المحتوى من انخفاضه إلى ما دون الإقتباس.




 مثال للإضافة 


مثال لصندوق الإقتباس



طريقة تركيب إستايل صندوق الإقتباس:

1- من لوحة تحكم المدونه اختر قالب
2- اختر تحرير HTML
3- ابحث عن هذا الكود <b:skin><![CDATA[ وضع بعده الكود التالى




blockquote {
  background: #f9f9f9;
  border-right: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201D""\201C""\2018""\2019";
}
blockquote:before {
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-left: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}
مصدر : CSS-Tricks


ولإستخدام صندوق الإقتباس الجديد، ليس عليك سوى تضليل النص المُراد وضعه في صندوق الإقتباس والضغط على أيقونة "إقتباس" الموجودة في محرّر بلوجر بجانب أيقونة "قائمة تعداد نقطي".
للراغبين بالحصول على كود صندوق الإقتباس الخاص بمدونتي "الظاهر أعلاه" .. فهو كالتالي:



.post-body blockquote {color: #000;font-size: 100%;background-color: #efefef;border-$endSide: none;padding: 20px;margin: 20px 0;position: relative;text-align: $startSide;clear: both;font-size: 15px;border-radius: 5px;border: 1px solid #dbdbdb;}
.post-body blockquote:before,.post-body blockquote:after{vertical-align: middle;width: 22px;height: 22px;text-align: center;display: inline-block;margin-$endSide: 15px;margin-bottom: 0;content: "";background: url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' data-prefix='far' data-icon='quote-$startSide' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23777' d='M200 32H72C32.3 32 0 64.3 0 104v112c0 39.7 32.3 72 72 72h56v8c0 22.1-17.9 40-40 40h-8c-26.5 0-48 21.5-48 48v48c0 26.5 21.5 48 48 48h8c101.5 0 184-82.5 184-184V104c0-39.7-32.3-72-72-72zm24 264c0 75-61 136-136 136h-8v-48h8c48.5 0 88-39.5 88-88v-56H72c-13.2 0-24-10.8-24-24V104c0-13.2 10.8-24 24-24h128c13.2 0 24 10.8 24 24v192zM504 32H376c-39.7 0-72 32.3-72 72v112c0 39.7 32.3 72 72 72h56v8c0 22.1-17.9 40-40 40h-8c-26.5 0-48 21.5-48 48v48c0 26.5 21.5 48 48 48h8c101.5 0 184-82.5 184-184V104c0-39.7-32.3-72-72-72zm24 264c0 75-61 136-136 136h-8v-48h8c48.5 0 88-39.5 88-88v-56H376c-13.2 0-24-10.8-24-24V104c0-13.2 10.8-24 24-24h128c13.2 0 24 10.8 24 24v192z' %3E%3C/path%3E%3C/svg%3E") center no-repeat;}
.post-body blockquote:after {margin-$endSide: 0;margin-$startSide: 15px;}
إذا كان لدى أي أحد إستفسار أو واجهته أي مشكلة عند التركيب ، يُرجى كتابة ذلك في تعليق بالأسفل وسأعمل على الردّ عليه ومساعدته وحلّ المشكلة بإذن الله تعالى.

تعليقات