M emasang kode pre pada postingan blog sangat berguna sekali terutama untuk blog yang memposting artikel yang bersifat tutorial selain dapa...
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.
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...
