Skip to main content
YUUARI

follow us

Cara Membuat Kotak Catatan di Blog, Valid AMP dan Non AMP

Bila kamu memiliki tulisan penting dalam artikel blog, kamu bisa menggunakan blockquote untuk memperjelas infomasi penting dalam artikel, tapi blockquote bawaan dalam tema terkadang tidak terlalu menarik dan terkadang pengujung tidak membaca info penting yang kamu berikan pada blockquote tersebut.

Jadi kamu bisa menggunakan atau memakai kotak catatan berwarna dalam postingan di blog, supaya pembaca kalian melihat dan membaca tulisan penting yang kamu berikan.

Kode yang saya berikan ini, saya dapat dengan hasil inspect element atau page source pada template igniplex dan warna yang bisa di pilih pada postingan empat warna yaitu Box green, Box blue, Box red, dan Box yellow.

Cara ini bisa di terapkan kepada blog non AMP dan AMP. Saya sudah mengetesnya sendiri dan saya terapkan pada blog saya ini. Oke, langsung saja simak langkah-langkah pembuatan kotak catatan berwarna.

Cara Memasang Kotak Catatan pada Tema Blog


Non AMP

1. Buka blog kamu
2. Pergi kemenu Tema dan pilih Edit HTML
3. Salin kode yang saya berikan di bawah ini dan Untuk Non AMP kalian bisa meletak kode tepat di atas kode ]]></b:skin>

.post-body .box{
    padding:10px;
    margin:20px 0px;
    border-radius:7px;
    }
    .post-body .box.green{
    color:#155724;
    background-color:#d4edda;
    border:1px solid #c3e6cb;
    }
    .post-body .box.blue{
    color:#004085;
    background-color:#cce5ff;
    border:1px solid #b8daff;
    }
    .post-body .box.red{
    color:#721c24;
    background-color:#f8d7da;
    border:1px solid #f5c6cb;
    }
    .post-body .box.yellow{
    color:#856404;
    background-color:#fff3cd;
    border:1px solid #ffeeba;
    }
4. Lalu klik Simpan Tema

Valid AMP

1. Sama dengan langka kedua pada Non AMP pergi kemu Tema dan pilih Edit HTML
2. Salin kode dibawah dan untuk AMP, cari kode <style amp-custom='amp-custom'> dan letakan kode dialam kode /*<![CDATA[*/

.post-body .box{
    padding:10px;
    margin:20px 0px;
    border-radius:7px;
    }
    .post-body .box.green{
    color:#155724;
    background-color:#d4edda;
    border:1px solid #c3e6cb;
    }
    .post-body .box.blue{
    color:#004085;
    background-color:#cce5ff;
    border:1px solid #b8daff;
    }
    .post-body .box.red{
    color:#721c24;
    background-color:#f8d7da;
    border:1px solid #f5c6cb;
    }
    .post-body .box.yellow{
    color:#856404;
    background-color:#fff3cd;
    border:1px solid #ffeeba;
    }

3. Bila belum paham bisa cek gambar dibawah ini

4. Selanjutnya klik Simpan Tema

Cara Penulisan Kotak Catatan di Postingan Blog

Setelah memasang kode yang di perlukan pada blog, selanjutnya ke cara penulisan di dalam postingan. Silakan buat postingan atau edit postingan yang sudah ada, kemudian cara penulisan tambahkan kode di bawah ini ke tab HTML.
Box green.

Cara pakai:
<div class="box green">Isi tulisan</div>
Box blue.

Cara pakai:
<div class="box blue">Isi tulisan</div>
Box red.

Cara pakai:
<div class="box red">Isi tulisan</div>
Box yellow.

Cara pakai:
<div class="box yellow">Isi tulisan</div>

Bagaimana mudah bukan tutorial kali ini, Cara Membuat Kotak Catatan di Blog, Valid AMP dan Non AMP. Semoga artikel ini bisa membantu dan terimakasih.

You Might Also Like:

Comment Policy: Tinggalkan jejak tuliskan anda di komentar yang sesuai dengan topik postingan halaman ini. Komentar yang terdapat link tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar