Hallo,Sobat Giri Blog's kembali lagi saya akan membagikan sebuah Artikel mengenai Cara membuat Syntax Highliter di blog ,Syntax Highliter ini dapat mempermudah sobat dalam hal menulis kode-kode baik Kode HTML ,CSS Atau pun Javascript.
Syntax ini sangat ringan di karenakan di buat dengan CSS3 Murni,dan HTML 5 tentu tidak akan menggangu kinerja dari loading blog sobat ,Malah akan menambah kesan keren pada blog sobat.
Selain Ringan Syntax Ini Juga Responsive ,Karena sobat dapat melihat syntax ini di berbagai macam ukuran device ,di buktikan dengan Tombol scroll ke samping
Sedikit penjelasan untuk penerapan CSS Di Snytax Highliter ini sobat hanya perlu Menaruh kode CSS Di bawah <pre><code></pre></code> sebaliknya jika sobat ingin meletakan Kode HTML Maka sobat di haruskan untuk memparse Kode Tersebut agar terlihat hasilnya Jika tidak maka kode HTML sobat Akan di anggap sama oleh blogger,Jangan Lupa juga masukkan kode Yang telah di parse tadi sama pada kode <pre><code></pre></code>
Bagi sobat yang tertarik untuk menerapkanya di blog silahkan ikuti langkah berikut.
1.Masuk Ke Blogger > Tema > Edit HTML
2.Copy dan letakkan kode CSS Berikut tepat di atas tag <b:skin> atau </style>
.post-body pre{background-color:#263238;border:1px solid #00695c;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;position:relative;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-hypens:none;-moz-hypens:none;hypens:none;}
.post-body pre code{color:#009688;font-size:12px;max-height:250px;line-height:1.5em;display:block;background:none;font-family:monospace;border:none;padding:10px 15px;white-space:pre-wrap;overflow:auto;user-select:text;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}
3. Simpan
4.Untuk Pengetesan Pemanggilan Gunakan Kode Berikut
<pre><code>CSS ATAU HTML </code><pre>
5. Selesai
Sekian Postingan Kali Ini ,Tunggu Postingan Yang Pastinya Menarik Hanya di blog ini
Share This :
comment 0 comments
more_vert2. Untuk Kode HTML Bisa di parse terlebih dahulu sebeulum Di Publish
3.Di larang Mencantumkan URL Yang berbau Porno,Judi,Sara
4.Hargailah Komentar Orang Lain
:: SELAMAT BERKOMENTAR::