 |
| Gambar by Ficri Pebriana |
Lagian pula terlalu banyak sudah kode yang saya gunakan pada artikel-artikel saya yang lainnya. Dan saya males untuk mengeditnya satu persatu. Makanya saya mencari alternatifnya dengan hanya mengandalkan tag
pre dan code, atau biasa ditulis seperti berikut. <pre><code> Kode css, html, javascript, jquery atau yang lainnya </code></pre> .smoothscroll-top {
position:fixed;
opacity:0;
visibility:hidden;
overflow:hidden;
text-align:center;
z-index:99;
background-color:#09c;
color:#fff;
width:47px;
height:44px;
line-height:44px;
right:25px;
bottom:-25px;
padding-top:2px;
border-radius:none;
transition:all 0.5s ease-in-out;
transition-delay:0.2s;
}
.smoothscroll-top:hover {
background-color:#3eb2ea;
color:#fff;
transition:all 0.2s ease-in-out;
transition-delay:0s;
}
.smoothscroll-top.show {
visibility:visible;
cursor:pointer;
opacity:1;
bottom:25px;
}
.smoothscroll-top i.fa {
line-height:inherit;
}Tambahkan css berikut ini tepat diatas kode
</head>.<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
/* Syntax Highlighter */
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/AVvXsEixo9sjf7QFyyKt21lpbA2WxyTmBT42Mb8kucAwOU3Nk0KkeFSNhkm8Jn4sYo11fHvUzx-njv-FgOe6G3hMpgSkR4Woa0TJXysklU8b-8KQQqfTJGPxrKGN-LyQDqcCdUbEZYNX6kmy4gQ/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:#2DCFF2;
font-style:italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
color:#E6D90C;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color:#EB4F4F;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
color:#03C425;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color:#1B6FC3;
}
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:#D94CEA;
}
pre .deletion {
color:#dc322f;
}
pre .tex .formula {
background:#073642;
}
</style>
</b:if></body>.<b:if cond='data:blog.pageType == "item"'>
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>
</b:if>pre dan code pasti akan memiliki warna-warna yang menarik, dan terlihat profesional kan sobat.Karena google code sudah akan ditutup pada 2016, maka saya berikan alternatif js nya, dengan mengganti kode yang terakhir tadi dengan kode dibawah ini.
<b:if cond='data:blog.pageType == "item"'>
<script src='https://googledrive.com/host/0B_ljWXOPMwNGfkQ3MHVzcFZNN0tXSXNEb2FjQmJ2cHZ1N1BwSHlKbG8xUTg4dmpzSEN0bEU/Syntax.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>
</b:if>
