[TERBARU] Cara Membuat Kotak Kode HTML Didalam Postingan Blog Dengan Mudah ✓

Cara-membuat-kotak-kode-HTML-di-dalam-postingan-blog


[TERBARU] Cara Membuat Kotak Kode HTML Di Postingan Blog Dengan Mudah ✓ - pada artikel sebelumnya, Mas Arif sudah share tutorial Cara memasang tag label keren dibawah postingan blog. Pada kesempatan kali ini, Mas Arif akan share tutorial Cara Membuat Kotak Kode HTML Di Postingan Blog Dengan Mudah. 

Sebagai seorang blogger tentunya kita harus mengetahui yang namanya script HTML, karena dengan mengetahui script HTML kita dapat dengan mudah merubah tampilan blog sesuai dengan keinginan kita.

Maka dari itu seorang blogger harus tau script HTML tersebut, karena jika tidak kita akan kewalahan untuk mempercantik tampilan blog tersebut.

Terlebih lagi bagi seorang blogger yang membahas tentang HTML, tentunya akan memakan tempat untuk menaruh Script HTML tersebut, maka dari itu bagi seorang blogger yang membahas tentang HTML harus membuat Kotak Kode HTML tersebut, guna nya agar tidak memakan tempat dan terlihat lebih rapih di blog tersebut.

Ada banyak sekali model untuk membuat kotak kode HTML tersebut, tetapi Mas Arif akan merekomendasikan kotak kode HTML yang satu ini untuk kalian, kotak Kode HTML yang Mas Arif Share ini, sering kali dipakai oleh para blogger. 

Nah bagi kalian yang ingin membuat kotak kode HTML tersebut, kalian datang ke blog yang tepat, karena Mas Arif akan share tutorial Cara Membuat Kotak Kode HTML Di Postingan Blog. Simak dibawah ini untuk membuat kotak kode HTML tersebut.

Cara Membuat Kotak Kode HTML
  • Pertama kalian masuk ke akun Blogger.
  • Jika sudah masuk ke akun blogger, maka langkah selanjutnya adalah kalian menuju ke Thema.
  • Jika sudah di Thema, maka langkah selanjutnya adalah kalian KLlK Edit HTML.
  • Jika sudah KLlK Edit HTML, langkah selanjutnya adalah kalian pastekan kode dibawah ini tepat diatas kode ]]></b:skin>.

/* CSS Syntax Highlighter */

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:#443e50;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-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;border-radius:3px;}

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:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px}

pre:after{display:inline-block;content:"f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}

pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Open Sans Condensed,Consolas,Monaco,monospace;font-size:.83rem;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;border-radius:2px;}

pre[data-codetype="CSSku"]:before,pre[data-codetype="HTMLku"]:before,

pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}


  • Jika sudah dipastekan, maka langkah selanjutnya adalah kalian simpan.
Untuk menggunakan nya di dalam postingan blog, maka kalian hanya tambahkan kode saja, cara nya adalah dibawah ini.
  • Pertama kalian buat Postingan
  • Kedua kalian ubah Compose menjadi HTML
  • Ketiga kalian pastekan kode dibawah ini

<pre data-codetype="CSSku" title="CSS"><code class="language-markup">Kodeanda di sini......</code></pre>

[PENTING]

Untuk mengganti Title CSS menjadi HTML, Kalian hanya ubah CSSku Menjadi HTMLku lalu kalian ubah juga Title CSS Menjadi HTML.

Untuk menaruh kode HTML nya, Kalian hanya mengganti tulisan kode anda di sini......  dengan Kode kalian, tetapi sebelum menaruh kode HTML nya kedalam kotak kode HTML, kalian harus parse kode kalian terlebih dahulu agar kode yang kalian taruh ke dalam kotak kode HTML tersebut berhasil.


  • Terakhir kalian Publikasikan
KESIMPULAN

Itulah cara membuat kotak kode HTML di dalam postingan blog, semoga artikel ini bermanfaat untuk kalian semua dan terimakasih buat kalian yang sudah berkunjung ke blog saya.

1 Response to "[TERBARU] Cara Membuat Kotak Kode HTML Didalam Postingan Blog Dengan Mudah ✓"

  1. sangat bermanfaat gan, kunjungan balik dari kubis.online, salam sukses... :-)

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel