Cara Memasang Kode Pre (syntax highlighter) Pada Postingan Blog


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
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...
Previous
Next Post »
Thanks for your comment
close