مساحة إعلانية

الاثنين، 4 فبراير، 2013

الاثنين، 4 فبراير، 2013

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

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

 لذا ليتم إعطاء شكل مميز يجب ان يتم تنسيق شكل صندوق اللإقتباس وهذه خمس نماذج لتختار منها ما يناسب مدونتك 
 طريقة الإضافة قم بالدخول لتحرير القالب وإبحث عن .post blockquote وإحذف الكود الخاص به باكمله ملوحظة لتحديد الكود بأكمله بداية الكود يحتوي قوس ونهايته يحتوي قوس مثال
.post blockquote {
overflow:auto;
}
لذا للحذف يجب ان تحدد الكود من بداية الكلمة الى نهاية قوس الإغلاق وطبعا عليك أن تحتفظ بنسخة إحتياطة من القالب تجنبا للمشاكل
ثم أضف مكان ما حذفته كود النموذج الذي يعجبك
أما إن لم تجد أساسا الكود في قالبك فقم بإضافة كود النموذج فوق الوسم ]]></b:skin>

الشكل الأول


 .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 إن زادت الكلمات عن هذا الإرتفاع يظل الكود بهذا الإرتفاع ويظهر شريط التمرير يمكنك زيادة الإرتفاع بزيادة الرقم
أما إن أردت ان يظهر الكود بدون شريط تمرير فإحذف الكود ذو اللون الأحمر من النموذج الذي تستخدمه
دمتم بكل ود

هناك 12 تعليقًا:

  1. موضوع جميل واستفدت منه كثير

    ردحذف
  2. هلا بك أخي صلاح ويسعدني ان الموضوع نال إعجابك
    تحياتي

    ردحذف
  3. شكراا على الرد على الطلب ،، موضوع جد مهم وجميل .

    ردحذف
  4. الشكر لله
    وموفق بإذن الله في إضافة الكود
    وتشرفت بمرورك

    ردحذف
  5. والله مميز ياغالى تسلم ايدك
    وفعلا انت انسان مبدع
    ربنا يوفقك

    ردحذف
  6. مشكور اخي
    ولا تحرمنا من جديد مواضيعك المميزة

    ردحذف
    الردود
    1. سررت بمرورك العطر
      تحياتي

      حذف
  7. شكرا اخى على الاضافة الجميله بارك الله فيك

    ردحذف
  8. لو سمحت انا عايز الاقتباس الخاص بك =s

    ردحذف
    الردود
    1. تفضل
      .post blockquote:before {
      background: url("https://lh6.googleusercontent.com/-o21bsEOelAg/UxPihCR6zMI/AAAAAAAADfA/DxMGdc0seoo/s172/16x16.png") no-repeat scroll 99% -97px #000000;
      color: #FFFFFF;
      content: "اقتباس";
      display: block;
      font: bold 12px droid arabic kufi;
      height: 20px;
      margin: -15px -15px 5px;
      padding: 4px 30px 6px 0;
      text-align: right !important;
      }

      .post blockquote {
      background:#EFEFEF;
      border: 2px dotted #000000;
      box-shadow: 1px 1px 0 #000, 3px 3px 0 #fff, 4px 4px 0 #000, 6px 6px 0 #fff, 7px 7px 0 #000, 9px 9px 0 #fff, 10px 10px 0 #000;
      color: #404141;
      direction: ltr;
      font: 14px Arial;
      margin: 15px auto;
      max-height: 400px;
      overflow: auto;
      padding: 15px;
      text-align: left !important;
      width: 80%;
      }

      حذف
  9. كيف تستعمله في التدوينة اذا اردت وضع كود في الشرح ?

    ردحذف
    الردود
    1. حدد الكود ثم اضغط على ايقونة زر الإقتباس الموجوده في صندوق المواضيع وعند العرض ستظهر مباشرة

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©