صفحة اعادة توجيه الروابط لمدونات بلوجر مع العداد و الربح منها

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

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

والكثير من المبتدئين يسألون كيف يتم وضغ الأكواد داخل المقاله ف عندما تذهب الى موقع

تجد الاكواد موجوده داخل صندوق يختلف شكله او حجمه ولاكن يؤدى الى نفس الغرض

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

اتيت لكم ب صندوق لتضمين الاكواد احترافى شكل جذاب ومميز واكواده لا يوجد بها اى اخطاء

ولا يؤثر على سرعة المدونة ومتجاوب مع جميع الاجهزه والشاشات تابع معى الشرح وطبقه على مدونك

وسيتم تركيب الاضافة بدون اى مشاكل وشاهد الفيديو حتى تعرف كيف يتم تحويل الاكواد قبل وضعها بالتدويته

فيديو شرح تركيب الأضافة وتحويل الاكواد

شرح تركيب الأضافة

1. أذهب الى المدونه التى تريد وضع الاضافه بها
2. وثم توجه الى المظهر ولا تنسى أن تحتفظ بنسخه إحطياطيه
3. ثم أضغط على تعديل HTML
4. ثم أضغط ctrl + f
5. قم بالبحث عن الوسم ]]></b:skin> وضع الكود التالى فوقه

/*===================================================

              = Syntax Highlighter =
  
===================================================*/
/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2B303B;
    position: relative;
    max-height: 500px;
    text-align: left;
    direction: ltr;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #363c4a;
    padding: 10px;
    left: 0;
    right: 0;
    color: #8790a1;
    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: #8790a1;
    line-height: 20px;
}

pre:hover::after {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);
opacity:0;
    top: -8px;
    visibility: visible;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #C0C5CE;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
    font: 14px 'Consolas','Monaco',monospace,Courier,Courier New;
}

pre code .token.prolog{/* ?xml version  */
    color: #777;
}
pre code .token.doctype{/* !DOCTYPE html  */
    color: #777;
}
pre code .token.cdata {/*css js ![CDATA[  */
    color: #777;
}
pre code .token.url{
    color: #ccc;
}
pre .language-css .token.string{
    color: #ccc;
}
pre .style .token.string {
    color: #ccc;
}
pre code .token.atrule {
    color: #009999;
}
pre code .token.atrule{
    color: #1baeb0;
}
pre code .token.regex {
    color: #ccc;
}
pre code .token.important {
    font-weight: bold;
}
pre code .token.entity{/*html  &quot &gt */
    color: #759bb9;
    cursor: help;
}
pre code .namespace {/*html  b:variable  */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.8)";
filter:alpha(opacity=0.8);
opacity:.8;
}
pre code .token.tag, .language-markup .token.punctuation {/*html  tag  */
    color: #A3BE8C;
}
pre code .token.attr-name {/*html  class id href  */
    color: #C0C5CE;
}
pre code .token.selector {/*css  #blogg-code  */
    color: #759bb9;
}
pre code .token.property {/*css  font-size  */
    color: #759bb9;
}
pre code .token.comment {/*  comment code  */
    color: #8c919a;
    font-style: italic;
}
pre code .token.punctuation {/*  });,:  */
    color: #8FA1B3;
}
pre code .token.operator {/*  = +  ! */
    color: #4d9bd8;
}
pre code .token.number, pre code .token.boolean {/*  1 false  */
    color: #cec768;
}
pre code .token.attr-value {/*  'value'  */
    color: #f79029;
}
pre code .token.string {/*  "#blogg-code"  */
    color: #A3BE8C;
}
pre code .token.keyword {/*  var function if  */
    color: #94719c;
    font-style: italic;
}
code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
}
/*======comments pre======*/
.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: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}
/*=======line numbers========*/
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='HTMLku']:before {
    color: #f79029;
}

pre[data-codetype='CSSku']:before {
    color: #759bb9;
}

pre[data-codetype='JavaScriptku']:before {
    color: #d4b447;
}
pre[data-codetype='JQueryku']:before {
    color: #94719c;
}
/*=======transition=======*/
pre::after {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
/*=======border radius=======*/
pre, .comments pre::before {
    border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

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

<script src='https://rawcdn.githack.com/hamed2020-cmd/download/c840c88adc06e570ad7a875c0060ff3c8a66c4cb/Syntax-Highlighter.js' type='text/javascript'/>

ثم اضغط حفظ القالب

ومن خلال التدوينه ضع الكود المناسب لوضع الاكواد به بعد التحويل

تحميل الملف

تحميل

صفحة تحويل الاكواد المذكوره بالشرح

ذهاب للصفحه