Cara Membuat Kotak Script HTML JQuery CSS Dan JavaScript Di Dalam Postingan Ala Arlinadzgn

cara membuat kotak script arlina
Arlinadzgn

Bagaimana Cara Membuat Kotak Script HTML, JQuery, CSS, dan JavaScript Di Dalam Postingan Ala Arlinadzgn ?

1. Simpan Kode CSS Di Bawah Ini Tepat Di Atas </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;
}
  

2. Simpan 3 Kode Di Bawah Ini Sebelum </body> atau </head>

<script src='https://arlina-design.googlecode.com/svn/prism.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(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

3. Simpan Template

4. Untuk Membuat Kotak Scriptnya Yaitu Ke Entri Baru Kemudian Klik Tab HTML (bukan compose) Lihat Dengan Teliti Dan Masukan Satu-Satu Kode Di Bawah (HTML, CSS, JavaScript, JQuery) :

<pre title="HTML" data-codetype 
="HTMLku"><code class="language-markup">(paste HTML yg sudah di parse disini)</code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> 
(paste kode CSS yg sudah di parse disini) </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> 
(paste kode JavaScript yg sudah di parse disini) </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> 
(paste kode jQuery yg sudah di parse disini) </code></pre>

Penting!
Sebelum memasukan script di atas ke dalam kode pemanggil, harap script di atas di PARSE terlebih dahulu disini :

http://www.blogcrowds.com/resources/parse_html.php

Caranya : Copykan satu-persatu script di bawah ini dan pastekan
*lihat gambar di bawah ini

cara membuat kotak script arlina

Kemudian Klik PARSE, maka akan seperti gambar di bawah ini :

cara membuat kotak script arlina

Copy script yang dikotaki merah diatas ke sini :


<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-
javascript">(PASTE DISINI)</code></pre></code></pre>

Dan hasilnya akan seperti postingan ini.

Semoga Bermanfaat 😊
nimdA Menulis adalah bekerja untuk keabadian.

1 Komentar untuk "Cara Membuat Kotak Script HTML JQuery CSS Dan JavaScript Di Dalam Postingan Ala Arlinadzgn"

  1. Udah saya coba gan tapi gagal kode scriptnya kaga ke panggil ane pake viomagz gan

    BalasHapus
Terimakasih telah memberikan komentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel