Skip to main content
Ivhaa Design

follow us

Cara Membuat Blockquote Efek Lipatan di Blogger

Bagaiman Membuat Efek Blockquote di Blog? Daripada penasran mari kita mulai tutorial berikut ini.

Baca juga:




Syukur alhamdulillah pada kesempatan kali ini saya bisa menulis lagi di blog ini. Blog kesayangan Ivhaa Network seperti oramg yang kita saya eh.emm.

Kalian pernah berkunjung ke blognya Arlina Design kan, pernah lihat blockquote seperti efek lipat. Jika pernah lihat salah satu artikel di blognya pasti tau dong ya.

Bagaiman Membuat Efek Blockquote di Blog? Daripada penasran mari kita mulai tutorial berikut ini.

Cara Membuat Blockquote Efek Lipatan di Blogger


  1. Seperti biasa kalian harus masuk ke akun Blogger kalian. Jika kalian belum punya blog bisa baca artikel saya Panduan : Cara Membuat Blog di Blogger dari A - Z.
  2. Kemudian pilih menu Tema setelah itu pilih Edit HTML.
  3. Setelah itu kalian masukan CSS Berikut ini dia atas kode </style> atau /]]</b:skin>
  4. /* CSS Blockquote Deny Listianto */
    .post-body blockquote{position:relative;width:100%;padding:1.2em 1.5em;margin:0 auto;color:#fff;background:#2ecc71;overflow:hidden}
    .post-body blockquote.orange{background:#f39c12}
    .post-body blockquote.crusta{background:#F2784B}
    .post-body blockquote.river{background:#3498db}
    .post-body blockquote:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0}
    .post-body blockquote.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
    .post-body blockquote.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
    .post-body blockquote.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}
  5. Kemudian Simpan Template. Jika kalian ingin memilih warna yang berbeda bisa gunakan kode HTML ini.

Warna 1
<blockquote class='tr_bq'>...ISI DENGAN CATATAN ANDA...</blockquote>
Warna 2
<blockquote class='orange'>...ISI DENGAN CATATAN ANDA...</blockquote>
Warna 3
<blockquote class='crusta'>...ISI DENGAN CATATAN ANDA...</blockquote>
Warna 4
<blockquote class='river'>...ISI DENGAN CATATAN ANDA...</blockquote>

Untuk demonya bisa lihat dibawah ini.
Demo Blockquote
Itulah tutorial singkat saya yaitu Cara Membuat Blockquote Efek Lipat di Blogger, Semoga bermanfaat dan Wassalam.

Soure : https://www.denylistianto.com/2018/06/memasang-catatan-dengan-efek-lipatan.html

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar