Cara Menciptakan Kotak Script Keren 2018

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

Oleh alasannya ialah itu adpati akan menshare sebuah isyarat kotak (box) script html yang di mana isyarat 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 isyarat warna sesuai impian kalian. Seperti apa si tutorialnya?

Simak Langkah pertama di bawah ini:

1. Masuk ke Blogger - Template - Edit HTML.
2. Tekan Ctr+F dan cari isyarat ]]></b:skin>.
3. Paste kan isyarat di bawah ini diatas isyarat ]]></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 isyarat </body>.
2. Copy script di bawah ini dan pastekan di atas isyarat </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 isyarat di bawah ini dan paste di bab HTML sehabis itu kembali ke bab 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 isyarat yang akan kalian posting atau share.

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

Bagikan Artikel ini