Cara membuat Note Block dengan efek melayang di Plus-UI 2.6
 |
| Efek Shadow Note Block Tema Plus UI |
Efek Shadow Bayangan Note Block Plus UI
Cara menambah efek bayangan pada note block tema Plus UI, sebagai berikut.
Masuk ke Dashboard Blogger, kemudian Edit Tema.
cari kode script css di bawah ini
/* Note */ .note{position:relative;padding:16px 20px 16px 50px;background:var(--notifU);color:#3c4043; font-size:.85rem;font-family:var(--fontB);line-height:1.6em;border-radius:10px;overflow:hidden} .note::before{content:'';width:60px;height:60px;background:rgba(0,0,0,.4);display:block;border-radius:50%;position:absolute;top:-12px;left:-12px;opacity:.1} .note::after{content:'\002A';position:absolute;left:18px;top:16px; font-size:20px; min-width:15px;text-align:center} .note.wr{background:#ffdfdf;color:#48525c} .note.wr::after{content:'\0021'} .drK .note{background:var(--darkBs);color:rgba(255,255,255,.9)}
ganti dengan kode script css berikut ini.
/* Note */ .note{box-shadow: 0 2px 8px 0 rgb(0 0 0 / 30%);position:relative;padding:16px 20px 16px 50px;background:var(--notifU);color:#3c4043; font-size:.85rem;font-family:var(--fontB);line-height:1.6em;border-radius:10px;overflow:hidden} .note::before{content:'';width:60px;height:60px;background:rgba(0,0,0,.4);display:block;border-radius:50%;position:absolute;top:-12px;left:-12px;opacity:.1} .note::after{content:'\002A';position:absolute;left:18px;top:16px; font-size:20px; min-width:15px;text-align:center} .note.wr{background:#ffdfdf;color:#48525c} .note.wr::after{content:'\0021'} .drK .note{background:var(--darkBs);color:rgba(255,255,255,.9)}
Kemudian Simpan
Note Block Shadow Plus UI
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.
Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.
Demikian semoga bermanfaat.