4 0 4
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة الصفحة الرئيسية

الجمعة، 15 أبريل، 2016


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


تركيب الصناديق

اولا قم بأخذ نسخة احتياطية من قالب مدونتك لنجنب حدوث اى مشكلة .

الشكل الأول

1- قم بالبحث عن الوسم  ]]></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;  font-family: 'Droid Arabic Kufi',serif;width: 145px;}
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: #3B5998;}
pre[data-codetype='HTMLku']:before {background-color: #3cc888;}
pre[data-codetype='JavaScriptku']:before {background-color: #19BFE5;}
pre[data-codetype='JQueryku']:before {background-color: #D64136;}

2- قم بالحث عن الوسم  </body> ثم قم بوضع الكود التالى فوقه ( قبله )

<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>
<script>
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)})
</script>
<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>

3- قم بحفظ القالب .

4- الأن مع الكود الأخير فى الصندوق الأول وهذا الكود يتم وضع عندما تقوم بكتابة موضوع جديد على مدونتك فى وضع 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>

مع تغيير كل من كود HTML  ، كود CSS ، كود Javascript ، كود JQuery ، بالكود الذى تريد وضعه .

********************************************

الشكل التانى

1- قم بالبحث عن الوسم  ]]></b:skin> ثم قم بوضع فوقه الكود التالى ( قبله )

/* 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;float: left;}
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;

2- قم بالحث عن الوسم  </body> ثم قم بوضع الكود التالى فوقه ( قبله )

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

3- قم بحفظ القالب .

4- الأن مع الكود الأخير فى الصندوق الأول وهذا الكود يتم وضع عندما تقوم بكتابة موضوع جديد على مدونتك فى وضع HTML .

<pre class='code code-html'><label>HTML</label><code> كود HTML </code></pre>

<pre class='code code-css'><label>CSS</label><code> كود CSS </code></pre>

<pre class='code code-javascript'><label>JS</label><code> كود JavaScript </code></pre>

<pre class='code code-jquery'><label>Jquery</label><code> كود jQuery </code></pre>

مع تغيير كل من كود HTML  ، كود CSS ، كود Javascript ، كود JQuery ، بالكود الذى تريد وضعه .

********************************************

الشكل التالت

1- قم بالبحث عن الوسم  ]]></b:skin> ثم قم بوضع فوقه الكود التالى ( قبله )

/* 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;float: left;}
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;}

2- قم بالحث عن الوسم  </body> ثم قم بوضع الكود التالى فوقه ( قبله )

<script type='text/javascript'>
//Pre Auto Selection
$(&#39;i[rel=&quot;pre&quot;]&#39;).replaceWith(function() {
&#160;&#160;&#160; return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;);
});
var pres = document.querySelectorAll(&#39;pre,kbd,blockquote&#39;);
for (var i = 0; i  pres.length; i++) {
&#160; pres[i].addEventListener(&quot;dblclick&quot;, function () {
&#160;&#160;&#160; var selection = getSelection();
&#160;&#160;&#160; var range = document.createRange();
&#160;&#160;&#160; range.selectNodeContents(this);
&#160;&#160;&#160; selection.removeAllRanges();
&#160;&#160;&#160; selection.addRange(range);
&#160; }, false);
}
</script>

3- قم بحفظ القالب .

4- الأن مع الكود الأخير فى الصندوق الأول وهذا الكود يتم وضع عندما تقوم بكتابة موضوع جديد على مدونتك فى وضع HTML .

<pre class='code code-html'><label>HTML</label><code> كود HTML </code></pre>

<pre class='code code-css'><label>CSS</label><code> كود CSS </code></pre>

<pre class='code code-javascript'><label>JS</label><code> كود JavaScript </code></pre>

<pre class='code code-jquery'><label>Jquery</label><code> كود jQuery </code></pre>


مع تغيير كل من كود HTML  ، كود CSS ، كود Javascript ، كود JQuery ، بالكود الذى تريد وضعه .

********************************************

والى هنا ينتهى الشرح اذا واجهتك اى مشكلة فى تركيب صاديق الأكواد او تريد التعديل على اى شئ ، فباب التعليقات مفتوح لا تتردد ! وادعمنا بمشاركة التدوينة ليستفيد منها الجميع :)

شارك التدوينه
تنبية هام

هناك تعليقان (2) :

  1. اضافة جميل جيدا ومفيد اللجميع شكرا عاليها

    ردحذف
    الردود
    1. شكرا لك على دعمك لنا بالتوفيق لك

      حذف

شارك بتعليق على

مواقع صديقة سوف تفيدك
عرب جيك MAX SEO TOOLS ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا ضع موقعك هنا
ALL RIGHTS RESERVED, 2016 WDBLOOG , POWERED BY BLOGGER , DESIGN BY WDBLOOG