Cara Memasang Blockquote (Catatan) Dengan Pengaruh Lipatan

Apa itu Blockquote ? Blockquote atau biasa di sebuat kotak catatan ialah kotak yang dipakai untuk mengimbangi teks atau konten dalam bab teks secara visual.

 Blockquote atau biasa di sebuat kotak catatan ialah kotak yang dipakai untuk mengimban Cara Memasang Blockquote (Catatan) dengan Efek Lipatan

Sebagian besar pengguna blogspot masih gres dan tidak tahu ihwal HTML dan CSS. Tetapi semua orang ingin menciptakan template blognya indah dan menarik. Gaya blockquote default blogspot tidak dirancang dengan baik untuk digunakan.

Jadi, untuk pemula, aku menerbitkan posting ini dengan arahan CSS gratis dan tutorial Cara Menggunakanya.

Bagi yang ingin tau dengan tampilanya, berikut ini ialah referensi tampilanya.

Ini ialah blockquote blog ini supaya sanggup menjadi referensi dan pandangan gres untuk para blogger.

Jika ingin mencobanya silahkan ikuti langkah-langkah berikut ini.

Memasang Blockquote (Catatan) dengan Efek Lipatan


1. Buka Blogger.com dan Login.
2. Pindah ke sajian Tema, Lalu Klik Edit HTML.
3. Letakkan arahan di bawah ini sebelum </b:style> atau </style>.

/* CSS Blockquote  */ .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}

4. Simpan Tema. Kemudian untuk menambahkan catatan Anda cukup pilih salah satu arahan HTML di bawah dengan 4 pilihan warna lalu tambahkan di dalam postingan pada tab HTML.

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> 

Berikut ini ialah hasil dari langkah-langkah yang telah kita coba di atas.


Bagaimana? Praktis bukan, sekian artikel Memasang Catatan dengan Efek Lipatan. Semoga bermanfaat.

Salam Blogger!!
Sumber https://www.denylistianto.com/

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel