Efek Shadow Note Block Tema Plus UI

Cara membuat Note Block dengan efek melayang di Plus-UI 2.6

Efek Shadow Note Block Tema Plus UI

Note Block

Note Block atau Note Box adalah elemen fitur seperti kotak catatan, yang hadir secara default di beberapa template blogger seperti iMagz, Median Ui, Fletro, Plus UI, dll. Note Block digunakan untuk "menyoroti informasi penting", "kalimat peringatan" atau "sorotan langkah-langkah penting" apa saja agar pengguna dapat membacanya dengan lebih efisien dan lebih baik daripada teks biasa tanpa kotak.

Note Block Shadow

Note Block Shadow adalah note block di beri elemen efek bayangan, sehingga note block terlihat melayang.

Related Posts

Tutorial

Bagaimana cara memberi efek shadow pada Note Block ?. Cara memberi efek bayangan pada note block pada Template Plus UI , ikuti langkah-langkahnya berikut ini.

Kode Script CSS Note Block Shadow

1. Pertama-tama Login ke Dashboard Blogger Anda.
2. Pilih Tema.
3. Klik icon panah ke bawah di sebelah tombol 'Sesuaikan'
4. Klik Edit HTML, Anda akan diarahkan ke halaman pengeditan.
5. Cari kode script yang sama atau mirip 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)}

6. Ganti dengan kode script css berikut ini.

/* Note */ .note{box-shadow: 0 2px 8px 0 rgb(0 0 0 / 40%);position:relative;padding:16px 20px 16px 50px; background:#e1f5fe;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:#81b4dc;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::before{background:#e65151} .note.wr::after{content:'\0021'}
.drK .note{background:var(--darkBs);color:rgba(255,255,255,.9)} 

7. Terakhir - Simpan

---

Demo

Demo Note Block

a. Contoh tampilan note block standar , tanpa shadow bayangan.

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.

b. Contoh tampilan note block dengan shadow bayangan.

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 cara menambah efek bayangan pada note block template Plus UI , semoga bermanfaat.

Go to Link