Hot Info

Cara Mudah Install Prism Syntax Highlighter di Blogger

Kali ini Awak Bambi akan berbagi artikel " Cara Install Prism Syntax Highlighter di Blogger " mungkin sebagian atau kebanyakan para blogger sudah tidak asing lagi dengan cara ini, tetapi masih banyak juga yang belum mengetahuinya, maka artikel ini saya sajikan untuk para pemula.

Metode ini biasa digunakan oleh setiap blogger ketika ingin mendistribusikan kode java script, CSS, jQuery di setiap pos ketika kita membutuhkan sebuah kotak untuk menyimpan kode untuk membuatnya terlihat rapi dan exciting. Mungkin dengan menerapkan metode Cara Memasang Prism Syntax Highlighter di Blogger maka blog atau situs anda akan lebih terliat profesional jika dipandang oleh para pengunjung, dan langsung saja kalian simak langkah-langkah di bawah ini.

Cara Memasang Prism Syntax Highlighter di Blogger terbaru 2016
Prism.js Syntax Highlighter

Cara Menerapkap Prism Syntax Highlighter di Blogger:

1. Ok langsung saja silahkan anda pergi ke Blogger Template >> Edit HTML Kemudian copy kode dibawah dan paste tepat diatas </style> jika kode </style> lebih dari satu maka pilihlah yang pada kode </style> yang no 2.

/ * CSS Syntax Highlighter dengan penomoran fitur * / pre { padding: 50px 10px 10px 10px; margin: .5em 0; white-space: pre; word-wrap: break-word; overflow: auto; background-color: # 2c323c; position: relative; border-radius: 4px; max-height: 500px; } pra :: sebelum { font-size: 16px; konten: attr (judul); position: absolute; top: 0; background-color: #eee; padding: 10px; kiri: 0; kanan: 0; Warna: # fff; text-transform: huruf besar; display: block; margin: 0 0 15px 0; font-weight: bold; } pra :: setelah { konten: 'Double klik untuk pilihan'; padding: 2px 10px; width: auto; height: auto; position: absolute; kanan: 8px; top: 8px; Warna: # fff; line-height: 20px; transisi: semua 0.3s kemudahan-in-out; } pre: hover :: setelah { opacity: 0; top: -8px; visibilitas: terlihat; } kode { font-family: Consolas, Monako, ' Andale Mono ',' Courier New ', Courier, Monospace; line-height: 16px; color: # 88a9ad; background-color: transparent; padding: 1px 2px; font-size: 12px; } pra kode { display: block; background: none; border: none; color: # E9E9E9; arah: ltr; text-align: left; Kata-spacing: normal; padding: 0 0; font-weight: bold; } Kode .token.punctuation { Warna: # ccc; } pra kode .token.punctuation { Warna: #fafafa; } Kode .token.comment, kode .token.prolog, kode .token.doctype, kode .token.cdata { color: # 777; } Kode .namespace { opacity: 0,8; } Kode .token.property, kode .token.tag, kode .token.boolean, kode .token.number { color: # e5dc56; } Kode .token.selector, kode .token.attr-nama, kode .token.string { color: # 88a9ad; } kode pra .token.selector, pre kode .token.attr-nama { Warna: #fafafa; } pra kode .token.string { color: # 40ee46; } Kode .token.entity, kode .token.url, pra .language-css .token.string, .style .token.string pra { Warna: # ccc; } Kode .token.operator { color: # 1887dd; } Kode .token.atrule, kode .token.attr-nilai { color: # 009999; } kode pra .token.atrule, pre kode .token.attr-nilai { color: # 1baeb0; } Kode .token.keyword { color: # e13200; font-style: italic; } Kode .token.comment { font-style: italic; } Kode .token.regex { Warna: # ccc; } Kode .token.important { font-weight: bold; } Kode .token.entity { kursor: membantu; } pre tanda { background-color: # ea4f4e penting;! ! Warna: # fff penting; padding: 2px; border-radius: 2px; } mark kode { background-color: # ea4f4e penting;! ! Warna: # fff penting; padding: 2px; border-radius: 2px; } mark pra kode { background-color: # ea4f4e penting;! ! Warna: # fff penting; padding: 2px; border-radius: 2px; } .comments pra { padding: 10px 10px 15px 10px; background: # 2c323c; } .comments pra :: sebelum { konten: 'Kode'; font-size: 13px; position: relative; top: 0; background-color: # f56954; padding: 3px 10px; kiri: 0; kanan: 0; Warna: # fff; text-transform: huruf besar; display: inline-block; margin: 0 0 10px 0; font-weight: bold; border-radius: 4px; border: none; } .comments pra :: setelah { font-size: 11px; } .comments pra kode { Warna: #eee; } .comments pre.line-angka { padding-left: 10px; } pre.line-angka { position: relative; padding-left: 3.0em; kontra-ulang: linenumber; } pre.line-nomor> kode { position: relative; } .line-nomor .line-nomor-baris { height: 100%; position: absolute; pointer-acara: none; top: 0; font-size: 100%; kiri: -3.5em; width: 3em; -WebKit-pengguna pilih: none; -moz-user-pilih: none; -MS-user-pilih: none; padding: 0; } .line-nomor-baris> rentang { pointer-acara: none; display: block; kontra-increment: linenumber; } .line-nomor-baris> rentang: sebelum { konten: counter (linenumber); color: # 999; display: block; padding-right: 0.8em; text-align: right; transisi: 350ms; } pra [Data-codetype = 'CSSku']: sebelum { background-color: # 00a1d6; } pra [Data-codetype = 'HTMLku']: sebelum { background-color: # 3cc888; } pra [Data-codetype = 'JavaScriptku']: sebelum { background-color: # 75d6d0; } pra [Data-codetype = 'JQueryku']: sebelum { background-color: # e5b460; }

2. Setelah itu simpan 3 kode di bawah tepat sebelum </body> atau </head>.

JavaScript




jQuery



jQuery



3. Simpan template.

4. Dan kemudian ketika anda membuat posting baru, silahkan terapkan salah satu dari empat ( 4 ) kode panggilan dibawah ini pada mode Tab HTML.

<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> ....AWAK BAMBI.... </code></pre>

<pre data-codetype="CSSku" title="CSS"><code class="language-css"> ....AWAK BAMBI.... </code></pre>

<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"> ....AWAK BAMBI.... </code></pre>

<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript"> ....AWAK BAMBI.... </code></pre>

5. Ganti ....AWAK BAMBI.... dengan text atau kode yang kalian inginkan.

6. Dan hasilnya akan seperti gambar di bawah ini.

Cara Memasang Prism Syntax Highlighter di Blogger terbaru 2016
Prism.js Syntax Highlighter
<<<<<  SELESAI  >>>>>

Semoga artikel Cara Memasang Prism.js Syntax Highlighting di Blogger atau Website bisa berguna dan bisa membantu membuat artikel atau postingan anda lebih profesional dan rapi. Semoga Bermanfaat.....!!!!
,Cara Mudah Memasang Prism Syntax Highlighter di Blog, Menyematkan Prism Syntax Highlighter di Blog Terbaru 2016, Memasang Prism Syntax Highlighter di Blogger, PRISM SyntaxHighlighter untuk Blogger, Memasang Prism Syntax Higlighter pada Blog, Prism Syntax Highlighter Sederhana untuk Blogger, Cara Membuat prism Syntax Highlighter Di Blogger, Memasang Syntax Highlighting prism.js di Blogger atau Website, Syntax Highlighter dengan Prism.js pada Wordpress, Cara Memasang Syntax Highlighter dengan Prism.js pada Wordpress, Tutorial Memasang Prism.js Di Blogger Prism.js pada blog, Tutorial Memasang Prism.js Di Blogger Prism.js di wordpress, Efek Warna-Warni SyntaxHighlighter untuk Penyajian Kode

No comments