sdgmim picuan

Featured Posts

Senin, 19 November 2018

gleftinlove.blogspot.co.id November 19, 2018 Tidak ada komentar : 

/* ===== CSS Syntax Highlighter 3 =====*/
code[class*="language-"],
pre[class*="language-"] {
 color: #ccc;
 background: none;
 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 text-align: left;
 white-space: pre;
 word-spacing: normal;
 word-break: normal;
 word-wrap: normal;
 line-height: 1.5;

 -moz-tab-size: 4;
 -o-tab-size: 4;
 tab-size: 4;

 -webkit-hyphens: none;
 -moz-hyphens: none;
 -ms-hyphens: none;
 hyphens: none;

}

/* Code blocks */
pre[class*="language-"] {
 padding: 1em;
 margin: .5em 0;
 overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
 background: #2d2d2d;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
 padding: .1em;
 border-radius: .3em;
 white-space: normal;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
 color: #999;
}

.token.punctuation {
 color: #ccc;
}

.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
 color: #e2777a;
}

.token.function-name {
 color: #6196cc;
}

.token.boolean,
.token.number,
.token.function {
 color: #f08d49;
}

.token.property,
.token.class-name,
.token.constant,
.token.symbol {
 color: #f8c555;
}

.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
 color: #cc99cd;
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
 color: #7ec699;
}

.token.operator,
.token.entity,
.token.url {
 color: #67cdcc;
}

.token.important,
.token.bold {
 font-weight: bold;
}
.token.italic {
 font-style: italic;
}

.token.entity {
 cursor: help;
}

.token.inserted {
 color: green;
}

div.code-toolbar {
 position: relative;
}

div.code-toolbar > .toolbar {
 position: absolute;
 top: .3em;
 right: .2em;
 transition: opacity 0.3s ease-in-out;
 opacity: 0;
}

div.code-toolbar:hover > .toolbar {
 opacity: 1;
}

div.code-toolbar > .toolbar .toolbar-item {
 display: inline-block;
}

div.code-toolbar > .toolbar a {
 cursor: pointer;
}

div.code-toolbar > .toolbar button {
 background: none;
 border: 0;
 color: inherit;
 font: inherit;
 line-height: normal;
 overflow: visible;
 padding: 0;
 -webkit-user-select: none; /* for button */
 -moz-user-select: none;
 -ms-user-select: none;
}

div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
 color: #bbb;
 font-size: .8em;
 padding: 0 .5em;
 background: #f5f2f0;
 background: rgba(224, 224, 224, 0.2);
 box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
 border-radius: .5em;
}

div.code-toolbar > .toolbar a:hover,
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar span:hover,
div.code-toolbar > .toolbar span:focus {
 color: inherit;
 text-decoration: none;
}
/* --------------------------------- *


Ulangi Copy

gleftinlove.blogspot.co.id November 19, 2018 Tidak ada komentar :
button class="boxcode">HTML Example 
/* CSS Sintax Haighlighter MINTAILMU.COM */
pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#374760;position:relative;border-radius:4px;max-height:500px;}
pre::before{font-size:16px;content:attr(title);position:absolute;top:0;background-color:#eee;padding:10px;left:0;right:0;color:#fff;text-transform:uppercase;display:block;margin:0 0 15px 0;font-weight:bold;}
pre::after{content:'</>';padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:8px;color:#fff;line-height:20px;transition:all 0.3s ease-in-out;}
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:#2c323c;}
.comments pre::before{content:'Code';font-size:13px;position:relative;top:0;background-color:#f56954;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::after{font-size:11px;}
.comments pre code{color:#eee;}
.comments pre.line-numbers{padding-left:10px;}
button class="boxcode">CSS Example
Isi dengan kode HTML yang sudah di Parse terlebih dahulu
button class="boxcode">JavaScript Example
Isi dengan kode HTML yang sudah di Parse terlebih dahulu

Rabu, 07 November 2018

gleftinlove.blogspot.co.id November 07, 2018 Tidak ada komentar : 
 ... /* CSS Sintax Haighlighter MINTAILMU.COM */
pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#374760;position:relative;border-radius:4px;max-height:500px;}
pre::before{font-size:16px;content:attr(title);position:absolute;top:0;background-color:#eee;padding:10px;left:0;right:0;color:#fff;text-transform:uppercase;display:block;margin:0 0 15px 0;font-weight:bold;}
pre::after{content:'</>';padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:8px;color:#fff;line-height:20px;transition:all 0.3s ease-in-out;}
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:#2c323c;}
.comments pre::before{content:'Code';font-size:13px;position:relative;top:0;background-color:#f56954;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::after{font-size:11px;}
.comments pre code{color:#eee;}
.comments pre.line-numbers{padding-left:10px;}
pre.line-numbers{position:relative;padding-left:3.0em;counter-reset:linenumber;}
pre.line-numbers > code{position:relative;}
.line-numbers .line-numbers-rows{height:100%;position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.5em;width:3em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:0;}
.line-numbers-rows > span{pointer-events:none;display:block;counter-increment:linenumber;}
.line-numbers-rows > span:before{content:counter(linenumber);color:#999;display:block;padding-right:0.8em;text-align:right;transition:350ms;}
pre[data-codetype='HTMLku']:before{background-color:#3cc888;}
pre[data-codetype='CSSku']:before{background-color:#00a1d6;}
pre[data-codetype='JQueryku']:before{background-color:#e5b460;}
pre[data-codetype='JavaScriptku']:before{background-color:#75d6d0;}
pre[data-codetype='PHPku']:before{background-color:#75d6d0;}
pre::after{content:" DOUBLE CLICK TO SELECTION ";padding:0;width:auto;height:auto;position:absolute;right:18px;top:10px;font-size:12px;color:#fff;border:1px solid #fff;border-radius:4px;line-height:20px;overflow:hidden;-webkit-backface-visibility:hidden;transition:all 0.3s ease;}} ... 
 ... kode CSS di sini ... 
 ... kode JavaScript di sini ... 
 ... kode jQuery di sini ...
Langganan: Postingan ( Atom )

Recent Posts

Like us

Formulir Kontak

Nama

Email *

Pesan *

/* ===== CSS Syntax Highlighter 2 =====*/ .boxcode { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .boxcode:hover { background-color: #ccc; } .boxcode:after { content: '\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } .boxpanel { padding: 0 18px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } /* --------------------------------- */