How to add v1.4 article section style in Median UI v1.6

Median UI v1.4 style in v1.6

Hello everyone, Welcome to Shiva Technic World! You might be like Median UI v1.4 article section style that was cool and you might be thinking is it possible to add it in Median UI v1.6? and my answer is yes it is possible to add in Median UI v1.6 by changing/adding some things to CSS, Don't have any CSS knowledge? Don't worry I will give you complete CSS for the Median UI v1.4 style that has already been edited. So without wasting any time let's check how to add it!

How to add v1.4 style in Median UI v1.6?

  • First, go to your Blogger dashboard
  • Then go to Theme option
  • Then click on the drop-down icon near Customize option
  • Then click on the Edit HTML option
  • Then find /* Article Section */ and replace the CSS from /* Article Section */ to /* Thumbnail */ CSS end with below gave CSS
  • /* Article Section */ .onIndx .blogPts, .itemFt .itm{display:flex;flex-wrap:wrap;align-items:center;position:relative; width:calc(100% + 20px);left:-10px;right:-10px} .onIndx .blogPts >*, .itemFt .itm >*{flex:0 0 calc(50% - 20px);width:calc(50% - 20px); margin-bottom:0;margin-left:10px;margin-right:10px} .onIndx .blogPts >*{background:var(--contentB);box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:10px;margin-bottom:20px;padding:10px 10px 45px;position:relative} .onIndx .blogPts .pTag{padding-bottom:0} .onIndx .pTag .pInf{display:none} .onIndx .blogPts .pInf{position:absolute;bottom:15px;left:15px;right:15px} .onIndx .blogPts{align-items:stretch} .onIndx .blogPts.mty{display:block;width:100%;left:0;right:0} .onIndx .blogPts.mty .noPosts{width:100%;margin:0} .onIndx .blogPts div.ntry{padding-bottom:0;flex:0 0 calc(100% - 20px)} .blogPts .ntry.noAd .widget, .Blog ~ .HTML{display:none} /* Blog title */ .blogTtl{font-size:14px; margin:0 0 30px;width:calc(100% + 16px);display:flex;justify-content:space-between;position:relative;left:-8px;right:-8px} .blogTtl .t, .blogTtl.hm .title{margin:0 8px;flex-grow:1} .blogTtl .t span{font-weight:400;font-size:90%; opacity:.7} .blogTtl .t span::before{content:attr(data-text)} .blogTtl .t span::after{content:''; margin:0 4px} .blogTtl .t span.hm::after{content:'/'; margin:0 8px} /* Thumbnail */ .pThmb{flex:0 0 calc(50% - 12.5px);overflow:hidden;position:relative;border-radius:10px; margin-bottom:20px; background:var(--transB)} .pThmb .thmb{display:block;position:relative;padding-top:52.335%; border-radius: 10px; color:var(--fontC); transition:var(--trans-1)} .pThmb .thmb amp-img{position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;max-height:108%;text-align:center;transform:translate(-50%, -50%)} .pThmb div.thmb span::before{content:attr(data-text); opacity:.7; white-space:nowrap} .pThmb:not(.nul)::before{position:absolute;top:0;right:0;bottom:0;left:0; transform:translateX(-100%); background-image:linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.3) 20%, rgba(255,255,255,.6) 60%, rgba(255,255,255, 0)); animation:shimmer 2s infinite;content:''} .pThmb.iyt:not(.nul) .thmb::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0; background:rgba(0,0,0,.4) url("data:image/svg+xml,<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" stroke="%23fff" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 11.9999V8.43989C4 4.01989 7.13 2.2099 10.96 4.4199L14.05 6.1999L17.14 7.9799C20.97 10.1899 20.97 13.8099 17.14 16.0199L14.05 17.7999L10.96 19.5799C7.13 21.7899 4 19.9799 4 15.5599V11.9999Z"></path></svg>") center / 35px no-repeat; opacity:0;transition:var(--trans-1)} .pThmb.iyt:not(.nul):hover .thmb::after{opacity:1}
    .drK.onIndx .blogPts >*{background:var(--darkBa)}
  • Then save HTML
  • Conclusion

    Hope this How to add v1.4 article section style in Median UI v1.6 article will useful to you, if you have any doubts related to this article ask me in the comment. Do share with your friends. Thanks for visiting, Have a nice day!

    How was it?

    Hi, I am Shiva I am a student I like to learn new things and share them with others.

    3 comments

    1. Have any queries?
    2. Nice bro
      1. Thanks
    How was it? let us know with a comment!

    Cookies Consent

    This website uses cookies to ensure you get the best experience on our website.

    Cookies Policy

    We employ the use of cookies. By accessing this website, you agreed to use cookies in agreement with this website's Privacy Policy.

    Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.