Kotak Catatan Blockquote Keren ala Oom

Pada tutorial kali ini kita akan membuat kotak catatan atau blockquote yang keren dan responsif ala Oom Blogger. Sudah tahu kan kegunaan blockquote?

Kotak catatan di Blogger atau yang lazim disebut blockquote sangat penting kegunaannya saat ngeblog. Dengan blockquote kamu bisa menambahkan catatan singkat, pranala luar, catatan kaki (footnote), atau apa saja sesuai kebutuhan.

Umumnya blockquote diletakkan pada bagian tengah atau bawah tulisan. Desain, pemilihan font, dan warna blockquote biasanya lebih mencolok dibandingkan kontennya. Hal ini bertujuan agar pembaca menyadari ada hal penting yang harus dibaca.

Setiap template punya desain blockquote masing-masing. Ada yang sederhana, dan ada juga yang tampak modern dengan efek javascript yang canggih. Semuanya kembali ke selera kamu.

Kebetulan template yang saya pakai saat ini yakni VioMagz punya desain tampilan blockquote yang terlampau sederhana. Desain monoton dengan warna yang cenderung flat dan membosankan.

Setelah berputar-putar mencari desain blockquote yang sekiranya cocok dengan blog Oom.web.id yang menganut flat UI color, akhirnya saya menemukan desain blockquote yang menarik. Desain ini saya ambil dari salah satu template buatan IDNtheme.

Cara Memasang Script Blockquote ala Mas Aping

Langsung saja kita masuk ke pembahasan utama, yakni bagaimana cara memasang kode atau script blockquote yang keren dan responsive la Blog Mas Aping ini.

Bukalah dashboard Blogger kamu lalu pilih menu Theme - Edit HTML.

Tambahkan script di bawah ini sebelum ]]></b:skin> :

.post-body blockquote {
    background: #f1e791;
    color: #222;
    padding: 1em 15px;
    border-radius: 10px;
    position: relative;
    margin: .5em auto;
    font-style:italic;
    text-align: left
}

blockquote:before {
    content: '';
    display: block;
    height: 2em;
    position: absolute;
    bottom: -.9em;
    left: 0;
    top: auto;
    background: transparent;
    border: 1em solid transparent;
    border-left-color: #f1e791;
    opacity: 1
}

Tekan tombol Save untuk menyimpan perubahan. Saat kamu ingin memasang kotak catatan ini di blog, blok semua bagian yang akan dimasukkan ke dalam kotak catatan lalu klik tombol ❝ (Quote) yang ada di toolbar.

Contoh demo:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Bagaimana? Lebih menarik, kan? Desain kotak catatan ini responsif di semua ukuran layar. Jadi kamu tidak perlu khawatir lagi.

Jika tampilan kotak blockquote kamu tidak berubah, cari dan hapus semua baris kode :

.post-body blockquote
    ...
    ...
    ...
}

Selamat mencoba!