Cara mudah membuat blockquote dengan properti boxshadow di blog

seperti ini hasilnya...

Dua pilihan style blockquote dengan properti box-shadow memberikan pilihan bagi kalian untuk mempergunakan, membandingkan atau modifikasi ulang baik dengan atau tidak menggabungkan kedua tampilan blockquote tersebut.

BLOCKQUOTE DENGAN PROPERTI BOX SHADOW WARNA BIRU

KODE CSS

blockquote { padding: 10px; color: #EEF8FB; margin-top: 20px; border-radius: 5px; position: relative; font-size: 16px; font-style: italic; text-align: center; font-family: "Comic Sans MS", cursive, sans-serif; background: #39A1CF; text-shadow: -1px 1px 1px black; box-shadow: inset 0px 2px 5px rgba(28, 92, 115, 0.9); } blockquote:before { content: "Quote:"; font-size: 30px; line-height: 20px; position: absolute; top: -35px; border-radius: 5px 5px 0 0; padding: 10px 20px 5px; text-align: center; background: #39A1CF; color: #39A1CF; text-shadow: -1px -1px 1px #CAE7F2, 1px 1px 1px #1E5F7B; box-shadow: 0px -1px 1px rgba(204, 204, 204, 0.7), 0px 2px 1px rgba(110, 110, 110, 0.5), inset 0 2px 20px rgba(0, 0, 0, 0.3); }

BLOCKQUOTE DENGAN PROPERTI BOX SHADOW WARNA HIJAU

KODE CSS

blockquote { color: #E7F9FD; line-height: 1.4em; position: relative; font-size: 16px; font-family: Georgia,serif; font-style: italic; text-align: justify; padding: 10px 10px 10px 50px;; margin: 10px 0; border-radius: 10px; background-color: #7FAB14; box-shadow: 0 1px 5px #333, inset 0 55px hsla(0, 0%, 100%, .2), inset 0 -15px 55px rgba(0, 0, 0, 0.3); } blockquote:before { display: block; content: "\201C"; font-size: 100px; position: absolute; left: 0; top: 50px; color: #7FAB14; text-shadow: -1px -1px 1px #CDEF76, 1px 1px 1px #5C7B0E; }

PENERAPAN:

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template -> Edit HTML
• Biasakan membackup template untuk mengantisipasi kesalahan

• Cari kode .post blockquote kemudian hapus..
• Dalam template biasanya kodenya seperti ini:

.post-body blockquote { line-height:1.3em;.... } 
Atau
.post blockquote{ bla bla bla....}

• Jika tidak menemukan kode seperti diatas, tinggal menuju langkah berikutnya..
• Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan pencarian
• Berikutnya kopi dan pastekan kode CSS diatas tepat sebelum kode ]]></b:skin>

KODE HTML

<blockquote>ISI TEKS ANDA</blockquote>

Setiap kali anda menulis dan ingin menambahkan style Blockquote/Quote tinggal beralih dari mode Compose ke HTML
Kopi dan pastekan kode HTML diatas ke dalam editor HTML blog

Semoga bermanfa'at  dan matur thank you