اضافة صناديق لعرض الأكواد لمدونات بلوجر

السلام عليكم .... �� , اليوم سوف نشرح لكم طريقة اضافة صناديق لعرض �� الأكواد لمدونات بلوجر ، تستعمل صناديق عرض الاكواد في وضع الأكواد مثل Css و Html , Xml ، وغيرها بحيث توفر دعما يشمل النسخ بالضغط �� مرتين على الكود وتوضح كل اسم للوسوم مع تلوينه كما أن الاضافة تتوفر بأربعة ألوان زاهية كما سنشاهد بوضوح أكثر في المعاينة التالية .

شرح طريقة التركيب
1. حرر القالب >> ابحث عن ]]></b:skin> وضع الكود التالي فوقه

الكود

/* CSS Pre-Code 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;
    font-family: sans-serif;
    clear: both;
}

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;
        text-align: left;
}

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: #ff3c41;
}

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

2. ضع الكود التالي فوق </body>

الكود

<script src='//cdn.rawgit.com/Karim-Ali-El-Sayed/Pro7web/34dfc16e/preline.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script type='text/javascript'>
// Line Numbers
$(&#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)})
//<![CDATA[
// Selection
for(var pres=document.querySelectorAll("pre,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
//]]>
</script>
</b:if>

3. قم بحفظ العمل
* ما يتبقى عليك إلا وضع أحد الصناديق أو جميعها في موضوع بتبويب HTML بنسخ الأكواد التالية وحفظها عندك

الكود

<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">ضع هنا كود الـHTML</code></pre>
<pre data-codetype="CSSku" title="CSS"><code class="language-css">ضع هنا كود الـCss</code></pre>
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript">ضع هنا كود الـJavascript</code></pre>
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript">ضع هنا كود الـjQuery</code></pre>

⚠ ملاحظة : لوضع أي كود به وسوم < > عليك تحويلة أولا من محول الاكواد ثم وضعة بداخل الصندوق
محول الأكواد من هنا

لا تنسا ان تكن من أعضاء المدونة من هنا , إذا واجهتك اي مشكلة لا تترد فى ترك تعليق
شارك المقال على :

التعليقات

لا توجد تعليقات حتى الآن، كن أول من يعلق

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

رسالة!

السلام عليكم ، المدونة للبيع مع الصفحة الخاصة بها على الفيسبوك + حساب ادسنس عادي مربوط بها كما ان الددومين متوفر الى 7/2018 ويمكن تجديدة ، توجد طرق عديدة للدفع بأذن الله ويمكننا التعمال من خلال خمسات ان احببت كوسيط

لمن يهمة الامر يراسلني على حسابي علي الفيسبوك من هنا

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

أحدث التعليقات

تم النسخ