Cara Membuat Kotak Script Valid AMP di Blogger Desain Scroll
Penulis :
Seosmall.com - Menyediakan kotak script/kode pada halaman postingan blog adalah wajib, apalagi jika blog Anda berbasis tutorial coding. Karena sebagai tempat peletakan tulisan atau kode yang nantinya akan dicopas.
Sebagai seorang blogger, terkadang kita harus mendesain secantik mungkin blog kita namun tetap harus memperhatikan kecepatan. Oleh karena itu template AMP menjadi solusinya.
Namun pada template yang valid AMP tidak semuannya bisa menerima kode CSS seperti tag important! apalagi javascript. Karena itu jika kita menggunakan platform blogger sebagai basis blog kita, kita harus memerlukan tenaga lebih untuk sekedar merombak template agar tetap valid AMP.
Untuk DEMO dari kotak script ini bisa dilihat pada Screenshot dibawah ini,
Langkah #1 Pertama silahkan letakkan kode ini dibawah kode
<style amp-custom='amp-custom'> pada template AMP Anda.Select All
<b:if cond='data:view.isSingleItem'>pre,pre code{white-space:pre;overflow:auto}code .token.important,pre::before{font-weight:700}code,pre{word-break:normal;-khtml-user-select:text}pre{padding:33px 0 0;margin:.5em auto;word-wrap:break-word;background-color:#443e50;position:relative;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;-webkit-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:6px}code::-moz-scrollbar,code::-webkit-scrollbar,pre code::-moz-scrollbar,pre code::-webkit-scrollbar,pre::-moz-scrollbar,pre::-webkit-scrollbar{display:none}pre::before{font-size:15px;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#fff;display:block;margin:0;text-indent:15px}pre code{display:block;background:0 0;border:none;color:#bec3ce;padding:25px 20px 20px;font-size:.83rem}code .token.entity{cursor:help}code{white-space:initial;word-spacing:normal;font-size:14px;line-height:1.3em;color:#bc587e;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}code mark,pre code mark,pre mark{background-color:#3498db;color:#fff;padding:2px;margin:0 2px;border-radius:2px}pre[data-codetype=K0de]:before{background-color:#25d366}</b:if>Kode
<b:if cond='data:view.isSingleItem'> … </b:if> di atas fungsinya adalah sebagai tag kondisional bawaan blogger. Dengan begitu dengan Adanya tag ini akan membuat kode CSS ini hanya akan load pada halaman posting saja. Untuk lebih jelasnya silahkan baca Tag Kondisional Blogger Terbaru.Tujuannya tidak lain adalah untuk memaksimalkan kecepatan blog, karena CSS hanya diload dihalaman posting saja. Jika sobat ingin menghilangkan kode ini silahkan saja tidak apa-apa.
Langkah #2 Selanjutnya untuk penggunaan kode ini adalah dengan posting di Mode HTML, jangan Compose
Select All
<pre data-codetype="K0de" title="JUDUL DISINI"><code class="language-markup">DISINI ADALAH KODE ANDA...</pre></code>
Ganti tulisan DISINI ADALAH KODE ANDA... dengan tulisan yang ingin Anda gunakan dan judul pada JUDUL DISINI. Jika terjadi error silahkan parse dahulu kode Anda. Sudah selamat mencoba.
Note !
Kode diatas juga bisa dipakai untuk blog yang menggunakan template Non AMP. Silahkan dipasang diatas kode]]></b:skin> pada template Non AMP Anda.
Jika Anda ingin menambahkan event SelectAll on Click (Seleksi semua dengan satu kali klik), silahkan tambahkan atributte
OnClick="document.execCommand('selectAll',false,null)"
Sehingga penampakan lengkap kodenya seperti berikut :
Select All
<pre data-codetype="K0de" title="JUDUL DISINI"><code class="language-markup" onClick="document.execCommand('selectAll',false,null)">DISINI ADALAH KODE ANDA...</pre></code>Catatan !
Action SelectAll onClick diatas tidak akan support jika digunakan pada template AMP, karena akan error. Untuk pilihan action SELECT ALL ON CLICK diatas hanya bisa digunakan pada template Non AMP saja. Lumayan kan dari pada menggunakan select all versi javascripts tentunya akan menambah loading blog Anda. Selamat mencoba, Salam!