mempercantik blokquote

Terkadang ketika kita sedang menulis sesuatu, kita membutuhkan penekanan pada sebuah kalimat yang kita anggap penting. Tujuannya agar pembaca bisa melihat dengan jelas maksud kita. Nah... di blogspot pun, ada fasilitas seperti itu, tapi mungkin sebagian dari teman-teman blogger merasa bosan dengan blockquote default dari blogger.

Tapi jangan khawatir, kamu bisa memodifikasi sendiri blockquote di blogspot dengan menambahkan kode CSS yang akan saya berikan di sini. Sebenarnya bukan dari saya sih.. hehe.. tapi saya dapatkan dari blognya Mas Gembong.web.id, yang saya sesuaikan dengan template yang saya pakai, dan hasil modifikasi blockquote dengan kode css-nya akan tampak seperti ini.

Inilah hasil modifikasi blockquote blogspot dengan kode css, lebih cantik kan.. hehe.. 

OK.. tanpa panjang lebar lagi.. inilah tutorial cara mempercantik blockquote blogspot dengan kode css, selamat mencoba.

Tentunya Anda harus login ke dasbor blogger anda dulu, lalu pilih Rancangan > Edit HTML > jangan lupa centang Expand Widget Template.

Lalu silakan anda cari kode di bawah ini (gunakan Ctrl + F agar lebih mudah)

.post blockquote
.........  dst
}
.post blockquote:hover
.........  dst
}
.post blockquote p
.........  dst
}

atau

.post blockquote
.........  dst
} 

atau

blockquote
.........  dst
}

Kode di atas, tergantung jenis template yang anda gunakan. Kalo template yang saya pakai adalah pilihan yang ke-3.

Setelah Anda menemukan kode di atas, gantilah dengan kode di bawah ini

.post blockquote {
background:#f5f8fa url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }
.post blockquote:hover {
background:#FFFFFF url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0
}
.post blockquote p {
margin:.75em 5;
background:url(http://lh5.ggpht.com/_wC8_9aR_6uE/S_OXycnYicI/AAAAAAAAC60/lAY-RahuhKw/exit.jpeg) no-repeat;
padding:20px;
background-position:bottom right;
}

SELESAI.. cukup simple dan mudah bukan bukan.. dan sekarang tampilan blockquote di blogspot anda sudah semakin cantik dan elegant.

Selamat mencoba dan semoga sukses !!!