MEMBUAT KOTAK SCRIPT, CSS, KODE HTML DAN JQUERY KEREN

Posted by ADPATI on

Untuk kalian para blogger yang khususnya mempunyai blog tutorial pasti sangat membutuhkan Sebuah script kode yang bermacam_macam. Mulai dari yang script anti copas, anti bom klik, anti print dan masih banyak lainnya. Apalagi jika kalian ingin berbagai sebuah artikel yang membahas tentang tutorial Kode HTML yang di mana kalian harus membagikan kode html kepada para pengunjung untuk di copy paste. Nah namun apabila kalian kesulitan karena blog kalian sudah terpasang kode anti copas pasti ribet.

Oleh karena itu adpati akan menshare sebuah kode kotak (box) script html yang di mana kode di dalam kotak ini nantinya bisa di copy paste oleh pengunjung walaupun blog kalian sudah terpasang script anti copas.Kotak script ini trbilang cukup istimewah dan keren, kalian bisa mengubah kode warna sesuai keinginan kalian. Seperti apa si tutorialnya?

Simak Langkah pertama di bawah ini:

1. Masuk ke Blogger - Template - Edit HTML.
2. Tekan Ctr+F dan cari kode ]]></b:skin>.
3. Paste kan kode di bawah ini diatas kode ]]></b:skin>. Caranya klik 2x (dua kali) di dalam kotak untuk copy.

      /*CSS Syntax Hightler */
pre {

    padding: 50px 10px 10px 10px;
margin: .5em 0;

    word-wrap: break-word;
white-space: pre;
    overflow: auto;

    position: relative;
background-color: #2c323c;
    border-radius: 4px;

    content: attr(title);
max-height: 500px;
}

pre::before {
    font-size: 16px;

    padding: 10px;
position: absolute;
    top: 0;
    background-color: #eee;
    left: 0;

    margin: 0 0 15px 0;
right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;

    padding: 2px 10px;
font-weight: bold;
}

pre::after {
    content: 'Double click to selection';

    color: #fff;
width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;

    top: -8px;
line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;

    Andale Mono','Courier New',Courier,Monospace;
visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    line-height: 16px;
    color: #88a9ad;

    background: none;
background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    border: none;
    color: #e9e9e9;

    color: #ccc;
direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
}


    opacity: .8;
pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {

    color: #88a9ad;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
}


code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}


code .token.comment {
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;
}


    color: #fff!important;
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;
    padding: 2px;

    color: #fff!important;
border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    padding: 2px;
    border-radius: 2px;
}

    left: 0;
.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;

    color: #eee;
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 {
}


    height: 100%;
.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 {
    position: absolute;

    counter-increment: linenumber;
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;
}


pre[data-codetype='HTML']:before {
.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSS']:before {
    background-color: #00a1d6;
}

    background-color: #3cc888;
}


}   
pre[data-codetype='JavaScript']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQuery']:before {

    background-color: #e5b460;

Kemudian langkah kedua:

1. Cari lagi dengan cara tekan Ctr+F kode </body>.
2. Copy script di bawah ini dan pastekan di atas kode </body>.

   <script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>
<script>
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);

Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),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>   

setelah itu baru di simpan.

Baca Juga

Untuk membuat artikel yang membutuhkan kotak script maka kalian tinggal memakai kode di bawah ini dan paste di bagian HTML setelah itu kembali ke bagian COMPOSE dan ubah Tulisan Taruh Script Disini dengan Kode yang ingin kalian Share.

 <pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup"> Taruh Script HTML Di Sini </code></pre> 

 <pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css"> Taruh Script CSS Di Sini </code></pre> 

 <pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"><code class=" language-javascript"> Taruh Script Java Script Di Sini </code></pre> 

 <pre class="line-numbers language-jquery" data-codetype="JQuery" title="JQuery"><code class=" language-jquery"> Taruh Script JQuery Di Sini </code></pre> 

Caranya cukup mudah kalian tinggal pilih jenis kotak kode yang akan kalian posting atau share.

sekian semoga membantu. Apabila ada pertanyaan bisa bertanya melalui Contact form yang sudah tersedia. Terima Kasih..

Labels: ADPATI GAME, TUTORIAL

Thanks for reading MEMBUAT KOTAK SCRIPT, CSS, KODE HTML DAN JQUERY KEREN. Please share...!