Cara Menciptakan Kotak Script Keren 2018

Untuk kalian para blogger yang khususnya memiliki blog tutorial niscaya sangat membutuhkan Sebuah script arahan yang pbermacam_macam. Mulai dari yang script anti copas, anti bom klik, anti print dan masih banyak lainnya. Apalagi jikalau kalian ingin aneka macam sebuah artikel yang membahas perihal tutorial Kode HTML yang di mana kalian harus membagikan arahan html kepada para pengunjung untuk di copy paste. Nah namun apabila kalian kesulitan sebab blog kalian sudah terpasang arahan anti copas niscaya ribet.

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

Simak Langkah pertama di bawah ini:

1. Masuk ke Blogger - Template - Edit HTML.
2. Tekan Ctr+F dan cari arahan ]]></b:skin>.
3. Paste kan arahan di bawah ini diatas arahan ]]></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; 
 pre code {
 font-size: 12px; }  
 color: #e9e9e9;
 display: block;     border: none; 
 color: #ccc;
 
 direction: ltr;
 
 text-align: left;
 
 word-spacing: normal;
 padding: 0 0; 
 code .token.punctuation {
 font-weight: bold; }  }  
 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.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
 code .token.selector,code .token.attr-name,code .token.string { }  
 pre code .token.selector,pre code .token.attr-name {
 color: #fafafa; }  pre code .token.string { 
 code .token.operator {
 color: #40ee46; }      color: #ccc; }      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; 
 color: #fff!important;
 font-style: italic; }  
 font-style: italic;
 }  
 color: #ccc;
 code .token.regex { }  
 code .token.important {
 font-weight: bold; }  code .token.entity { 
 background-color: #ea4f4e!important;
 cursor: help; }  pre mark {     padding: 2px; 
 color: #fff!important;
 
 border-radius: 2px;
 }  code mark { 
 background-color: #ea4f4e!important;
 color: #fff!important;     padding: 2px; 
 background-color: #ea4f4e!important;
 border-radius: 2px; }  pre code mark {     padding: 2px; 
 left: 0;
 border-radius: 2px; } 
 .comments pre {
 
 padding: 10px 10px 15px 10px;
 background: #2c323c; }  
 content: 'Code';
 .comments pre::before {     font-size: 13px; 
 background-color: #f56954;
 position: relative;     top: 0;     padding: 3px 10px; 
 color: #eee;
 
 right: 0;
 
 color: #fff;
 
 text-transform: uppercase;
 display: inline-block; 
 font-weight: bold;
 margin: 0 0 10px 0;     border-radius: 4px; 
 font-size: 11px;
 border: none; }  .comments pre::after { }  
 height: 100%;
 .comments pre code { }  
 .comments pre.line-numbers {
 padding-left: 10px; }  
 position: relative;
 pre.line-numbers {     padding-left: 3.0em; 
 pre.line-numbers > code {
 counter-reset: linenumber; }      position: relative; }  
 counter-increment: linenumber;
 .line-numbers .line-numbers-rows {     position: absolute; 
 pointer-events: none;
 top: 0; 
 left: -3.5em;
 font-size: 100%; 
 -webkit-user-select: none;
 width: 3em; 
 -ms-user-select: none;
 -moz-user-select: none;     padding: 0; 
 pointer-events: none;
 }  .line-numbers-rows > span { 
 pre[data-codetype='HTML']:before {
 display: block; }  
 .line-numbers-rows > span:before {
 content: counter(linenumber); 
 padding-right: 0.8em;
 color: #999;     display: block; 
 pre[data-codetype='CSS']:before {
 text-align: right;     transition: 350ms; }  
 background-color: #3cc888;
 background-color: #00a1d6; }  }  
 }   
 
 pre[data-codetype='JavaScript']:before {
 background-color: #75d6d0; }  
 background-color: #e5b460;
 pre[data-codetype='JQuery']:before { 

Kemudian langkah kedua:

1. Cari lagi dengan cara tekan Ctr+F arahan </body>.
2. Copy script di bawah ini dan pastekan di atas arahan </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(); 
 }, false);
 range.selectNodeContents(this);     selection.removeAllRanges();     selection.addRange(range); } 
 </script>   
 

setelah itu gres di simpan.

Baca Juga

Untuk menciptakan artikel yang membutuhkan kotak script maka kalian tinggal menggunakan arahan di bawah ini dan paste di belahan HTML sesudah itu kembali ke belahan COMPOSE dan ubah Tulisan Taruh Script Disini dengan Kode yang ingin kalian Share.

 <pre class="line-numbers language-markup" data-codetype="HTML" title="CARA MEMBUAT KOTAK SCRIPT KEREN 2018"><code class=" language-markup"> Taruh Script HTML Di Sini </code></pre> 

 <pre class="line-numbers language-css" data-codetype="CSS" title="CARA MEMBUAT KOTAK SCRIPT KEREN 2018"><code class=" language-css"> Taruh Script CSS Di Sini </code></pre> 

 <pre class="line-numbers language-javascript" data-codetype="JavaScript" title="CARA MEMBUAT KOTAK SCRIPT KEREN 2018"><code class=" language-javascript"> Taruh Script Java Script Di Sini </code></pre> 

 <pre class="line-numbers language-jquery" data-codetype="JQuery" title="CARA MEMBUAT KOTAK SCRIPT KEREN 2018"><code class=" language-jquery"> Taruh Script JQuery Di Sini </code></pre> 

Caranya cukup gampang kalian tinggal pilih jenis kotak arahan yang akan kalian posting atau share.

sekian biar membantu. Apabila ada pertanyaan dapat bertanya melalui Contact form yang sudah tersedia. Terima Kasih..