Berbagi cara lewat Tips & Trik

Ataeh memberikan uraian tentang CARA/KIAT/TRIK yang TEPAT untuk mempermudah anda

Semua Tentang Blogspot

Mengupas tentang Masalah Blog dan yang berhubungan dengan blog

Berbagi Template

Share template baik yang Premium atau Non Premium yang sudah pasti SEO

+62-815-1591-2694 Official WhatsApp Support

Cara Membuat Syntax Highlighter Pada Blog AMP Dengan Mudah

Syntax Highlighter Untuk Blog AMP 

Oke sobat, kali ini ATAEH akan memberikan tips tentang cara membuat Syntax Highlighter pada blog AMP dengan mudah.

Apa sih Syntax Highlighter itu?

Syntax Highlighter adalah fitur teks editor yang mempunyai kegunaan untuk menyoroti tampilan teks (Terutama Source Code) dalam bentuk yang berwarna. Adanya Fitur Syntax Highlighter ini sangat bermanfaat untuk mempermudah penggunanya di dalam menulis bahasa yang terstruktur seperti bahasa pemrograman atau bahasa markup atau pun sebuah kalimat penting yang ada dalam postingannya.

kira-kira beginilah bentuk tampilannya


Oke?

Mari kita lanjut pada langkah langkah pembuatan dan pemasangannya

1. Loginlah ke blog sobat, lalu ke tema dan edit HTML

2. Pasang kode CSS di bawah ini di atas </style> milik postingan/POST PAGE bukan milik hompage (supaya bisa memaksimalkan penggunaan CSS pada template AMP) atau kalau bingung taruh saja CSSnya di bawah <b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.pageType != &quot;error_page&quot;'>

/* 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:#ffffff;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:#ffffff;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',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
code {font-family:Consolas,Monaco,'Andale Mono',monospace;white-space:initial;word-spacing:normal;word-break:normal;font-size:14px;line-height:1.3em}
code{color:#BC587E}
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="ATAEH"]:before,
pre[data-codetype="JavaScriptku"]:before,pre[data-codetype="JQueryku"]:before{background-color:#fd9d0d;}

3. Kemudian klik simpan tema. berarti sobat sudah membuat CSS Syntax Highlighter

Kalau sobat mau membuat Syntax Highlighter dalam artikel sobat, sobat tinggal pakai pemanggilnya saja. Ini dia pemaggil Syntax Highlighter yang sudah sobat buat tadi

<pre data-codetype="ATAEH" title="CSS Syntax Highlighter">
<code class="language-markup">


masukkan Source Code sobat disini


</code></pre>

Untuk tulisan CSS Syntax Highlighter dalam kode CSS di atas, sobat bisa rubah menjadi tulisan apa saja, bisa HTML, CSS, Atau JQuery ataupun judul dari apa yang sobat postingkan.

Mungkin cukup sekian dulu tutorial Cara Membuat Syntax Highlighter Pada Blog AMP Dengan Mudah dari ATAEH, semoga sobat sukses semua dalam berkarya.

Semoga ada guna dan manfaatnya artikel ini.

Kalau ada yang perlu di pertanyakan silahkan tulis komentar di bawah. :)

Related Posts:

Buka Komentar

NEWSLETTER SIGNUP

Situs web ini menggunakan cookie untuk memastikan Anda mendapatkan pengalaman terbaik di situs web kami