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

صندوق الاقتباس, بلوجر, شروحات بلوجر, Blogger

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

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

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

الكود 

.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNcO_wYDX9hejNMAK34tJwt6_7RBsbPi5i0_c1wlGj5aBBuM5DtG8hUYOtrTstgNynszMOXnRZXFyNeH5pwgWHrva9-A5qJ1GHdsZrG_rUbk2RZ7phs0PwrtNAEf0fjRheuydAS-4F5U0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-27ezHgowSt21qHWI-FegMGbUI2Rz4j5BY2YKdFZOvAP0q2k8KEFLwqvZ36ptFfYUv-YuGBd1VyS9HCLObtEJZ64vyvLfRkbbfJLCnbEHRZrYn1xGm4u-OskKSWfY870d9-wWnU78Otg/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>

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