Cara Membuat Blockquote Keren dengan CSS

Sebagai penulis mungkin beberapa dari kita pernah membuat blok catatan. Biasanya di dalam dunia markup language, blok catatan biasa dibuat menggunakan tag blockquote. Secara original (tanpa css) blockquote akan menampilkan teks dengan agak menjorok ke dalam.

Cara Membuat Blockquote Keren dengan CSS. Dokumen Pribadi

Kali ini saya akan membagikan bagaimana cara membuat blockquote yang keren dengan 3 style yang dapat kalian pilih sesuka hati. Style blockquote yang saya bagikan ini lebih ringan karena dibuat dengan CSS tanpa javascript.

Cara Membuat

Untuk membuatnya silakan masuk ke mode Edit HTML. Untuk blogger bisa ditemukan di menu Tema > Edit HTML. Lalu silakan cari tag </style> atau </b:skin> (untuk blogger). Setelah itu letakkan kode CSS berikut ini tepat sebelum tag </style> atau </b:skin>. Silakan pilih style yang Anda suka.

Style 1

Lorem ipsum dolor sit amet. Ini hanya contoh kutipan di dalam tag blockquote.
Ini adalah Blog Pencari Ilmu
Url blog ini adalah mbaguszulmi.com
jangan lupa share ya kawan-kawan

/*css blockquote by mbaguszulmi.com style1*/
blockquote {
    background: white; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(right bottom, #FAFAFA, #F2F2F2); /* Safari 5.1-6.0 */
    background: -o-linear-gradient(top left, #FAFAFA, #F2F2F2); /* For Opera 11.6 to 12.0 */
    background: -moz-linear-gradient(top left, #FAFAFA, #F2F2F2); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to top left, #FAFAFA, #F2F2F2); /* Standard syntax (must be last) */
    padding: 12px 12px 12px 0;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin: 20px 5px 5px 15px;
    display: flex;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
}
blockquote:before {
    content: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguq1wSchiJAl3YoassLcBnFdIAJ8YoGRj4hG0RoLMzmxYY6xBIZLSZ2vsma9B_UDWFt2Fk6ZSRIJy2Vy-7gzUUYjvRciKeFsXhGdBgYAtOOe0SOR544jtrRH7egemhN2eGjNR_v_dxJLU/s1600/klip-kertas.png");
    display: block;
    position: relative;
    left: -15px;
    top: -30px;
}
blockquote:hover {
    box-shadow: 0px 4px 2px 0px rgba(0, 0, 0, 0.2), 0 0px 7px 0 rgba(0, 0, 0, 0.19);
}

Style 2

Lorem ipsum dolor sit amet. Ini hanya contoh kutipan di dalam tag blockquote.
Ini adalah Blog Pencari Ilmu
Url blog ini adalah mbaguszulmi.com
jangan lupa share ya kawan-kawan

/*css blockquote by mbaguszulmi.com style2*/
blockquote {
    background: #3e4048;
    padding: 12px 12px 15px 20px;
    margin: 20px 5px 5px 5px;
    display: flex;
    color: #fff;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
}
blockquote:before {
    content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdEafe1gL1A7W5UL11NikYrnY-8zgXB3erYdqzWU2vKM5mo3FnW3rAd80_mxTldJnaBdvA8L-bJvJgVW3dSOAC5yh4HnyXvRSX9-NMarGvL4n1Bri_Awy0aCVapvzZzKwpDIUVUANV8dE/s50/quotation-marks.png');
    display: block;
    position: relative;
    left: -13px;
    top: -15px;
}
blockquote:after {
    content: '';
    display: block;
    position: absolute;
    width: 0%;
    height: 5px;
    background: #d2b30e;
    left: 0;
    bottom: 0;
    -o-transition: 1s;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
blockquote:hover:after {
    width: 100%;
}

Style 3

Lorem ipsum dolor sit amet. Ini hanya contoh kutipan di dalam tag blockquote.
Ini adalah Blog Pencari Ilmu
Url blog ini adalah mbaguszulmi.com
jangan lupa share ya kawan-kawan

/*css blockquote by mbaguszulmi.com style3*/
blockquote {
    background: #ebebeb;
    padding: 12px 12px 12px 20px;
    margin: 20px 5px 5px 5px;
    display: flex;
    color: #000;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    border-left: 5px solid #4eca2b;
}
blockquote:before {
    content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx5DAAe2wNEWd_7PVXZQXOFhs4UvqFXepbU_5UOoSsdWznG2xoNVmUkHXR1TZN2mUVWyMwQEsI8OvnAXfeIohRINudtLJZVN_IgSvA7He8OiBADLZ_3mf_-f0pgKMPaMkvG4Ur3d0m2Xc/s50/quotation-marks-black.png');
    display: block;
    position: relative;
    left: -13px;
    top: -15px;
}

Cara Menggunakan

Untuk membuatnya sangat mudah. Yaitu dengan meletakkan teks diantara tag blockquote. Contoh seperti berikut ini:

<blockquote>Ini adalah teks atau catatannya...</blockquote>

Mungkin itu saja untuk hari ini. Jangan lupa untuk share ke teman - teman lainnya agar lebih bermanfaat. Untuk yang masih bingung silakan komentar di bawah.