24 نوفمبر 2014

مدون محترف اضافات بلوجر دروس بلوجر CSS طريقة تزيين كتابة الاكواد في بلوجر

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

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

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



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

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

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* 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;
}

ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script src='https://mudwnp.googlecode.com/svn/trunk/prism.js' type='text/javascript'/>

ايضا ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>

الان ايضا ابحث عن الوسم </body> و اضف الكود التالي فوقه
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>


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

عند كتابة موضوع جديد تنتقل إلى وضع HTML  و قم بوضع الاكواد التي تريدها مكان الكتابات التي باللون الاحمر
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> هنا توضع اكواد HTML </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> هنا توضع اكواد CSS </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> هنا توضع اكواد Javascript </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> هنا توضع اكواد JQuery </code></pre>

مع القليل من الخبرة في CSS يمكنك تنسيق الاضافة بشكل اكثر اي سؤال او استفسار لا تترد بوضعه في تعليق 
مواضيع ذات صلة
طريقة تزيين كتابة الاكواد في بلوجر
4 / 5
بواسطة

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

  1. غير معرف24 نوفمبر, 2014

    شكرا لك اخي =r

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

    ردحذف
    الردود
    1. مرورك الجميل اخي محمد انرت المدونة يا غالي
      و دائما تنير المواضيع بتعليقاتك المشجعة و دعمك للمدونة =r

      حذف
  3. تسلم ايدك ي يا كبير بس لو تعمل شرح ازاي بتعمل زر معاينة بالشكل الجميل دا تبقى عملت واجب كبير

    ردحذف
    الردود
    1. اهلا اخي الغالي عرب مصر يوجد شروحات في المدونة لعمل ازرار معاينة

      تفضل

      الشرح الاول : http://mudwnp.blogspot.com/2014/11/simple-button-demo-and-download.html

      الشرح الثاني : http://mudwnp.blogspot.com/2014/07/create-dim-effect-button-using-box.html

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

      حذف
  4. الردود
    1. مرورك الرائع اخي الكريم انرت المدونة

      =r

      حذف
  5. أزال أحد مشرفي المدونة هذا التعليق.

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

      حذف
  6. غير معرف07 يوليو, 2015

    شكرا لك

    ردحذف
  7. موضوووع رائع اخي عملت كل شي بالخطوات بس الخطوة الاخييرة ماني فهمتها منيح فيك تشرحها اذا ممكن !!

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

      حذف
  8. السلام عليكم
    بارك الله في مجهودك.
    لقد علمنا منك الكثير .
    لاكن اذا تكرمت اريد عمل صندوق اكواد مثل الذي يوجد في تدويناتك هذه.
    شكراً لك

    ردحذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r