Tuesday, December 20, 2016

Cara Membuat Kotak HTML di Postingan Keren ala Anakforum.com

membuat kotak html



Cara membuat kotak/kode keren - Pada Artikel kali ini saya akan membahas tentang bagaimana membuat kota kode keren ala anakforum.com, css ini saya ambil dari arlina desain, saya hanya memodif saja :D dengan kotak ini, kita dapat menyeleksi semua kode dengan 2x klik tanpa harus manual seleksi, langsung saja kita ke tkp

pertama tama buka BLOGGER > TEMPLATE > EDIT TEMPLATE

lalu copy dan paste  kode dibawah diatas kode </style> atau diatas kode ]]></b:skin> untuk mudah mencarinya tekan CTRL+F


/* CSS Syntax Highlighter BY ANAKFORUM.COM */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#f0f0f0;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;border-radius:3px;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}
pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar{display:none}
pre::before{font-size:18px;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#555;border:1px solid #f0f0f0;display:block;margin:0;font-weight:700;text-indent:15px}
pre code{display:block;background:none;border:none;color:#999;padding:25px 20px 20px;font-family:&#39;Source Code Pro&#39;,Menlo,Consolas,Monaco,monospace;font-size:.85rem;white-space:pre;overflow:auto}
code .token.important{font-weight:bold}
code .token.entity{cursor:help}
pre mark,code mark,pre code mark{background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px}
pre[data-codetype=&quot;CSSku&quot;]:before,pre[data-codetype=&quot;HTMLku&quot;]:before,pre[data-codetype=&quot;JavaScriptku&quot;]:before,pre[data-codetype=&quot;JQueryku&quot;]:before{background-color:#fff;}


masukkan kode ini di postingan sobat dalam mode HTML untuk memanggil kode cssnya


<pre data-codetype="CSSku" title="CSS"><code class="language-markup">tempat kode</code></pre>


Catatan jika ingin mengganti kotak CSS dengan yang lainnya, kalian hanya bisa menggunakan CSS HTML JavaScript JQuery

Caranya ganti CSSku dengan HTMLku , JavaScriptku , JQueryku


Sebelum sobat memasukkan kode di kota kode, parse dulu kode nya. PARSE HTML DISINI . jika sudah di parse, masukkan kode/script yang ingin dimasukkan di tempat kode (mode HTML bukan COMPOSE)jika
CARA PARSE HTML

UNTUK HASILNYA SOBAT BISA LIHAT KOTA KODE YANG SAYA GUNAKAN ITU ADALAH KOTAK KODENYA :D

Sekian tutorial dari saya, semoga bermanfaat :D jika ada pertanyaan silahkan berkomentar dibawah.
KOMENTAR DISINI GAN!!

0 komentar