Wawasan spiritual dan blogging: Cara membuat blockquote dengan properti boxshadow di 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

Wawasan spiritual dan blogging

18 Mei 2013

Cara membuat blockquote dengan properti boxshadow di blog

3 komentar: