Mengganti Tampilan Widget Scroll Menu Pada Tema Plus UI

Lemper Bungkus Februari 09, 2023

💬 Deskripsi

"Tampilan tema header pada Plus UI memiliki 2 tema header, salah satunya yang saya pakai, namun Widget Scroll Menu yang ada di awal beranda tidak memiliki bayangan pada tema header ke-1. Jadi seperti menyatu, maka dari itu saya tambahkan".

(seperti saya)

(hanya menghapus kode lalu menggantinya)

🤔 Langkah - Langkahnya

Buka Dashboard Blogger
Klik Tema
Tekan icon Segitiga Terbalik
Pilih Edit HTML
Cari kode
```
/* Widget Scroll Menu */
```

Lalu hapus semua kode /* Widget Scroll Menu */

Sampai bawah kode
.navS .l::after{background:var(--darkU)}

atau sampai terlihat kode

/* Widget FeaturedPost */

lalu ganti dengan kode yang ada di bawah ini

/* Widget Scroll Menu */ .drK .navS li{background:var(--darkBa)} .navS{overflow-y:hidden;overflow-x:scroll;scroll-behavior:smooth;scroll-snap-type:x mandatory; -ms-overflow-style:none;-webkit-overflow-scrolling:touch; display:flex;padding:0 0 10px;border-radius:10px} .navS ul{display:flex;list-style:none;margin:0;padding:0;white-space:nowrap} .navS li{margin: 5px 5px;padding: 2px 10px;position: relative;scroll-snap-align: start;border: 1px solid #eee;border-radius: 10px;background: var(--navB);box-shadow: 0 2px 8px rgb(0 0 0 / 10%);} .navS li:first-child{margin-left:auto} .navS li:last-child{margin-right:auto} .navS .l{display:block;color:var(--bodyC);padding:8px 0} .navS .l::before{content:attr(data-text)} .navS .l::after{content:'';height:1px;border-radius:2px 2px 0 0;background:var(--linkC);position:absolute;bottom:0;left:0;right:0;opacity:0} .navS span.l{opacity:.7} .navS a.l:hover, .navS .l.a{color:var(--linkC)} @media screen and (max-width:896px){.navS .secIn{padding:0} .navS li{margin:0 5px;padding:0 10px;display:flex} .navS li::before{content:'';padding:0} .navS ul::after{content:'';display:block;padding:10px;scroll-snap-align:start} .navS .l{position:relative} .navS .l::after{bottom:-8px} .navS a.l:hover::after, .navS .l.a::after{opacity:1}} @media screen and (max-width:500px){.navS{font-size:13px}} .drK .navS{background:var(--darkBs)} .drK .navS .l{color:var(--darkC)} .drK .navS a.l:hover, .drK .navS .l.a{color:var(--darkU)} .drK .navS .l::after{background:var(--darkU)}

Simpan Tema
Selesai

👮‍ Catatan

Jangan lupa meninggalkan jejak dengan cara berkomentar, supaya admin yang menuliskan tau kalau kalian membacanya dan jika ada saran bisa kalian tulis di komentar yaa...

Referensi Fitur:

Tugasiswa

Jangan lupa support blog ini dengan cara berdonasi di Sociabuzz atau Trakteer.id