Cara Membuat Kotak Khusus Code (Syntax Highlighter) Valid AMP di Blogspot

Thursday, January 2, 2020

Cara Membuat Kotak Khusus Code (Syntax Highlighter) Valid AMP di Blogspot

Arief
  • Permohonan maaf

    Arief Rahmat Pamungkas memohon maaf kepada siapapun yang pernah merasa tersakiti oleh Saya. Semoga Anda berkenan memaafkan semua kesalahan dan kekhilafan Saya. Terima kasih
  • Permohonan Doa

    Semoga semua dosa-dosa semasa Kang Arief Rahmat Pamungkas hidup diampuni oleh Allah SWT, dan diterima amal ibadahnya, aaamiiin.. Terima kasih telah mendo'akan dan mengaminkan.
  • 2009 - Magang

    Announcer
    C Radio 88.7 FM
    Kota Banjar
  • 2010 - Kontrak

    Pramuniaga
    Ria Busana Grup
    Kota Bandung
  • 2010-2013 (Mandiri)

    Wiraswasta
    Arief Pulsa
    Kota Bandung
  • 2013 - Sekarang (Tetap)

    Staff Cashier Collection
    Finance Accounting
    PT. SAT, Tbk
    Balaraja - Tangerang
Anda punya penawaran kerja sama?
sementara kosong

slot iklan



Apa itu Syntax Highlighter? Blogger baru seperti Saya mengartikan Syntax Highlighter adalah kotak khusus yang berisi kode.



Sehingga pada judul artikel Saya tulis Cara Membuat Kotak Khusus Code yang valid AMP. Tidak hanya valid untuk blog AMP, kode syntax highlighter ini juga bisa untuk blog non AMP.

Sub Menu Utama

Dalam tutorial Cara Membuat Kotak Khusus Code (Syntax Highlighter) Valid AMP di Blogspot ini Saya ingin menekankan pada manfaat syntax highlighter dan cara memasang syntax highlighting yang valid AMP.

Manfaat Syntax Highlighter


Syntax highlighting sangat membantu teman blogger yang membuat artikel dengan konten tutorial. Seperti tutorial blogger, wordpress, js, php, dll. Karena dengan adanya kotak khusus untuk menaruh kode, pembaca bisa membedakan kalimat artikel dengan kode-kode yang ada.

Syntax highlighter juga bisa membuat artikel teman blogger menjadi rapi dan tidak ada struktur blog yang menjadi eror. Karena jika kode-kode ditampilkan tanpa syntax highlighter dengan mengandalkan compose pada postingan artikel, bisa menyebabkan blog teman blogger menjadi tidak valid AMP.

Memasang Syntax Highlighter


Cara memasang syntax highlighter di blogspot yang valid AMP sangat mudah. Cukup 5 langkah, syntax highlighting di blog AMP sudah bisa. Dan teman blogger bisa membuat tutorial-tutorial dengan penempatan kode yang mudah dibaca.

Pertama silakan cadangkan template teman blogger untuk mengantisipasi kesalahan (eror) style amp-custom is too long saat di uji di validator AMP. Jika template teman blogger sudah di cadangkan, ketika terjadi eror tidak valid AMP karena style-amp is too long, teman blogger tinggal memulihkan template cukup dengan mengupload ulang.

Kedua masuk ke menu tema > pilih edit html.

Ketiga silakan cari kode style amp-custom='amp-custom'. Untuk mempermudah pencarian, teman blogger bisa mempergunakan ctrl + f. Kemudian copy kode css dibawah ini tepat dibawah style amp-custom='amp-custom' ya.


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:#ffffff;display:block;margin:0;text-indent:15px}
pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;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;color:#fff;padding:2px;margin:0 2px;border-radius:2px;}pre[data-codetype="CSSku"]:before,pre[data-codetype="arief"]:before,pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#000;}

Keempat silakan teman blogger save template.

Kelima silakan teman blogger untuk memasukkan kode yang ingin anda tampilkan, dengan masuk ke postingan > new entry (post baru) > masuk ke menu/mode html, bukan compose. Kemudian copy dan paste kode berikut di mode html postingan.

<pre data-codetype="arief" title="Kode CSS">
<code class="language-markup">
isi dengan kode yang ingin anda tampilkan disini
</code></pre>

Untuk melihat hasilnya, klik pratinjau.
Results (hasil/demo) :

Mudah bukan? Itulah Cara Membuat Kotak Khusus Code (Syntax Highlighter) Valid AMP di Blogspot yang Saya terapkan pada blog Saya ini yang juga menggunakan template AMP.

Jika ada kendala, silakan teman blogger bisa bertanya di kolom komentar. Jika bermanfaat, silakan share. GRATIS.