Cara Menampilkan Kode HTML Dalam Postingan Blog Blogger Mirip Gaya Text Editor Terbaru 2019

Cara paling jitu menampilkan kode HTML dalam postingan blog yang benar saat ini menurut saya pribadi yaitu dengan menggunakan JavaScript code prettifier. ini adalah script buatan google untuk tujuan tersebut yang dapat kita aplikasikan pada blog blogger. 

broyuda_Cara Menampilkan Kode HTML Dalam Postingan Blog Blogger Mirip Gaya Text Editor Terbaru 2019_0

Pada kasus tertentu, mungkin teman-teman ingin menyisipkan kode-kode seperti css, javascript, python, dan sejenisnya kedalam postingan blog untuk dapat dijadikan refrensi buat orang lain, dan pastinya dapat dicopy-paste layaknya text. Namun jika dilakukan tanpa menggunakan script seperti code prettifier ini, kemungkinan tampilan kode tersebut akan sama persis dengan tampilan jenis font artikel pada umumnya.

Pada beberapa template blog, baik itu blogger atau wordpress, pengembang template telah menyiapkan sistem penulisan tersebut, namun ada juga yang belum mendukung, karena itu kita perlu memasang script google code prettifier ini.

Di bawah ini contoh tampilan kode HTML dalam postingan blog yang menggunakan script code prettifier tadi. Tampilannya mirip dengan text editor yang biasa teman-teman gunakan bukan ?, misalnya visual code editor atau sublime text, kemudian kode-kode tersebut dapat juga kita copy-paste.


Contoh tampilan kode html dalam postingan blog

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}


Untuk informasi lebih detail tentang JavaScript code prettifier ini, silahkan baca selengkapnya disini


Baik, langsung saja teman-teman ikuti tahapan tutorial dibawah ini untuk menampilkan kode html tersebut dalam postingan blog kita.


1. Masuk ke dashboard blogger, 
2. lalu ke menu "Theme", 
3. kemudian pilih edit HTML
broyuda_Cara Menampilkan Kode HTML Dalam Postingan Blog Blogger Mirip Gaya Text Editor Terbaru 2019_1

4. lalu copy kode-kode template tersebut ke dalam text editor, seperti sublime text
5. Setelah berada di sublime text, tekan CTR + F pada keyboard untuk menampilkan kolom pencarian. 
6. Cari kode dibawah ini :
]]></b:template-skin>
7. Paste di kolom pencarian lalu tekan enter.
broyuda_Cara Menampilkan Kode HTML Dalam Postingan Blog Blogger Mirip Gaya Text Editor Terbaru 2019_2

8. Kemudian copy .CSS dibawah ini :

/* Pretty printing styles. Used with prettify.js. */
/* Vim sunburst theme by David Leibovic */

pre .str, code .str { color: #65B042; } /* string  - green */
pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
pre .typ, code .typ { color: #89bdff; } /* type - light blue */
pre .lit, code .lit { color: #3387CC; } /* literal - blue */
pre .pun, code .pun { color: #fff; } /* punctuation - white */
pre .pln, code .pln { color: #fff; } /* plaintext - white */
pre .tag, code .tag { color: #89bdff; } /* html/xml tag    - light blue */
pre .atn, code .atn { color: #bdb76b; } /* html/xml attribute name  - khaki */
pre .atv, code .atv { color: #65B042; } /* html/xml attribute value - green */
pre .dec, code .dec { color: #3387CC; } /* decimal - blue */

pre.prettyprint, code.prettyprint {
 background-color: #000;
 border-radius: 8px;
}

pre.prettyprint {
 width: 95%;
 margin: 1em auto;
 padding: 1em;
 white-space: pre-wrap;
}


/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #AEAEAE; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }

@media print {
  pre .str, code .str { color: #060; }
  pre .kwd, code .kwd { color: #006; font-weight: bold; }
  pre .com, code .com { color: #600; font-style: italic; }
  pre .typ, code .typ { color: #404; font-weight: bold; }
  pre .lit, code .lit { color: #044; }
  pre .pun, code .pun { color: #440; }
  pre .pln, code .pln { color: #000; }
  pre .tag, code .tag { color: #006; font-weight: bold; }
  pre .atn, code .atn { color: #404; }
  pre .atv, code .atv { color: #060; }
}

9. Paste-kan tepat diatas kode dibawah atau sebelumnya

]]></b:template-skin>

10. Selanjutnya masih di dalam sublime text, kamu cari kode </head> dengan cara pencarian menggunakan CTR+F

11. Lalu pastekan kode dibawah ini tepat diatas kode </head>

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

Seperti contoh dibawah ini

broyuda_Cara Menampilkan Kode HTML Dalam Postingan Blog Blogger Mirip Gaya Text Editor Terbaru 2019_3

12. Langkah selanjutnya kita pindahkan kembali kode template yang kita edit di sublime text ini ke dalam blogger. Caranya cukup menggunakan cara copy-paste pada umumnya, lalu buka blogger editor, masuk ke editor template HTML lalu paste kan kodenya.

13. Save template / theme. 

broyuda_Cara Menampilkan Kode HTML Dalam Postingan Blog Blogger Mirip Gaya Text Editor Terbaru 2019_4

14. Kemudian buat postingan baru untuk mencoba apakah bekerja atau tidak. caranya pilih menu postingan, kemudian buat postingan baru

15. Coba buat kalimat sederhana di baris pertama, lalu dibaris selanjutnya buat contoh kode-kode CSS atau Javascript .

broyuda_Cara Menampilkan Kode HTML Dalam Postingan Blog Blogger Mirip Gaya Text Editor Terbaru 2019_5






16. Harus teman-teman perhatikan dengan benar , tulis kode nya di halaman "compose" dulu ya, baru setelah itu diedit di halaman HTML.

17. Kemudian klik tombol halaman HTML, lalu tambahkan tag prettyprint dibawah ini dibagian awal dan akhir kode html yang ingin kita gunakan

<pre class="prettyprint">...</pre>

broyuda_Cara Menampilkan Kode HTML Dalam Postingan Blog Blogger Mirip Gaya Text Editor Terbaru 2019_6

18. Save postingan teman-teman atau publikasikan untuk melihat hasilnya. Pada contoh diatas hasilnya akan tampil seperti gambar dibawah ini 

broyuda_Cara Menampilkan Kode HTML Dalam Postingan Blog Blogger Mirip Gaya Text Editor Terbaru 2019_7

19. Selesai

Script JavaScript code prettifier ini memiliki 5 jenis tampilan/style yang bisa kita gunakan, untuk informasi lebih jelas tentang ini silahkan lihat disini

broyuda_Cara Menampilkan Kode HTML Dalam Postingan Blog Blogger Mirip Gaya Text Editor Terbaru 2019_8
Untuk teknik yang sebelumnya diatas kita pelajari, saya menggunakan template Sunburst, dengan background warna hitam full. 

Untuk mengganti template nya, teman-teman silahkan buka link salah satu dari 5 template diatas, kemudian copy kode CSS nya, dan paste seperti pada langkah nomor 9 diatas. 

Seperti itulah cara menampilkan kode HTML dalam postingan blog di blogger, semoga tutorial ini dapat bermanfaat untuk teman-teman yang tidak tau bagaimana caranya.

0 Response to "Cara Menampilkan Kode HTML Dalam Postingan Blog Blogger Mirip Gaya Text Editor Terbaru 2019"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel