How to add Neumorphism Card for Blogger

How to add Neumorphism Card for Blogger

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How to add Neumorphism Card for Blogger

Benefits :-

  1. Neumorphism Card Design.
  2. New design with fully new features.
Let's Start

Neumorphism Card Demo

How to add Neumorphism Card for Blogger :-

Step 1 :- Go to Blogger's dashboard and click theme.
Step 2 :- Click the arrow down icon next to the 'customize' button.
Step 3 :- Click Edit Html.
Step 4 :- Click on any word then Press CTRL+ F and type in the search form ]]></b:skin>.
Step 5 :- Copy the provided below code and paste it just before ]]></b:skin>.

/* Neumorphism Card */ .neucard{display:flex;background:#e4ebf5;margin-left:30px;margin-right:65px;margin-top:45px;height:auto;width:285px;box-shadow:.3rem .3rem .6rem #c8d0e7,-.2rem -.2rem .5rem #fff;border-radius:7px;overflow:hidden;padding-bottom:70px;padding-top:70px}.neucard:hover{box-shadow:.2rem .2rem .5rem #c8d0e7,.2rem .2rem .5rem #fff}.neucard,.neucard .content,.neucard .content:before,.neucard:hover{transition:all .45s ease;-webkit-transition:all .45s ease}.neucard .content{margin-left:12px;margin-right:12px}.neucard .content:before{content:"Hover to see the content";text-align:center;position:absolute;width:285px;height:230px;background:#e4ebf5;margin-top:135px;margin-left:-12.3px;border-radius:0 0 7px 7px}.neucard .content:hover:before{content:"";background:0 0;transition:all .45s ease}.neucard .content .img,.neuimg{position:absolute;width:150px;height:150px}.neucard .content .img{margin-top:-130px;margin-left:50px;margin-bottom:-40px;box-shadow:0 5px 20px rgba(0,0,0,.2);padding:0;border:7px solid #fff;border-radius:50%}.neucard .neu-ttl{margin-top:50px;align-self:center;border-bottom:solid 1px}.neucard .content .neu-cont{width:280px;margin-bottom:-30px}.neustcs{display:flex;height:80px;width:230px;margin-left:15px;margin-top:65px;border-radius:7px;box-shadow:.3rem .3rem .6rem #c8d0e7,-.2rem -.2rem .5rem #fff;background:#e4ebf5}.neucard .content .neustcs .txt{display:flex;margin-top:20px;margin-left:60px;font-weight:700;font-size:30px}
/* Dark Mode */ .drK .neucard(background:#252526;box-shadow:.3rem .3rem .6rem #151518,-.2rem -.2rem .5rem #242529}.drK .neucard .content:hover:before(background:0 0}.drK .neucard:hover(box-shadow:inset .2rem .2rem .5rem #151518,inset -.2rem -.2rem .5rem #242529}.drK .neucard .content:before,.drK .neustcs,.drK .neucard .content .neu-cont:before(background:#252526}.drK .neustcs(color:#fffdfc;box-shadow:.3rem .3rem .6rem #151518,-.2rem -.2rem .5rem #242529}
/* Responsive */ @media screen and (min-width:769px){/* Neumorphism Card */ .neucard{width:auto;height:auto} .neucard .content .img{margin-left:-95px;margin-top:7px;width:166px;height:166px} .neucard .content .neu-ttl{margin-left:85px;margin-right:-15px;margin-top:-85px} .neucard .content .neu-cont{margin-left:90px;margin-right:;width:auto} .neucard .content:before{content:"Hover to see the content";text-align:center;position:absolute;margin-top:30px;height:200px;width:570px;background:#e4ebf5;border-radius:0 0 7px 7px;transition:all .45s ease;-webkit-transition:all .45s ease} .neucard .content .neu-cont:hover:before{content:"";background:transparent} .neustcs{margin-left:165px;margin-bottom:-20px}}
Step 5 :- Replace all the blue background marked parts according to your theme.

Step 6 :- Add this Html code to use the button in your posts or pages

<div class="neucard">
   <div class="content">
      <div class="img">
         <img class="neuimg" src="#" />
      </div>
      <div class="neu-ttl">
         <h3>Neumorphism Card</h3>
      </div>
      <div class="neu-cont">
         <div>This awesome neumorphism card is fully developed by me !</div>
      </div>
      <div class="neustcs">
         <div class="txt">15 Posts</div>
      </div>
   </div>
</div>

Don't forget to replace # with your image url and click save.

Neumorphism Card.zip 1.62 kb

Rate this article

Frontend Developer and UX Designer

7 comments

  1. Please can you give me your template.

    Send here- [email protected]
    1. Sorry this is paid template
      You can buy it from jagodesain
      From here :- https://theme.jagodesain.com/2021/03/template-imagz.html
  2. How to create post Thumbail like you
    1. using pixellab apk
  3. Which Software you are Using?
    1. I used pixellab
  4. Place tell him thumbail was very attract you