How To Add Glassmorphic Cards To Your Blogger Website

How To Add Glass Morphic Cards in Blogger Website

Hi Everybody, Welcome to TechyJeeshan, Today in this post I 'll show you How To Add Glass Morphic Card To Your Blogger Website. This Glassmorphic Card is created with the help of HTML, CSS and JS. You can use this Glassmorphic Card in Your About Pages.

So Here we can see when we hover over Glassmorphic we can see that we have the social media icons displayed over here and when we hover over different parts of this card. We have this tilt animation as well and the same goes with this card as well. So you can go ahead and add your own image over there you can also change these names and you can also add new components over here like a paragraph.

Preview Of GlassMorphic Cards:-

How To Add Glassmorphic Cards To Your Blogger Website

Note :- Before starting this tutorial backup your blogger theme to avoid from any errors and problems.

Step 1 :- First of All You need To Go To Blogger.Com.

Step 2 :- Then Login with Your Blogger Account.

Step 3 :- Now Click on Theme Menu.

Step 4 :- After That Click on Edit Html.

Step 5 :- Then Copy The Given Css Code and Put it Above The ]]></b:skin> Tag.

.card-container {
  width: 700px;
  height: 400px;
  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzjxxsua4E6dQmtPJ8-wMUttu_7c6aYER0LQCEgRQBj3q8Bqp6NlzKSwousVhpgrR5QbqtXF1gNQWb57pHJztDCN7223AUwMk6V74f7p5Y-vjV9bfjpSPMoVB_nH71_AQImQ4mOJ88JCc3/s0/orange-3134148_1280.png");
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-container .card {
  width: 200px;
  margin: 0 32px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(20px);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-family: "Roboto", sans-serif;
  color: #fff;
  padding-bottom: 24px;
  height: 210px;
  transition: all 400ms;
}
.card-container .card:hover {
  height: 260px;
}
.card-container .card .photo img {
  width: 100%;8 
}
.card-container .card .content {
  padding: 0 24px;
}
.card-container .card .social img {
  height: 26px;
}
.card-container .card .social {
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
}

Step 6 :- Do not Forget to Click on Save Button.

Step 7 :- Now Click on Pages menu to create a new Page for Glassmorphic Cards.

Step 8 :- Then Create A New Page.

Note :- You can Add This Glass Morphic Cards in Any pages According To You Need. Mostly This Glass Morphic Cards Have Used in About Pages.

Step 9 :- When your page is open then you click on HTML View in page And Copy The All Given Code to paste in HTML View.

<div class="card-container">
      <div class="card" data-tilt>
        <div class="photo">
          <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwmRS-_IF5nOhR9uU0AXjhJo0GYTc05izP-vJwyokaRhlZmMcYciSJF1llOd5wsSCMm5ext5FPGWN18Ulwzh2_b_kfLLitAa7IPB4GRRHzVWQD1JPo87aGs8vymhdoM3bjw0mvwcEn3Tx7/s0/person1.png" />
        </div>

        <div class="content">
          <h2>John D.</h2>

          <div class="social">
            <a href="#">
              <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPuxplVMjsMsj0Opw3VT-OIHGnh7Y3m1aelWxmJaFxJv29IQ69IOQrhQ_hFLY-BoGdCd3F5mluzLre09-L84zmK9wIWXnCCaiUhoECGHQgC4ePhVCLBRERX2ZN8eKx6D1THZB9E45ctHRk/s0/facebook-icon.png" />
            </a>

            <a href="#">
              <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfF4osdEuB_i0ASrNjYeRWqRZZF-_P4xZbe2c_acHGaKkZ6U8pB9UpXyWwYqpSPmcM7g6-1a6Z4H4b5_ATd_YUxjFcayHByPmErvPkGwdQP8SyurwqNNfw4zNoeVWV-nm06Cn4k3XIeCvm/s0/twtter-icon.png" />
            </a>

            <a href="#">
              <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR2fDzIpSmCnf41qQwFfVRo_ww8nByar-SH6_BmpJugve2Xhe8gDIi2vPg3KlIhLkEZD0am4NRypsoAu3-ryaRHTurzuXxAM4HrjE8TjE_NRJXsDkQTHwN3JuZe_hWD7KSn-sWUxfP45Ei/s0/dribbble-icon.png" />
            </a>
          </div>
        </div>
      </div>

      <div class="card" data-tilt>
        <div class="photo">
          <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi61cMurpOx3bTXieQgN31PBiY-cbDZ3D_E92HR5eXKBVcZiTYeX8kJEyPNhIIBE4X22BAkFy9R0UsX78BR0v91zA1NGKTgEUxJoL2HZkWOpmPwtwJGokBUAQUQ-HsQBmuomk1RRwq3SMLM/s0/person2.png" />
        </div>

        <div class="content">
          <h2>Sara H.</h2>

          <div class="social">
             <a href="#">
              <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPuxplVMjsMsj0Opw3VT-OIHGnh7Y3m1aelWxmJaFxJv29IQ69IOQrhQ_hFLY-BoGdCd3F5mluzLre09-L84zmK9wIWXnCCaiUhoECGHQgC4ePhVCLBRERX2ZN8eKx6D1THZB9E45ctHRk/s0/facebook-icon.png" />
            </a>

            <a href="#">
              <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfF4osdEuB_i0ASrNjYeRWqRZZF-_P4xZbe2c_acHGaKkZ6U8pB9UpXyWwYqpSPmcM7g6-1a6Z4H4b5_ATd_YUxjFcayHByPmErvPkGwdQP8SyurwqNNfw4zNoeVWV-nm06Cn4k3XIeCvm/s0/twtter-icon.png" />
            </a>

            <a href="#">
              <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR2fDzIpSmCnf41qQwFfVRo_ww8nByar-SH6_BmpJugve2Xhe8gDIi2vPg3KlIhLkEZD0am4NRypsoAu3-ryaRHTurzuXxAM4HrjE8TjE_NRJXsDkQTHwN3JuZe_hWD7KSn-sWUxfP45Ei/s0/dribbble-icon.png" />
            </a>
          </div>
        </div>
      </div>
    </div>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"
      integrity="sha512-K9tDZvc8nQXR1DMuT97sct9f40dilGp97vx7EXjswJA+/mKqJZ8vcZLifZDP+9t08osMLuiIjd4jZ0SM011Q+w=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

Step 10 :- Then Don't Forget To Publish Your Post or Page.

And let's publish our post and let's click on confirm and now let's view this post and let's see whether everything works all right so let's click on view and here we can see our card is working all right when we hover over this we have the social media icons displayed and we also have the tilt animation so everything is working all right and we also have this glass effect over here for this card so that's how you add a glass morphic card to your blogger post.