Global Data

data:blog.title Developer my Blog
data:blog.pageType item
data:blog.url https://devblogsme.blogspot.com/2013/07/blog-post_25.html
data:blog.homepageUrl https://devblogsme.blogspot.com/
data:blog.pageTitle Developer my Blog: شرح زر الإقتباس لتحديد نص معين أو كود في صندوق مخصص
data:blog.encoding UTF-8
data:blog.languageDirection ltr
data:blog.feedLinks
data:blog.enabledCommentProfileImages true
data:blog.blogId 4342262374491712998
data:blog.metaDescription
data:blog.canonicalHomepageUrl http://devblogsme.blogspot.com/
data:blog.plusone
data:blog.isMobileRequest false

Blog

data:feedLinks
data:olderPageUrl https://devblogsme.blogspot.com/2013/07/blog-post_29.html
data:olderPageTitle Older Post
data:newerPageUrl https://devblogsme.blogspot.com/2013/07/blog-post_89.html
data:newerPageTitle Newer Post
data:commentLabel comments
data:authorLabel Posted by
data:timestampLabel at
data:postLabelsLabel Labels:
data:backlinksLabel
data:numPosts 1

data:posts

data:post.dateHeader Tuesday, July 30, 2013
data:post.id 2222839733399438748
data:post.title شرح زر الإقتباس لتحديد نص معين أو كود في صندوق مخصص
data:post.body

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

ميني سوفت

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

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

ميني سوفت
الكود 
.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/AVvXsEjHU88eM3Q4AUZpad3Fpr_1o5GpzIL0ti2DVLSHDTVT8s6C6z9DNUAXsspzzN3w8Xm4SCaZRz_8Megr7iT98ZrMg-O5SNvB7idtSH1jPCHI2kCzd3T56aN68s87_RiiD0rtkjOexJpl-QA/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/AVvXsEhGR69QJbctGNz5NKynf2lD5I6jQEl3q1cPcGI_h76JxTAEWYcQiWZDVrP5VKOe7mlDyj78kY_4lCVWYOvuTzGKlT7DfHfPDNTKk0v8KK2s2suD6uJhssA2fBJqDhUBfrJbAVSylL3nAl0/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>

اترككم برعاية الله 
data:post.snippet شرح رز الإقتباس لتمييز النصوص و الأكواد السلام عليكم ورحمة الله وبركاته زر الأقتباس   هو الشكل الذي يكون بداخله كود أو جملة قابلة للنسخ وخصو...
data:post.author Rafat
data:post.authorAboutMe
data:post.authorProfileUrl https://www.blogger.com/profile/06073862446924648651
data:post.authorPhoto.url
data:post.url https://devblogsme.blogspot.com/2013/07/blog-post_25.html
data:post.timestamp 5:49 AM
data:post.allowComments true
data:post.numComments 0
data:post.embedCommentForm true
data:post.allowNewComments true
data:post.commentPagingRequired false
data:post.showBacklinks False
data:post.numBacklinks 0
data:post.addCommentUrl https://devblogsme.blogspot.com/2013/07/blog-post_25.html#comment-form
data:post.emailPostUrl
data:post.editUrl https://www.blogger.com/post-edit.g?blogID=4342262374491712998&postID=2222839733399438748&from=pencil
data:post.feedLinks
data:post.isFirstPost true
data:post.isDateStart true
data:post.includeAd False
data:post.createLinkLabel
data:post.createLinkUrl
data:post.commentSource 0
data:post.showThreadedComments
data:post.commentJso
data:post.commentMsgs
data:post.commentConfig
data:post.communityId 0
data:post.commentHtml
data:post.commentLabelFull No comments
data:post.noNewCommentsText
data:post.iframeCommentSrc
data:post.addCommentOnclick

data:post.labels

data:label.name blogger
data:label.url https://devblogsme.blogspot.com/search/label/blogger
data:label.isLast False
data:label.name شروحات بلوجر
data:label.url https://devblogsme.blogspot.com/search/label/%D8%B4%D8%B1%D9%88%D8%AD%D8%A7%D8%AA%20%D8%A8%D9%84%D9%88%D8%AC%D8%B1
data:label.isLast True

data:post.comments

Header

data:title Developer my Blog
data:description Developer My Blog Blogger
data:useImage true
data:imagePlacement REPLACE
data:mobile false
data:sourceUrl https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7uYZLkLKUs5PSMZKpe50x67DU4iR593_V6GeibF2YJlWGGDVVC9MHW2XZJ0J6gNkEu6SJ-ueI8vVnMmDoWnlWSHDcywcVk6dSZFNV-XMHsrnXwyMBFPoEfboXMk8iueJMwVxpdPwVl3c/s1600-r/magone-logo.png
data:backgroundPositionStyleStr left
data:height 30px;
data:width 162px;
data:widthStyleStr width: 162px;