Assalamuallaikum Warahmatullahi Wabarakatuh
Sekarang CzRandy Blog akan memberikan tips cara memasang script Syntax Highlighter seperti arlina design
Berikut screenshootnya
Syntax Highlighter biasa di gunakan untuk menaruh kode seperti kode CSS, JAVASCRIPT, JQUERY dan HTML dan biasa di gunakan di blog blog tutorial seperti blog ini. Cuman saya pake yang sederhana saja.
Syntax Highlighter ini biasa di gunakan blog arlina design jadi sudah pasti keren dan responsive
Bagi yang mau memasangnya silahkan ikuti tahapan berikut ini
CARA MEMASANG SYNTAX HIGHLIGHTER
Buka Blogger pilih Tema dan klik Edit HTML kemudian Salin kode CSS dibawah ini tepat di atas kode </style>
/* CSS Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar {display:none;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark,code mark,pre code mark {background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}Jika di rasa sudah benar penempatan kodenya silahkan simpan Tema
Untuk menggukannya di postingan silahkan gunakan kode di bawah ini di mode Html dan jangan lupa kodenya di parse dulu
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">
kode yang sudah di parse di sini</code></pre>
<pre data-codetype="CSSku" title="CSS"><code class="language-markup">
kode yang sudah di parse di sini </code></pre>
<pre data-codetype="JQueryku" title="JQuery"><code class="language-markup">
kode yang sudah di parse di sini </code></pre>
<pre data-codetype="Javascriptku" title="Javascript"><code class="language-markup">
kode yang sudah di parse di sini </code></pre>Semoga bermanfaat dan terima kasih sudah berkunjung
EmoticonEmoticon