Cara Membuat Tampilan Blockquote seperti Kurazone

KURAZONE ~ Halo sahabat Kurazer, bagaimana kabar kalian? Masih baik-baik saja kan? Pada kesempatan kali ini kita akan belajar mengenai Cara Membuat Tampilan Blockquote seperti Kurazone. Blockquote pada blog memiliki peran yang unik dalam menyampaikan pesan penting atau argumen pada postingan, seperti dibawah ini :

Cara Membuat Tampilan Blockquote seperti Kurazone

1. Buka akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Cari kode </style> atau ]]></b:skin>
3. Copy kode CSS dibawah ini, lalu letakkan (paste) diatas kode </style> atau ]]></b:skin>

blockquote {
    background: #007bfd;
    color: white;
    border-left: 2px solid #123456;
    font-size: 15px;
    position: relative;
    padding: 1.2em 1.5em;
    margin: 1em auto;
    overflow: hidden;
    text-align: left;
    word-spacing: 0;
}
blockquote:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 16px 16px 0;
    border-style: solid;
    border-color: #fff #fff #123456 #123456;
    display: block;
    width: 0;
}

4. Simpan Template

Note :
1. Silahkan kalian ganti kode warna yang telah ditandai,
kode warna bisa dilihat disini >> Color Picker
2. Apabila ingin menggunakan gradasi warna pada background, maka ubah kode background nya menjadi seperti dibawah ini :

background: linear-gradient(to top,orange,red);
Lalu ganti tulisan "orange" dan "red" nya

3. Penggunaan 'blockquote' sangatlah mudah, masuk ke postingan lalu blok tulisan yang ingin dijadikan blockquote, klik ikon (blockquote)
4. Sisanya bisa kalian eksplor sendiri, selamat berkarya

DEMO :

Ini adalah contoh model blockquote yang dipakai kurazone

Ini adalah contoh model blockquote yang sudah dimodif versi 1 (warna solid)

Ini adalah contoh model blockquote yang sudah dimodif versi 2 (warna solid)

Ini adalah contoh model blockquote yang sudah dimodif versi 3 (warna solid)

Ini adalah contoh model blockquote yang sudah dimodif versi 4 (warna solid)

Ini adalah contoh model blockquote yang sudah dimodif versi 5 (warna solid)

Ini adalah contoh model blockquote yang sudah dimodif versi 6 (warna gradasi)

Ini adalah contoh model blockquote yang sudah dimodif versi 7 (warna gradasi)

Ini adalah contoh model blockquote yang sudah dimodif versi 8 (warna gradasi)

Itulah informasi mengenai "Cara Membuat Tampilan Blockquote seperti Kurazone", selamat mencoba dan semoga bermanfaat. Goodluck!!