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

0000000000

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

طريقة تزيين كتابة الاكواد في بلوجر

طريقة تزيين كتابة الاكواد في بلوجر - هي من اهم الاضافات التي يجب ان تكون في كل مدونة بلوجر او موقع و ما يميز هذه الاضافة انه يمكنك وضع فوق كل كود ما هي طريقة عمله

 طريقة تزيين كتابة الاكواد في بلوجر - هي من اهم الاضافات التي يجب ان تكون في كل مدونة بلوجر او موقع و ما يميز هذه الاضافة انه يمكنك وضع فوق كل كود ما هي طريقة عمله مثل CSS , JavaScript ,jQuery ,HTML و بضغطة زر يمكن نسخ الكود يمكنك معاينة الاضافة عبر الرابط التالي عند النقر على رابط المعاينة سوف تجد فوق كلمة result اضغط عليها لتظهر المعاينة


معاينة

طريقة التركيب

  1. الان قم بالدخول إلى لوحة تحكم المدونة
  2. اختر قالب 
  3. ثم انقر فوق تحرير HTML

ابحث عن الوسم ]]> و اضف الكود التالي فوقه
/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'انقر مرتين لنسخ الكود';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}

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


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



كيفية الاستخدام

عند كتابة موضوع جديد تنتقل إلى وضع HTML  و قم بوضع الاكواد التي تريدها مكان الكتابات التي باللون الاحمر
 هنا توضع اكواد HTML 

 هنا توضع اكواد CSS 

 هنا توضع اكواد Javascript 

 هنا توضع اكواد JQuery 

مع القليل من الخبرة في CSS يمكنك تنسيق الاضافة بشكل اكثر اي سؤال او استفسار لا تترد بوضعه في تعليق 
Unknown
اضف تعليق
اضافات بلوجر, دروس بلوجر, CSS
الاثنين، 24 نوفمبر 2014
  • غرد
  • شارك
  • شارك
  • شارك
  • شارك

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

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

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

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

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

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

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

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

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