• ≡ قائمة
  • الصفحة الرئيسية
  • المدونة
  • من نحن
  • قائمة منسدلة
    • قائمة 1
    • قائمة 2
    • قائمة 3
    • قائمة 4
    • قائمة 5
  • قائمة منسدلة
    • قائمة 1
    • قائمة 2
    • قائمة 3
    • قائمة 4
    • قائمة 5
  • قائمة منسدلة
    • قائمة 1
    • قائمة 2
    • قائمة 3
    • قائمة 4
    • قائمة 5

0000000000

  • الصفحة الرئيسية
  • بلوجر
    • بلوجر
    • Css
    • Seo
    • مقالات
    • معلومات
    • سلايدر شو
    • دروس بلوجر
    • اضافات بلوجر
    • نصائح للمدونين
  • قوالبنا
    • قوالب بلوجر
    • قوالب خارجية
  • ربح المال
    • الربح من بلوجر
    • الربح من الانترنت
  • دورات
    • دورة بلوجر 2015
    • دورة العمل عبر الانترنت
  • أدوات
    • الوان فلات
    • عداد الحروف
    • محول الاكواد
    • اداة اكواد الالوان
    • مكتبة اكوادالالوان
    • فوتوشوب Photoshop
    • معرفة Id حسابات الفيس بوك
  • المزيد
    • ألعاب فيسبوك
    • الويندوز
    • إنترنت
    • الألعاب
    • الهواتف
    • المجانيات
    • الأخبار
    • ترفيه
    • الأخبار
  • خدماتنا
    • ركن الاسئلة
    • التنادل الإعلاني
    • خدماتي على خمسات
  • حملة شاركنا لندعمك
  • موضوع عشوائي
اضافات بلوجر نصائح للمدونين CSS تغيير شكل صناديق الإقتباس إلى اشكال احترافية

تغيير شكل صناديق الإقتباس إلى اشكال احترافية

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

تغيير شكل صناديق الإقتباس إلى اشكال احترافية - صندوق الإقتباس او Blockquote يعتبر من اهم اضافات بلوجر و خصيصا للمواقع او المدونات المهتمة بتطوير و تصميم المواقع او منصات بلوجر لأنهم يكتبون الكثير من الاكواد داخل المواضيع مثل مدون محترف :) كما أنه في درس سابق تعرفنا على طريقة تزيين كتابة الاكواد في بلوجرالان لنكمل الشرح و نعرف كيفية تركيب الإضافة

الشرح


  1. ادخل لوحة تحكم المدونة
  2. انقر على قالب >> تحرير HTML
  3. ابحث عن الوسم ]]> و اضف الكود التالي فوقه

/* CSS Simple Pre Code */
pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}

pre.code label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}

pre::after {
    content: "اضغط مرتين لنسخ الكود";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #0288d1;
}

pre.code-html code {
    color: #558b2f;
}

pre.code-javascript code {
    color: #f57c00;
}

pre.code-jquery code {
    color: #78909c;
}


الان ابحث عن الوسم و اضف الكود التالي فوقه

وظيفة كود السكربت السابق و هو عند الضغط مرتين في صندوق الإقتباس يقوم بتحديد الكود كله
الان قم بحفظ القالب

لكيفية كتابة الاكواد داخل المواضيع

نذهب من وضع تأليف إلى وضع HTML و نضع احد الاكواد التالية مع تغيير ما هو باللون الاحمر بالكود المراد كتابته
... Code HTML  ...


... Code CSS ...


... Code JavaScript ...


... Code jQuery ...


معاينة

ايضا يمكنك تغيير الوان صناديق الإقتباس عبر إضاقة الكود التالي بدل كود الـ CSS السابق
/* CSS Simple Pre Code */
pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    content: "اضغط مرتين لنسخ الكود";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
}


معاينة

هذا كل شيء اي سؤال او استفسار لا تترد بوضعه في تعليق


Unknown
اضف تعليق
اضافات بلوجر, نصائح للمدونين, CSS
الأحد، 12 أبريل 2015
  • غرد
  • شارك
  • شارك
  • شارك
  • شارك

عن الكاتب مدون محترف

إسمي شرف ملقب بي فيدي عمري حوالي 28 سنة مدون مغربي مهووس بجديد تكنولوجيا المعلوميات مهتم بالحماية المعلوماتية يمكنك متابعتي من خلال الفيسبوك أو. تويتر.أو. جوجل بلس

مقالات قد تهمك

تعليقات
0 تعليقات

يتم التشغيل بواسطة Blogger.

المشاركات الشائعة

  • كيفية تحسين جودة الصور على مدونات بلوجر
    كنت قد لاحظت أنه في بعض الأحيان جودة الصور قد تكون خطر على المدونة .و بشكل افتراضي عند تحميل الصور إلى مشاركاتك، على منصة بلوجر تقوم بتقليل ...
  • افضل المواقع لتحميل قوالب ووردبريس
    ووردبريس هي من المنصات الجميلة و تعتبر ثاني افضل المنصات الاكثر استخداما و تعتبر الخيار الثاني لكل مدون لذلك اليوم في مدون محترف اقدم لكم مج...
  • افضل ادوات سيو المجانية
    اليوم في مدون محترف سوف نناقش عن افضل 25 اداة سيو لقد تم إجراء العديد من التغييرات في عالم سيو. و قد أثرت جوجل باندا، البطريق الطائر الطنان ...
  • زيادة ارباح ادسنس من خلال الإعلانات
    منذ عام تقريبا اطلقت جوجل ادسنس الوحدات الاعلانية المستجيبة لمدونات بلوجر و المواقع المتوافقة مع جميع الشاشات. سابقا كانت الإعلانات متزامنة ...
  • تم فتح باب التصميم المجاني
    السلام عليكم ورحمة الله وبركاته الدرس: هذا ليس درسا كباقي الدروس ولكن هو هدية من المدونة إلى متابعيها فاليوم احبائي اتيت لكم بمفاجئة وهي الت...
  • أبل تعلن رسميا هاتفها الجديد Iphone 6
    قامت شركة العالمية ابل بي الافصاح عن منتجها الجديد الذي جاء بي عدة مميزات الاكشفها مع شباب التقنية  الآيفون القادم بحجمين مختلفين         ip...
  • تحميل windows xp darklite
    السلام عليكم ورحمة الله وبركاته الدرس: سأقدم لكم أفظل نسخة إستعملتها من windows xp وهي   dark lite فهي تتميز  بالخفة و التيمات الجميلة. قمت ...
  • الربح من بلوجر عن طريق موقع xtendadvert
    ربح المال من بلوجر كما تعلم له طرق عديدة , واليوم اشارك معكم إحدى هذه الطرق الفعالة هذا الموقع هو احد المواقع التي يضع اعلانات في مدونتك او...
  • اضافة زر الصعود إلى أعلى على شكل صاروخ
    اضافة زر الصعود إلى أعلى على شكل صاروخ - في الموضوع السابق لقد قمنا بمشاركة اضافة سهم الصعود إلى بداية صفحة المدونة على بلوجر و هو بمثابة ...
  • شرح تحويل صور الإنفوجرافيك إلى فيديو
    الانفوجرافيك هي شكل ممتاز لتقديم نتائج دراسة، إنشاء دليل، تفاصيل المنتج، وشرح المفاهيم وتقريبا كل ما يتبادر إلى الذهن. التأثير البصري لهذا ا...

البحث في التصنيفات

Copyright 0000000000 2014-2015
تعريب و تطوير : Charaf fidi