[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 {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-left: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}
مصدر : CSS-Tricks


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



.tr_bq {
color: #333333;
border-right: 5px solid #0882e2;
border-radius: 3px;
padding: 10px 10px 10px 10px;
background: #f5f5f5;
margin: 20px 30px 5px 40px;
text-shadow: 1px 1px 1px #FFF;
}
إذا كان لدى أي أحد إستفسار أو واجهته أي مشكلة عند التركيب ، يُرجى كتابة ذلك في تعليق بالأسفل وسأعمل على الردّ عليه ومساعدته وحلّ المشكلة بإذن الله تعالى.
جميع الحقوق محفوظة © 2016 - مدونة فيصل الورشة