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

, ,
كيفية تزيين كتابة الاكواد في مدونة بلوجر
بسم الله الرحمن الرحيم والصلاة علي رسول الله أما بعد احبائي اليوم اطرح عليكم موضوع عن كيفية تزيين كتابة الاكواد في مدونة بلوجر وهي تعطي لمسة احترافية في مدونتك وممايميز هذه الاضافة ان عندما تكتب كود يوجد زر نسخ للكود دون مشاكل والان تابع معي طريقة تركيب هذه الاضافة علي مدونة بلوجر .


اولا : قم بدخول الي لوحة تحكم مدونتك 
ثانيا : اختار قسم قالب 
ثالثا : اضغط علي زر تحرير 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'/>
<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>
<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> 
 والان انتهي موضوعنا انتهي اتمنا ان يكون نال اعجابكم لاتنسي نشر موضوع علي شبكات تواصل وانتظر كل جديد علي مدونة كما يمكنك تواصل معنا علي صفحة الفيس بوك من هنا وعلي تويتر من هنا وعلي يوتيوب من هنا . وسلام عليكم ورحته الله وبركاته 

مدونة عمرو ويب تصميم محمد ابو الغرانيق © 2013-2015

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