شرح زر الإقتباس لتحديد نص معين أو كود في صندوق مخصص

شرح رز الإقتباس لتمييز النصوص و الأكواد

السلام عليكم ورحمة الله وبركاته

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

أمثلة على صناديق الإقتباس

الكود 

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

ما ظلل بالاحمر هو لون الخلفية.. ما ظلل بالوردي لون الخط.. ما ظلل بالأخضر هو لون الشريط الأحمر الجانبي

الصندوق الثاني

الكود

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

ما ظلل بالأحمر هو لون الخلفية.. ما ظلل بالوردي هو لون الخط.. ما ظلل بالأخضر هو حدود الصندوق

الصندوق الثالث

الكود

.post blockquote {
position: relative;
z-index: 50;
background:#fff url(https://lh5.googleusercontent.com/-EGvde_np5Y8/Ufed-8s2IVI/AAAAAAAABMw/E5uqK5-pcwo/h120/bq3.gif) top left repeat;
border:1px solid #999;color:#000;
display:block;
font-family:'Droid Sans',DroidKufi-regular,DroidKufi-regular,sans-serif;font-size:13px;
line-height:18px;
margin:10px 0 10px;
padding:18px 10px 17px;
overflow:auto;
max-height:250px;
}

 ما ظلل بالأزرق هو صورة صغيرة وهي عبارة عن اللونين الاصفر والرصاصي.. ما ظلل بالوردي لون الخط

الصندوق الرابع

الكود

.post blockquote {

overflow:auto;

max-height:250px;

border: 1px dashed #51F84E;

margin: 10px;

padding: 10px 10px 10px 60px;

background: #D2FDD1 url(https://lh6.googleusercontent.com/-OEm7BQS_55I/Ufeb4tHEDhI/AAAAAAAABMg/jaz6KRiime8/h120/30-07-2013+12-52-35+%D9%85.png) no-repeat;

background-position:20px 10px;}

ما ظلل بالازرق هو رابط الصورة الصغيرة في الزاوية.. ما ظلل بالوردي لون حدود الصندوق.. ما ظلل بالاحمر لون الخلفية

الصندوق الخامس

الكود

 .post blockquote {
background: #E4F6F8;
    margin: 0 25px 15px;
    padding: 10px 20px 10px 15px;
        border: dotted 2px #51C4D5;
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

واحذف الكود بأكمله وقد تجده بهذا الشكل

.post blockquote{margin:1em 20px}
.post blockquote p{margin:.75em 0}

بعد حذفه أبحث عن هذا الكود

]]></b:skin>

 ثم ضع كود الصندوق فوقة مباشرتاً هكذا

.post blockquote {

    margin : 0 20px;

    padding: 10px 20px 25px 20px;

    background : #000000;

    color : #FFFFFF;

    border: 5px dashed #fff;

    }

]]></b:skin>

اترككم برعاية الله