خمس نماذج لصندوق الإقتباس إختر ما يناسبك

صندوق الإقتباس أو Blockquote أحد أهم أدوات كتابة وتنسيق المواضيع في منصة بلوجر خصوصا للمدونات التي تطرح أكواد أو شروحات تحتاج تمييز أجزاء معينة منها

 وهذا شكل زر الإقتباس في بلوجر

 لذا ليتم إعطاء شكل مميز يجب ان يتم تنسيق شكل صندوق اللإقتباس وهذه خمس نماذج لتختار منها ما يناسب مدونتك 

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

.post blockquote {
overflow:auto;

}

لذا للحذف يجب ان تحدد الكود من بداية الكلمة الى نهاية قوس الإغلاق وطبعا عليك أن تحتفظ بنسخة إحتياطة من القالب تجنبا للمشاكل

ثم أضف مكان ما حذفته كود النموذج الذي يعجبك

أما إن لم تجد أساسا الكود في قالبك فقم بإضافة كود النموذج فوق الوسم ]]>

الشكل الأول

 .post blockquote {
background: #F2F2F2;
    margin: 0 25px 15px;
    padding: 10px 20px 10px 15px;
        border: dotted 2px #D8D8D8;
overflow:auto;
max-height:250px;
-webkit-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
-moz-box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
box-shadow:
1px 1px 0 rgba(0, 0, 0, 0.100),
3px 3px 0 rgba(255, 255, 255, 1.0),
4px 4px 0 rgba(0, 0, 0, 0.125),
6px 6px 0 rgba(255, 255, 255, 1.0),
7px 7px 0 rgba(0, 0, 0, 0.150),
9px 9px 0 rgba(255, 255, 255, 1.0),
10px 10px 0 rgba(0, 0, 0, 0.175);
}

الشكل الثاني

.post blockquote {
overflow:auto;
max-height:250px;
border: 1px dashed #FFC600;
margin: 10px;
padding: 10px 10px 10px 60px;
background: #FFF8DD url(https://lh6.googleusercontent.com/-Ny881sz3L-o/UQ8ZYYtFzxI/AAAAAAAAAeQ/xrpyI6ekH88/s71/bq2.png) no-repeat;
background-position:20px 10px;}

ولتنسيقه #FFC600 هذا لون الإطار

#FFF8DD هذا لون الخلفية

وغير رابط الصورة بصورة بنفس المقاس وباللون الذي تختاره للخلفية

الشكل الثالث

.post blockquote {
position: relative;
z-index: 50;
background:#fff url(https://lh4.googleusercontent.com/-AZ3EY_MY_QU/UQ8ZYU-_hXI/AAAAAAAAAeM/iHwn4pfuEJ4/s36/bq3.gif) top left repeat;
border:1px solid #999;color:#000;
display:block;
font-family:"Courier New", Courier, monospace;font-size:13px;
line-height:18px;
margin:10px 0 10px;
padding:18px 10px 17px;
overflow:auto;
max-height:250px;
}

الشكل الرابع

.post blockquote {
    margin : 0 20px;
    padding: 10px 20px 25px 20px;
    background : #9FCFFF;
    color : #484848;
    border: 5px dashed #fff;
    }

#9FCFFF لون الخلفية

الشكل الخامس

.post blockquote {
overflow:auto;
max-height:250px;
background:#000;
color:#fff;
border-left:20px solid #969695;
border-radius:20px;
margin:10px;
padding:10px;
}

#000 لون الخلفية

#fff لون الخط

#969695 لو الإطار على اليسار

ملحوظة أخيرة بخصوص الكود المكرر في معظم الأكواد باللون الأحمر هذا الكود خاص بإرتفاع الإقتباس

وهو 250 إن زادت الكلمات عن هذا الإرتفاع يظل الكود بهذا الإرتفاع ويظهر شريط التمرير يمكنك زيادة الإرتفاع بزيادة الرقم

أما إن أردت ان يظهر الكود بدون شريط تمرير فإحذف الكود ذو اللون الأحمر من النموذج الذي تستخدمه

دمتم بكل ود