شرح ربط منتدى زينفورو xenforo مع Google 2020

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

شرح إضافة صناديق  لعرض الاكواد إلى مدونة بلوجر

1- اذهب الي قالب ثم ابحث عن الوسم التالي

]]></b:skin>

2- وضع الكود التالي فوقه

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

5- قم بعمل حفظ للقالب.

وعندما تريد اضافة اي كود تقوم بتغيير  المشاركة من وضع تاليف الي وضع HTML  واختيار احد الصناديق التالية او الكل ان اردت .

<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">CODE HTML</code></pre>
<pre data-codetype="CSSku" title="CSS"><code class="language-css">CODE CSS</code></pre>
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript">CODE JAVASCRIPT</code></pre>
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript">CODE JQUERY</code></pre>