 |
| Kotak Script Responsive |
namun tujuan saya menulis artikel ini adalah buat teman-teman yang menggunakan template lain yang belum dilengkapi dengan pembungkus kotak script seperti kotak scriptnya mbak arlina.
Cara Pasang Kotak Script Responsive
Langkah 1
Buka Desboardnya blog kamu dan masuk ke Setingan template > Edit HTML > terus salin semua kode CSS dibawah ini dan letakan tepat diatas kode </style>
/* CSS Prism Syntax Highlighter */
pre{padding:50px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#2c323c;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:'Double click to selection';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}
pre:hover::after{opacity:0;top:-8px;visibility:visible}
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='CSSku']:before{background-color:#00a1d6}
pre[data-codetype='HTMLku']:before{background-color:#3cc888}
pre[data-codetype='JavaScriptku']:before{background-color:#75d6d0}
pre[data-codetype='JQueryku']:before{background-color:#e5b460}
Langkah 2
Sekali lagi Copy tiga kode di bawah ini dan pastekan diatas </body> atau </head> (pilih salah satu, namun dalam percobaan saya, saya mempastekannya di atas) </head>
Kemudian Simpan Templatenya.
<script src='https://cdn.rawgit.com/Arlina-Design/redvision/cab7a72d/prisma.js' type='text/javascript'/>
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>
<script type='text/javascript'>
var pres = document.getElementsByTagName("pre");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>
Cara Menggunakannya
Untuk menggunakan pembungkus script tersebut kedalam postinganmu, gunakanlah kode dibawah ini untuk pemanggil CSS nya.
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>
ambil salah satu kode tersebut sesuai kebutuhan dan tempelkan di HTML jangan di Compose
Catatan:Parsee kan terlebih dahulu kode yang akan kamu masukan kedalam artikelmu supaya kodenya terlihat.
Untuk memParsee kan HTML mu bisa klik disni
Kusus Pengguna Templatenya mbak Arlina
jadi kamu tinggal gunakan kode pemanggil berikut ini sesuai keperluan.
<pre class='code code-html'><label>HTML</label><code>... kode HTML (yang telah diparse) di sini ...</code></pre>
<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>
<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>
<pre class='code code'><code>... kodenya disni (yang telah di parse) ...</code></pre>
Nah selesai sudah artikel ini. semoga bermanfaat, yang tidak mengerti silakan komentar dibawah.
thanks.
EmoticonEmoticon