Memasang kode pre pada postingan blog sangat berguna sekali terutama untuk blog yang memposting artikel yang bersifat tutorial selain dapat memperindah tampilan postingan juga dapat mempermudah manusia dalam membaca kode-kode yang kita tuliskan dalam membuat postingan, nah untuk memasangnya diblog sobat cukup sobat ikuti saja langkah-langkahnya dbawah ini.
 |
| Cara Memasang Kode Pre Pada Postingan Blog |
Memasang Kode Pre Pada Postingan Blog
Buka Blogger Dashboard > Klik Template > Edit HTML
Cari tag
</style> dalam template dan di diatasnya terapkan kode CSS di bawah ini :/* CSS Syntax Highlighter */ pre {padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#333c3f;position:relative;border-radius:4px;} pre::before {font-size:16px;content:attr(title);position:absolute;top:0;background-color:#eee;padding:10px;left:0;right:0;color:#666;text-transform:uppercase; display:block;margin:0 0 15px 0;font-weight:bold;border:1px solid #d0d0d0;} 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:#333;} .comments pre::before {content:'Code';font-size:13px;position:relative;top:0; background-color:#e25633;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 code {color:#eee;}
Terakhir tambahkan kode Javascript berikut tepat sebelum kode </body>
<script src='//cdn.rawgit.com/bloggerism/js/sobekloh/prism.js' type='text/javascript'></script> Simpan template
Untuk dapat menerapkannya di postingan sobat cukup memasang kode berikut didalam postingan sobat
<pre title="HTML"><code class="language-markup"> KODE DISINI </code></pre>
<pre title="CSS"><code class="language-css"> ... CSS CODE HERE ... </code></pre>
<pre title="Javascript"><code class="language-javascript"> ... JAVASCRIPT CODE HERE ... </code></pre>
Selesai dan selamat mencoba...
