Cara Membuat Tampilan Blockquote seperti Kurazone - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Membuat Tampilan Blockquote seperti Kurazone

Pilihan Editor :

Cara Membuat Tampilan Blockquote seperti Kurazone
Penulis Bagus Surochman
0
Modus malam



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!!


nanio
Cara Membuat Tampilan Blockquote seperti Kurazone
Cara Membuat Tampilan Blockquote seperti Kurazone Cara Membuat Tampilan Blockquote seperti Kurazone Reviewed by Bagus Surochman on 9/01/2018

Tidak ada komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.