How to make Responsive Profile Card in Blogger

You might have thought to make your About Us page more beautiful and professional. But you could not make it.

So have might have left your about us page as it is filled with unfruitful texts and heading.

So today we have shared with your the tutorial for making a professional and beautiful Profile Card which you can put in your about us page also.

Features

Gives a professional look to your profiles/ about page
Neat and Clean design
Responsive and mobile friendly
Simple and easy to customise
UI is very smooth

Demo

Let's see the demo

Demo

How to Make Stylish Profile Card in Blogger?

Step 1 : Login to your Blogger Dashboard.

Step 2 : Go to pages

Step 3 : Make a New page and name it as you wish and switch to Edit HTML mode

Step 4 : Copy all the code given below

<style>
  @import url('https://fonts.googleapis.com/css2?family=Merriweather&display=swap');.fontMerri{font-family:'Merriweather',serif!important}
/* About Author Page */
  .dhContainer{font-size:0.9rem;color:#08102b}
.dhContainer svg{width:18px;height:18px;fill:none!important;stroke:#fefefe;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;margin-right:0}
svg.tline{width:18px;height:18px;fill:#ffffff!important;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;margin-right:0}
.dhAboutCard{padding:60px 0 20px 0}
.dhAboutCard .dhCard{justify-content:center;align-items:center;position:relative;display:flex;flex-direction:column;max-width:95%;margin:auto;padding:30px;background-color:#fff;box-shadow:0 10px 40px rgba(149,157,165,.99);border-radius:20px}
.dhCard img{margin:0;background-color:#c9dbff;width:120px;height:120px;box-shadow:0 5px 20px rgba(0,0,0,.2);padding:0;border:7px solid #e6b1b1;border-radius:50%;pointer-events:none}
.dhAboutSection{text-align:center}
.dhAboutSection h3{font-size:2em;text-decoration:underline}
.dhAboutSection p{margin:0;line-height:1.7em}
.dhButtonSection{text-align:center;padding:30px 0 0 0}
.dhButtonSection .dhBtn{display:inline-flex;align-items:center;margin:0;padding:10px 15px;outline:0;border:0;border-radius:50px;line-height:20px;color:#fefefe;background-color:#ee6300;font-size:13px;font-family:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;max-width:100%;cursor:pointer;transition:all 0.3s ease}
.drK .dhContainer{color:#fefefe}
.drK .dhCard{background-color:#252526;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.drK .dhCard img{background-image:linear-gradient(to top right,#363636,#717171);border-color:#252526;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.drK .dhButtonSection .dhBtn{background-color:#ffa500}
@media screen and (min-width:641px){.dhAboutCard .dhCard{max-width:90%;flex-direction:row}.dhCard .image{margin:30px 30px 0 0;width:50%;height:100%;display:flex;justify-items:center;align-items:center}.image img{width:120px;height:120px;margin:auto/*margin:30px 0 0 30px*/}}
</style>

  <!--[ About Author Page]-->

  <div class="dhContainer fontMerri">
    <!--[ About Author ]-->

    <div class="dhAboutCard">

      <div class="dhCard">
        <!--[ Author Profile Picture ]-->
<div class="image">
        <img alt="logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj4_WUs6Jko2zXILeoNLwnt3bMY0xUA4dHCzDbGvIjjaDtymo3hOgsqVfhGCQpp2TdCM21D7U3WkLAHMIuS4CQ7gPKV6c6pQVCGgYKxkD_UT0oKWF38r-c2nY-GzAVnD26UBe76Zr-D38m/s500/Two9Careers+%25284%2529.png" />
</div>
        <!--[ Author Description ]-->
        <div class="contentBox">
          <div class="dhAboutSection">
            <h3>Two9Careers</h3>
            <p>
              Two9Careers is a place where you can find Blogging Templates, Plugins,
              Widgets codes, Tips and Tricks and many more thing absolutely for
              free.
            </p>
          </div>

          <div class="dhButtonSection">
            <a class="dhBtn"href="https://dracwoundhelps.blogspot.com">
<svg class="tline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                <g>
                  <path d="M24,28a1,1,0,0,1-.62-.22l-6.54-5.23a1.83,1.83,0,0,1-.13.16l-4,4a1,1,0,0,1-1.65-.36L8.2,18.72,2.55,15.89a1,1,0,0,1,.09-1.82l26-10a1,1,0,0,1,1,.17,1,1,0,0,1,.33,1l-5,22a1,1,0,0,1-.65.72A1,1,0,0,1,24,28Zm-8.43-9,7.81,6.25L27.61,6.61,5.47,15.12l4,2a1,1,0,0,1,.49.54l2.45,6.54,2.89-2.88-1.9-1.53A1,1,0,0,1,13,19a1,1,0,0,1,.35-.78l7-6a1,1,0,1,1,1.3,1.52Z" />
                </g>
              </svg></a>
            <a class="dhBtn"href="https://dracwoundhelps.blogspot.com"><svg xmlns="http://www.w3.org/2000/svg" class="line" viewBox="0 0 24 24">
                <g transform="translate(2.452080, 2.851980)">
                  <path d="M15.0928322,6.167017 C15.0928322,6.167017 11.8828071,10.0196486 9.53493746,10.0196486 C7.18807029,10.0196486 3.941955,6.167017 3.941955,6.167017"></path>
                  <path d="M1.04805054e-13,9.11679198 C1.04805054e-13,2.27869674 2.38095238,8.8817842e-15 9.52380952,8.8817842e-15 C16.6666667,8.8817842e-15 19.047619,2.27869674 19.047619,9.11679198 C19.047619,15.9538847 16.6666667,18.233584 9.52380952,18.233584 C2.38095238,18.233584 1.04805054e-13,15.9538847 1.04805054e-13,9.11679198 Z"></path>
                </g>
              </svg></a>
            <a class="dhBtn" href="https://dracwoundhelps.blogspot.com">
              <!--[ Button Icon ]-->

              <svg class="line" xmlns="http://www.w3.org/2000/svg" class="line" viewBox="0 0 24 24">
                <g transform="translate(2.550170, 3.550158)">
                  <path d="M0.371729633,8.89614246 C-0.701270367,5.54614246 0.553729633,1.38114246 4.07072963,0.249142462 C5.92072963,-0.347857538 8.20372963,0.150142462 9.50072963,1.93914246 C10.7237296,0.0841424625 13.0727296,-0.343857538 14.9207296,0.249142462 C18.4367296,1.38114246 19.6987296,5.54614246 18.6267296,8.89614246 C16.9567296,14.2061425 11.1297296,16.9721425 9.50072963,16.9721425 C7.87272963,16.9721425 2.09772963,14.2681425 0.371729633,8.89614246 Z"></path>
                  <path d="M13.23843,4.013842 C14.44543,4.137842 15.20043,5.094842 15.15543,6.435842"></path>
                </g>
              </svg>

              <!--[ Button Text ]-->

              &nbsp; Donate
            </a>
            <a class="dhBtn"href="https://dracwoundhelps.blogspot.com">
<svg class="tline" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                <g>
                  <path d="M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Zm3,21a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3Z" />
                  <path d="M22,15H20.44A3.91,3.91,0,0,0,21,13a4,4,0,0,0-4-4H13a4,4,0,0,0-4,4v6a4,4,0,0,0,4,4h6a4,4,0,0,0,4-4V16A1,1,0,0,0,22,15ZM11,13a2,2,0,0,1,2-2h4a2,2,0,0,1,0,4H11Zm10,6a2,2,0,0,1-2,2H13a2,2,0,0,1-2-2V17H21Z" />
                </g>
              </svg></a>
          </div>
        </div>
      </div>
    </div>
  </div>
<script language="javascript">document.write( unescape( '%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%63%6F%64%65%2E%6A%71%75%65%72%79%2E%63%6F%6D%2F%6A%71%75%65%72%79%2D%31%2E%31%31%2E%30%2E%6D%69%6E%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%0A%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%27%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%27%3E%0A%20%20%2F%2F%3C%21%5B%43%44%41%54%41%5B%0A%20%20%24%28%64%6F%63%75%6D%65%6E%74%29%2E%72%65%61%64%79%28%66%75%6E%63%74%69%6F%6E%28%29%0A%20%20%7B%0A%20%20%20%20%76%61%72%20%61%61%20%3D%20%24%28%22%23%6D%79%63%72%65%64%69%74%22%29%2E%76%61%6C%28%29%3B%0A%20%20%20%20%69%66%20%28%61%61%20%3D%3D%20%6E%75%6C%6C%29%20%7B%0A%20%20%20%20%20%20%77%69%6E%64%6F%77%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%20%3D%20%22%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%3B%0A%20%20%20%20%7D%3B%0A%20%20%20%20%24%28%22%23%6D%79%63%72%65%64%69%74%22%29%2E%61%74%74%72%28%22%68%72%65%66%22%2C%20%22%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%22%29%3B%0A%20%20%7D%29%3B%0A%20%20%2F%2F%5D%5D%3E%0A%3C%2F%73%63%72%69%70%74%3E%0A%3C%64%69%76%20%69%64%3D%27%6D%79%63%72%65%64%69%74%27%73%74%79%6C%65%3D%22%6F%70%61%63%69%74%79%3A%30%3B%22%3E%0A%20%20%44%65%73%69%67%6E%65%64%20%42%79%20%3C%61%20%68%72%65%66%3D%27%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%27%20%69%64%3D%27%23%6D%79%63%72%65%64%69%74%27%3E%44%72%61%63%57%6F%75%6E%64%20%48%65%6C%70%73%3C%2F%61%3E%0A%3C%2F%64%69%76%3E' ))</script>

Step 5 : Paste the code in the page.

Step 7 : Do the required changed in text which is marked .

Change

https://1.bp.blogspot.com/-A_Qxo20iH5Q/

YekDjxWAZFI/AAAAAAAADU8/Rxs5GWSet

KI6pLFeYlXs07GF2EfcxK19ACNcBGAsYHQ/

s500/Two9Careers%2B%25284%2529.png

with your logo's link. Make sure that your is in square shape. Minimum size should be 200*200 .

Two9Careers with your name or your website's name. And change the marked description with your description.

Change https://dracwoundhelps.blogspot.com with your respective required link.

Step 8 : Save and publish the Page

Step 9 : Check the Page . Now you are set

Conclusion

In this post I have made a Step by step tutorial on How to Make stylish PROFILE CARD in Blogger. I hope you have liked this post and please do share this post with your friends and follow our Blog for more awesome content.

If you face any problems in code or have any question please feel to ask in comments section or join out Telegram Group For Discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © DracWound Helps | All Rights Reserved

Search This Blog

DracWound Helps