Cara membuat blockquote dengan properti boxshadow di blog

Pada kesempatan kali ini taukahbahwa.blogspot.com akan menyampaikan artikel tentang Cara membuat blockquote dengan properti boxshadow di blog. Semoga dengan artikel Cara membuat blockquote dengan properti boxshadow di blog akan menambah pengetahuan untuk anda pembaca setia taukahbahwa.blogspot.com

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 and Keep Blogging..

Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com

Homepage|http://taukahbahwa.blogspot.com