Cara membuat blockquote dengan properti boxshadow di blog

Posted at 16.29 | in tips dan triks blog

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..

original source

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 16.29

Anda menyukai postingan di atas? Silahkan di share..!

Post Author

Jalupangna

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.