Untuk
pemasangannya sendiri silahkan tutorial dibawah ini:
1.
login ke blog
Masuk
Edit HTML dan cari kode </head>
2.
pasang pasang javaScript di bawah ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
Lewati
perintah yang kedua bila diblog sobat sudah terpasang javascript
3.
masukan kode CSS di bawah ini diatas ]]></b:skin> atau </style>
pre,i[rel="pre"] {
padding:.8em 1em;
margin:0;
background-color:#2f3741;
border-left:4px solid #40627E;
font-size:11px;
color:#839496;
font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
line-height:1.4em;
position:relative;
white-space: pre;
word-wrap: normal;
white-space:pre;
overflow:auto
}
pre.line-number {
background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMgM1WXvD_nHg7E9SFpuy01KZvvELkK6WJ-NNO3aNgvJ8W5LrcJiKD6THulUZu-H38l6dOca09cJ68V0hyphenhyphenm-wuUYIJHjz9LEz5fPESWc1d3yW2zFD29C5ZwZvhyphenhyphenng_7-xzntjX5Z8UJiI/s1600/new-line-number.png)no-repeat top left;
padding-left:54px;
border-left:none;
}
pre.line-number:after{
content:"";
width:35px;
height:8px;
background-color:#39424e;
bottom:0;
left:0;
position:absolute;
}
pre[data-codetype="CSS"]{border-left-color:#5fbbba}
pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
pre[data-codetype="JQuery"]{border-left-color:#99c262}
pre.line-number[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-11px -13px 10px -54px;
padding:8px 12px;
font-family:Oswald,Arial,Sans-serif;
font-size:12px;
text-transform:uppercase;
background-color:#41749f;
color:white
}
pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
code {
font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
font-size:13px;
color: #d14;
}
#comments code {
color:#bbbb6d;
}
pre code {
padding:0 !important;
color: #a3a49a;
background: none !important;
border:none !important;
display:block;
}
pre .line-number {
float:left;
margin:0 1em 0 -1em;
color:#61686d;
background-color:#39424e;
text-align:right;
min-width:2.5em;
padding-right:4px;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
color: #586e75;
font-style: italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #7195a3;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
color: #569dcf;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #aa985a;
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {
color: #509a55;
}
pre .deletion {
color: #dc322f;
}
pre .tex .formula {
background: #073642;}
4.
cari kode </head>
dan pasang kode di bawah ini tepat di atas kode tadi:
<script src='https://googledrive.com/host/0B8zY82qas755TXNaZ0FGWUVPSEE' type='text/javascript'/>
<script>hljs.initHighlightingOnLoad();
</script>
5.
agar tag pre aktif pada komentar silahkan cari kode </body> dan pasang kode di
bawah ini tepat diatasnya:
<script type='text/javascript'>
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
</script>
6.
simpan template
Cara
pemasangannya sendiri cukup mudah:
<pre><code>...-kode HTML, CSS, JavaSript di Sini-..</code></pre>
0 komentar