تنسيق صندوق الإقتباس بــ 4 أشكال إحترافية لمدونة بلوجر

تنسيق صندوق الإقتباس بــ 4 أشكال إحترافية لمدونة بلوجر

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

أسعد الله أوقاتكم بكل خير أحبابي في الله وأهلا ومرحبا بكم مجددا على مدونتكم العربي ويب

 في تدوينة اليوم وكما عودناكم سنتعرف على كيفية تنسيق صندوق الإقتباس الإفترادي وجعله أكثر أناقة بــ 4 أشكال رائعة جدا لعرض الأكواد تزيد من جمالية مدونتك بخطوات بسيطة

لن أطيل عليكم وأترككم مع الشرح

خطوات تنسيق صندوق الإقتباس فى مدونتك

تابع معي ...

أولا - توجه الى لوحة تحكم مدونتك  من هنا 

2 - قالب (المظهر) >> تحرير Html >>

3 - إبحث عن الوسم التالي بالضغط على Ctrl + F

]]></b:skin>

6 - أضف فوقه الشكل الذي يناسبك من أكواد Css التالية
الشكل الأول

كود Css

/** Style Css blockquote By:http://el3araby-web.blogspot.com/ **/.post blockquote {position: relative;z-index: 50;background: #03162F url(#) no-repeat top left;border: 1px solid #999;color: #FDFBFB;display: block;margin: 10px 0 10px;padding: 20px 15px 17px;overflow: auto;max-height: 250px;font: normal 14px arial;line-height: 27px;background-size: 20%;}

الشكل الثاني

كود Css

/** Style Css blockquote By:http://el3araby-web.blogspot.com/ **/
.post blockquote {
        background: rgb(24, 29, 33) !important;
        border-radius: 4px !important;
        border: 1px solid rgb(222, 222, 227) !important;
        box-sizing: border-box;
        clear: both !important;
        color: #fff !important;
        direction: ltr !important;
        font-size: 12px !important;
        font-stretch: normal !important;
        line-height: 1.6em !important;
    margin-bottom: 22px;
     padding: 11px !important;
    max-height: 400px !important;
        outline: 0px;
        overflow-x: auto !important;
        padding: 0px 10px 10px !important;
        position: relative !important;
        quotes: "" "";
        text-align: left !important;
        vertical-align: baseline;
    }
    .post blockquote:before {
        content: "\f10d";
        font-size: 20px;
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        padding: 8px !important;
        color: #717070;
        float: right;
    }

الشكل التالث

كود Css

/** Style Css blockquote By:http://el3araby-web.blogspot.com/ **/
#code,.post blockquote  {
margin: 15px auto;
width: 80%;
max-height: 150px;
background: #fff;
color: #888;
font-size: 15px;
overflow: auto;
padding: 19px 19px 17px;
border: 1px solid #d8dde1;
border-left: 10px solid #2A4057;
white-space: nowrap;
border-radius: 4px;
direction: ltr;
margin-top: 10px;
text-align: left !important;
}
#HTML131 h2.title {
    display: none;
}

الشكل الرابع

كود Css

/** Style Css blockquote By:http://el3araby-web.blogspot.com/ **/
.post blockquote {
position: relative;
z-index: 50;
background: #f9f9f9 url() no-repeat top left;
border: 1px solid #999;
color: #222;
display: block;
margin: 10px 0 10px;
padding: 20px 15px 17px;
overflow: auto;
max-height: 250px;
font: normal 14px tahoma;
line-height: 27px;
background-size: 20%;
}

وأخيرا قم بحفظ المظهر وتوجه لمدونتك لمشاهدة النتيجة

تم بحمد الله ...

أي أسئلة أو إستفسار حول الموضوع لا تتردد في طرحها

باب التعليقات مفتوح للجميع

لا تنسى مشاركة التدوينة مع الأصدقاء عبر مواقع التواصل ليستفيد الجميع

إدعمنا لكي نستمر في تقديم المزيد