0
Home  ›  Blogger  ›  Plus UI  ›  Redesign

Mengganti Tampilan Widget Scroll Menu Pada Tema Plus UI











Tab Post - Add Tabs Function on Article



💬 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".



    Nah kali ini saya membagikan tutorial berbeda terkait Widget Scroll Menu yang awalnya menambahkan bayangan kini kita rubah tampilannya. Bagi blogger awam atau masih belajar (seperti saya), tutorial kali ini sedikit rumit namun tidak rumit jika sudah di lakukan, (hanya menghapus kode lalu menggantinya).




🤔 Langkah - Langkahnya




  1. Buka Dashboard Blogger

  2. Klik Tema

  3. Tekan icon Segitiga Terbalik

  4. Pilih Edit HTML

  5. Cari kode
    /* Widget Scroll Menu */


  6. 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)}


  7. Simpan Tema

  8. 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


Lemper Bungkus
Tiada hari tanpa secangkir kopi, seperti diriku tanpa dirimu
1 komentar
Search
Menu
Theme
Share
Additional JS