Merubah Tampilan Menu Scroll di Tema Plus UI 2.6

Cara membuat Tampilan Menu Scroll efek melayang pada Tema Plus UI

Merubah Tampilan Menu Scroll di Tema Plus UI 2.6

Menu Scroll Plus UI

Menu scroll adalah menu yang terletak di atas header berguna untuk menampilkan nama label kategori atau Url link di blog pada Template Plus UI

Tutorial

Bagaimana merubah tampilan menu scroll ? Cara merubah tampilan Menu scroll Tema Plus UI 2.6, supaya menjadi menarik, ikuti langkah-langkahnya sebagai berikut.

Kode Script menu scroll

1. Pertama masuk ke Dashboard Blogger.
2. Pilih Tema.
3. Pilih Edit HTML.
4. Langkah #1 - Cari kode script yang mirip 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)}

5. Langkah #2 - Setelah ketemu, ganti dengan kode script 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)}

6. Terakhir - Pratinjau dan Simpan .

Demikian cara merubah tampilan menu scroll Tema Plus UI 2.6 menjadi menarik , semoga bermanfaat.

Go to Link