Cara Menciptakan Kotak Html Di Postingan Keren Ala Anakforum.Com

Kamis, 12 April 2018

Cara menciptakan kotak/kode keren - Pada Artikel kali ini aku akan membahas wacana bagaimana menciptakan kota instruksi keren ala anakforum.com, css ini aku ambil dari arlina desain, aku hanya memodif saja :D dengan kotak ini, kita sanggup menyeleksi semua instruksi dengan 2x klik tanpa harus manual seleksi, eksklusif saja kita ke tkp

pertama tama buka BLOGGER > TEMPLATE > EDIT TEMPLATE

kemudian copy dan paste  kode dibawah diatas instruksi </style> atau diatas instruksi ]]></b:skin> untuk gampang 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:'Source Code Pro',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="CSSku"]:before,pre[data-codetype="HTMLku"]:before,pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;}

masukkan instruksi ini di postingan teman dalam mode HTML untuk memanggil instruksi cssnya

<pre data-codetype="CSSku" title="Cara Membuat Kotak HTML di Postingan Keren ala Anakforum.com"><code class="language-markup">tempat kode</code></pre>

Catatan jikalau ingin mengganti kotak CSS dengan yang lainnya, kalian hanya sanggup memakai CSS HTML JavaScript JQuery

Caranya ganti CSSku dengan HTMLku , JavaScriptku , JQueryku

Sebelum teman memasukkan instruksi di kota kode, parse dulu instruksi nya. PARSE HTML DISINI . jika sudah di parse, masukkan kode/script yang ingin dimasukkan di tempat instruksi (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, agar bermanfaat :D jikalau ada pertanyaan silahkan berkomentar dibawah.

Sumber http://www.anakforum.com/

Share This :