Cara membuat Tampilan Menu Scroll efek melayang pada Tema Plus UI
 |
| Merubah Tampilan Menu Scroll di Tema Plus UI 2.6 |
Tampilan Menu Scroll Plus UI
Cara merubah tampilan menu scroll Tema Plus UI 2.6, supaya menjadi menarik, sebagai berikut.
Sebelumya masuk dulu ke menu Dashboard Blogger, kemudian Edit Template.
Tahap I
Cari kode di bawah ini,
/* Widget Scroll Menu */ .navS{background:var(--navB);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;border-radius:10px} .navS ul{display:flex;list-style:none;margin:0;padding:0;white-space:nowrap} .navS li{margin:0 15px;padding:10px 0;position:relative;scroll-snap-align:start} .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;padding:8px 0;display:flex} .navS li::before{content:'';padding:10px} .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)}
Tahap II
Ubah menjadi
/* 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)}
Kemudian Simpan.
Demikian semoga bermanfaat.