السلام عليكم ورحمة الله وبركاته
اليوم سأطرح لكم عدة تصاميم و أشكال مختلفه للـ إقتباس في بلوجر
في البداية طريقة التركيب
إذهب إلى تعديل القالب
ثم إبحث عن
]]></b:skin>
واكتب فوقه مباشرة
]]></b:skin>
واكتب فوقه مباشرة
الشكل الأول
الشكل الثاني
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote {
font-family: sans-serif;
direction: rtl;
text-align: right !important;
background: #1f253d;
position: relative;
display: block;
padding: 55px 20px 20px;
color: #fff;
border-radius: 3px;
}
blockquote:before {
position: absolute;
content: "iN4sser.com";
background: #7f828e;
position: absolute;
top: 0;
padding: 10px 10px 10px 10px;
left: 0;
right: 0;
color: #fff;
display: block;
margin: 0;
font-weight: 700;
text-indent: 15px;
border-radius: 3px 3px 0 0;
}
blockquote:after {
display: inline-block;
content: "\f121";
font-family: fontAwesome;
font-style: normal;
font-weight: normal;
font-size: 18px;
color: #fff;
top: 0;
left: 0;
padding: 9px 14px;
position: absolute;
}
الشكل الثاني
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote {
text-align: right;
direction: rtl;
background: #6591c2;
position: relative;
display: block;
padding: 55px 20px 20px;
color: #fff;
margin: 10px 0;
border-radius: 3px;
}
blockquote:before {
position: absolute;
content: 'iN4sser.com';
background: rgba(255,255,255,1);
right: 3px;
left: 3px;
top: 3px;
padding: 5px 20px;
display: block;
font-weight: 700;
border-radius: 3px 3px 0 0;
color: #6591c2;
}
blockquote:after {
position: absolute;
content: '\f027';
left: 10px;
bottom: 5px;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
font-size: 160%;
color: rgba(255,255,255,.6);
}
الشكل الثالث
إرسال تعليق
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).