Tip Blog: Perhatikan Blockquote Anda

Anda tentu sudah tahu apa yang disebut dengan blockquote. Fasilitas satu ini saya anggap sangat berguna dan menarik dalam postingan. Penggunaannya punsangat sederhana. Tinggal blok teks Anda, lalu klik toolbar tanda petik di atas kotak edit postingan. Nah Anda bisa membedakan sendiri artikel yang menggunakan blockquote dan yang tidak:

Pengumuman bagi sobat Mas Doyok:
Mas Doyok mulai sekarang akan mengadakan penjurian 5 blog favorit yang akan ditampilkan pada tiap bulannya. Blog favorit akan tampil secara thumbnails di halaman utama blog dan sangat terlihat jelas.

atau

Pengumuman bagi sobat Mas Doyok:
Mas Doyok mulai sekarang akan mengadakan penjurian 5 blog favorit yang akan ditampilkan pada tiap bulannya. Blog favorit akan tampil secara thumbnails di halaman utama blog dan sangat terlihat jelas.

Nah, Anda bisa membedakan sendiri bukan? Blockquote sangat berfungsi untuk membedakan antara pengantar dan informasi, atau bahkan bisa gunakan untuk penanda script.

Kembali ke topik awal yang sebenarnya ingin saya bahas adalah mengenai tampilan blockquote itu sendiri. Mulanya blockquote berfungsi untuk mempercantik, tetapi di beberapa template blockquote nya terlihat kurang bagus. Sehingga justru mengganggu. Lalu baiknya bagaimana? Yang saya lakukan pada template ini adalah merubah blockquotenya.

Blockquote asli:

dan Saya Ubah menjadi:


Nah, pada tampilan yang pertama sangat tidak enak dilihat mata, hurufnya terlalu besar dan entah effect justify atau apa ada penyebab lain, yang pasti sering terjadi jarak antar character yang terlalu berjauhan. Saat pengeposan script, script menjadi susah dipelajari. Untuk pengumuman pun menjadi kurang nyaman di baca. Nah, pada tampilan yang kedua, script terbaca jelas kaaaaaaan..... Tentu pembaca lebih suka dengan tampilan yang kedua.

Cara menggantinya mudah:
1. Login ke blogger
2. Tata Letak (sekarang design/rancangan)
3. Edit HTML
4. Centang Expand Widget Templates
5. Cari Kode .post blockquote {
6. Hapus kode diantara .post blockquote { dengan .post blockquote p {

Ganti dengan kode berikut:
background:#e4e3e3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwcZ0irjk0LF66Y6waOFnHXII-Q28Pzk0avxHIQowlg2UBjeqrOPE-fxkO3sCUBUuXaBwR6M-9azy8ssyQNhCq5y2pxYvlEO_V72xNpdYrDhT0QrxsNtSXm4CHwveoeRC2bI-fs-dVoAPo/?imgmax=800) no-repeat top left;
margin:0 25px 15px;
padding: 40px 15px 10px 80px; }


Sehingga hasilnya seperti ini:

.post blockquote {
background:#e4e3e3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwcZ0irjk0LF66Y6waOFnHXII-Q28Pzk0avxHIQowlg2UBjeqrOPE-fxkO3sCUBUuXaBwR6M-9azy8ssyQNhCq5y2pxYvlEO_V72xNpdYrDhT0QrxsNtSXm4CHwveoeRC2bI-fs-dVoAPo/?imgmax=800) no-repeat top left;
margin:0 25px 15px;
padding: 40px 15px 10px 80px; }

.post blockquote p {
margin:0;
padding: 0 0 15px; }

Atau Anda ingin mecoba alternatif lain:

.post blockquote {
background: #ccddf1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEispOOUMP4qeOB7iMBipOJ4DzCSHW_2Srj0BBm4iN4K-0_ikgPRt4VoVw__-HVEle09ruA5RByTBjdgnoTaafl34itkwyN-Kj7mQkcn-m-mPw6ypygKEr2jE1heEXlqoNdK_lisL9o8VMvJ/?imgmax=800) no-repeat top left;
margin: 0 25px 15px;
padding: 40px 15px 10px 65px;
}

.post blockquote p {
margin: 0;
padding: 0 0 15px;
}

Tip: Nah yang harus Anda lakukan sekarang adalah mengecek model blockquote Anda. Dan Anda punya penilaian sendiri....
Selamat mencoba!