Cara Modifikasi Tampilan Blockquote/ Catatan di Postingan Blog Menjadi Lebih Keren

Santos el Salam

11 Februari 2021

Setelah membahas tentang cara pemasangan syntax highlighter di postingan blog, kali ini saya ingin membahas tentang cara modifikasi fitur blockquote. Meski sepintas hampir sama dengan syntax highlighter, fitur blockquote ini sebenarnya berfungsi untuk kalimat kutipan, mempertegas isi tulisan/paragraf, atau untuk menggaris bawahi sebuah kalimat penting agar mudah dipahami oleh pembacanya. Dengan kata lain, ada penekanan khusus pada kalimat di fitur blockquote ini sehingga dibuat berbeda. 

Salah satu ciri fitur blockquote ini biasanya kalimat dibuat menjorok ke dalam dari batas tepi kiri dan tepi kanan area postingan. Ciri lainnya yaitu penggunaan font khusus, warna latar, atau adakalanya kalimat tersebut disertai dengan tanda kutip pada awal dan akhir kalimat untuk membedakannya dengan kalimat lain di dalam postingan. Tujuannya tentu saja untuk menunjukkan bahwa kalimat tersebut benar-benar perlu dipahami karena bisa jadi merupakan kata kunci dari keseluruhan isi artikel. 

Meski begitu, fitur ini sebenarnya bisa diisi atau dipakai untuk apa saja tergantung penulisnya. Saya sendiri justru sering menggunakan fitur ini untuk meletakkan kode-kode script html, css, javascript, dsb, ketika membahas artikel seputar tutorial ngeblog. Kadang juga saya menggunakan fitur blockquote ini untuk menambahkan link internal (baca juga) secara manual sebagaimana fungsi dari widget related post. 

Berbeda dengan syntax highlighter, fitur blockquote ini sebenarnya telah tersedia pada menu edit postingan blogger, jadi kita tidak perlu lagi membuatnya. Hanya saja, tampilan blockquote default blogger ini biasanya standar sehingga banyak blogger memodifikasinya lagi. Kita bisa mengubah tampilannya agar menjadi semakin menarik dengan cara mengedit kembali pengaturan CSS untuk fitur blockquote tersebut. Bagaimana caranya?, silahkan ikuti tutorial di bawah ini. 

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Terlebih dulu silahkan cari pengaturan CSS untuk blockquote di template blog anda. Misalnya seperti berikut ini:

blockquote {... ...  

Atau

.post-body blockquote{ ... ... 

Kalau sudah ketemu, silahkan hapus saja kode tersebut agar nantinya tidak bentrok dengan pengaturan CSS blockquote baru yang hendak anda buat.

3. Selanjutnya cari kode ]]></b:skin> atau </style> kemudian silahkan anda copy salah satu script kode dari pilihan 5 style di bawah ini dan letakkan di atasnya.

Style 1

blockquote{margin:0.25em 0;padding:15px 20px 15px 50px;line-height:1.45;color:#333;border-left: 12px solid #c0c0c0; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy5eY96bYuGwLVtl6KbeNlm-JL3PNq3r8zAggHtfdaC3r0e3u44YNJyobJmCtV6ehptR5QwDRdXq0IhwyvB2S5LqJDiqmgJGkd1ZG8obDB5a4J2NolhCnlHDzyyZE-arYz8IlML1szuLw/s1600/bg-blockquote.gif) no-repeat 15px 18px;clear:both}

Style 2

blockquote{display:block;background: #fff;margin: 0px 50px 0px 50px;padding: 30px 30px 30px 50px;position: relative;font-family: Georgia, serif;font-size: 20px;line-height: 1.2em;color: #666;text-align: justify;border-left: 15px solid #c76c0c;-moz-box-shadow: 2px 2px 15px #ccc;-webkit-box-shadow: 2px 2px 15px #ccc;box-shadow: 2px 2px 15px #ccc;} 

blockquote::before{content: “201C”; font-family: Georgia, serif;font-size: 60px;font-weight:bold;color: #999;position: absolute;left: 10px;top:5px;} blockquote::after{content: “”;} blockquote a{text-decoration: none;background: #eee;cursor: pointer;padding: 0 3px;color: #c76c0c;} blockquote a:hover{color: #666;} blockquote em{font-style: italic;}

Style 3

blockquote {font-family: "Merriweather", Georgia, serif;font-style: italic;padding-left: 35px;padding: 17px 58px 20px 55px;font-size: 16px;text-align:left;font-weight: 300;color: #333;background: #F2E4A0;margin: 21px 30px;} blockquote:before {content: "\201C";margin-left: -35px;line-height: 1.33;float: left;font-weight: 700;font-style: normal;font-size: 25px;color: #111;}

Style 4

blockquote{margin:0.25em 0;padding:15px 20px 15px 50px;line-height:1.45;color:#fff;border-left: 12px solid #080; background:#213040}

Style 5

<style type='text/css'>

/*Blockquote Catatan*/

.post-body blockquote {

    text-align: left;

    background: #6591c2;

    position: relative;

    display: block;

    padding: 55px 20px 20px;

    color: #fff;

    margin: 10px 0;

    border-radius: 3px;

}

.post-body blockquote:before {

    position: absolute;

    content: 'Catatan';

    background: rgba(255,255,255,1);

    right: 3px;

    left: 3px;

    top: 3px;

    padding: 5px 20px;

    display: block;

    font-weight: 700;

    border-radius: 3px 3px 0 0;

    color: #6591c2;

}

</style>

Catatan: Khusus untuk style nomor 5 penempatan kodenya silahkan letakkan di atas kode </head>

4. Simpan kembali template anda. 

Untuk cara penggunaannya, pada saat menulis postingan silahkan pilih ikon tanda kutip di atas halaman posting sebelum anda menambahkan kalimat pada blockquotenya. Lihat gambar di bawah ini:

Demikianlah cara modifikasi tampilan Blockquote/ Catatan di postingan Blog menjadi lebih keren. Semoga bermanfaat.

Labels: Blogging

Thanks for reading Cara Modifikasi Tampilan Blockquote/ Catatan di Postingan Blog Menjadi Lebih Keren. Please share...!

Facebook

Twitter