kLAfYOEsUwKWcZE5EN4T8XHN0KE0jykePDkZX1nb
Cara Membuat Spoiler Valid Amp Html Blogger

Cara Membuat Spoiler Valid Amp Html Blogger

Fungsi spoiler adalah berfungsi menyembunyikan berbagai teks, script, gambar, ataupun video yang pengguna inginkan, dan bisa muncul bila mengeklik tombol spoiler tersebut.

Memasang spoiler itu penting karena bila ada script atau artikel yang panjang, kita bisa menyembunyikannya dengan fungsi spoiler tersebut.

Membuat spoiler di blog AMP Html itu berbeda caranya dengan yang di gunakan blog non amp, karena blog Amp tidak mendukung adanya javascript yang sama dengan blog non amp gunakan untuk membuat spiler. Tapi jangan khawatir, kita masih bisa menggunakan script amp-accordion untuk menjalankan spoiler dengan fungsi yang sama.

Cara membuat Spoiler di Blog AMP

Pastikan template blog anda sudah ada script amp-accordion, bila belum terpasang bisa anda salin script di bawah dan letakkan di atas kode </body>


<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>

Setelah itu tambahkan kode CSS di bawah ini pada template blog tepat di bawah kode <style amp-custom>

.spoiler-amp{margin:10px 0}
.spoiler-amp h4.spoiler-button{color:#444;font-size:14px;font-weight:bold;outline:none;margin:0;line-height:1.5em;border-radius:50px;padding:8px 30px;-moz-border-radius:50px}
.spoiler-amp h4.spoiler-button:before{content:"";position:absolute;left:15px;top:50%;margin-top:-7px;border:7px solid;border-color:transparent transparent transparent #444}
.spoiler-amp h4.spoiler-button:after{content:"002B";position:absolute;font-size:20px;line-height:20px;top:50%;margin-top:-10px;text-align:right;right:15px}
.spoiler-amp section[expanded] h4.spoiler-button:after{content:"2013"}
amp-accordion section{margin:10px 0}
.spoiler-amp amp-accordion div.isi{height:auto;margin:20px 10px;padding:0 0 0 20px;border-left:3px dotted #f0f0f0}

Untuk penerapan di dalam postingan, salin kode HTML berikut ini di tempat yang anda inginkan untuk menampilkan tombol spoiler.

<div class="spoiler-amp">
  <amp-accordion animate expand-single-section>
    <section>
      <h4 class='spoiler-button'>Contoh Spoiler Teks</h4> /* Judul Spoiler */
        <div class="isi">
        Masukkan teks kalian di sini.... /* Masukkan teks, gambar, atau video */
        </div>
    </section>
  </amp-accordion>
</div>

Perhatikan kode <amp-accordion>
  • animate : Berfungsi untuk memperhalus saat membuka spoiler.
  • expand-single-section : Gunakan kode ini saat ingin menggunakan 2 atau lebih spoiler dalam postingan. Intinya, bila spoiler pertama di buka akan menutup spoiler yang di buka lainnya, dan sebaliknya.

Bila anda ingin menampilkan kode HTML di dalam spoiler, pake kode HTML berikut ini.

<div class="spoiler-amp">
  <amp-accordion animate>
    <section>
      <h4 class='spoiler-button'>Contoh Spoiler Teks</h4> /* Judul Spoiler */
      <div class="isi">
      <pre><code>
      Code kalian di sini..... /* Parse Code terlebih dahulu */
      </code></pre>
      </div>
    </section>
  </amp-accordion>
</div>

Selanjutnya, bila anda ingin menggunakan lebih dari satu tombol spoiler, ikuti kode HTML berkut ini.

<div class="spoiler-amp">
  <amp-accordion animate expand-single-section>
    <section>
      <h4 class='spoiler-button'>Contoh Spoiler Teks</h4>
      <div class="isi">
      Masukkan teks kalian di sini....
      </div>
    </section>

    <section>
      <h4 class='spoiler-button'>Contoh Spoiler Teks</h4>
      <div class="isi">
      Masukkan teks kalian di sini....
      </div>
    </section>

    <section>
      <h4 class='spoiler-button'>Contoh Spoiler Teks</h4>
      <div class="isi">
      Masukkan teks kalian di sini....
      </div>
    </section>
  </amp-accordion>
</div>
Untuk lebih jelasnya, anda bisa melihat demo dengan klik Open JSFiddle di bawah.

Itulah Cara Membuat Spoiler Valid Amp Html Blogger. Terimakasih
SHARE

Related Posts

Subscribe to get free updates

Posting Komentar

Iklan Tengah Post