Join group Whatsapp Join!
Beranda
Blogger
Tutorial

Cara Membuat Halaman About

Halaman about merupakan halaman yang sangat penting karena digunakan untuk memberikan informasi tentang website anda.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Halaman about merupakan halaman yang sangat penting karena digunakan untuk memberikan informasi tentang website anda.

© Pitapit Blog | Cara Membuat Halaman About di Blogger.

Halaman "About" merupakan salah satu halaman paling penting dalam sebuah website, karena Halaman About berfungsi sebagai tempat pengunjung untuk mengetahui tentang siapa anda, membahas tentang apa saja, dan hal hal yang menarik yang anda bagikan. Dengan tampilan Halaman About yang menarik, anda dapat membangun kepercayaan yang kuat terhadap pengunjung.

Apakah Halaman About Penting ?

Tentu, karena dengan membuat hal seperti ini pengunjung bisa memahami apa yang anda bagikan dan meningkatkan SEO, karena dengan adanya kata kunci konten yang berkualitas dapat meningkatkan peringkat website anda.

Table of Contents

Oleh karena itu Halaman About menurut saya wajib kalian gunakan untuk menberikan informasi terhadap website yang anda buat.

Cara Membuat Halaman About

Berikut ini adalah kode untuk membuat Halaman About pada blogger dengan disain yang minimalist dan simpel.

<style>
/*<![CDATA[*/
/* To change Header Subtitle */
.headH .headSub {
  max-width: none;
}

.headH .headSub::before {
  content: "About";
}

/* About Author CSS */
.aboutAuthor {
  padding: 60px 0 20px 0;
}

.aboutAuthor .aboutCont {
  justify-content: center;
  position: relative;
  display: flex;
  max-width: 95%;
  margin: auto;
  padding: 80px 30px 95px 30px;
  background-color: #f0f0f5;
  box-shadow: 0 10px 40px rgba(149, 157, 165, 0.2);
  border-radius: 20px;
}

.aboutAuthor .aboutCont img {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  padding: 0;
  border: 7px solid #fff;
  width: 120px;
  height: 120px;
  position: absolute;
  border-radius: 50%;
  top: -60px;
  pointer-events: none;
}

.aboutAuthor .aboutCont p {
  margin: 0;
  text-align: center;
  font-family: var(--fontBa);
}

.drK .aboutAuthor .aboutCont {
  background: #333;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.drK .aboutAuthor .aboutCont img {
  background-image: linear-gradient(to top right, #363636, #717171);
  border-color: #fff;
}

.drK .aboutAuthor .aboutCont img {
  border-color: #333;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* About Author Button */
.aboutAuthor .aboutCont .athrBtn {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.aboutAuthor .aboutCont .athrBtn .button {
  border-radius: 50px;
  margin: 0 0 30px;
}

.aboutAuthor .aboutCont .athrBtn .button svg {
  stroke: #555;
  margin-right: 5px;
}

/* Website Stats */
.statsHeading {
  text-align: center;
}

.statsWebsite {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 12px auto;
}

.statsCont {
  background-color: #f9f9fc;
  display: flex;
  justify-content: center;
  padding: 8px;
  width: 95%;
  margin: 12px auto;
  box-shadow: 0 5px 20px rgba(149, 157, 165, 0.2);
  border-radius: 20px;
}

.statsCont .stats {
  height: 80px;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 35px;
}

.statsCont .statsName {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-family: var(--fontBa);
}

.statsCont .statsName svg {
  margin-right: 7px;
}

.statsCont .statsNumber {
  font-family: var(--fontB);
  font-size: 30px;
  margin-top: 6px;
  font-weight: normal;
}

.drK .statsCont {
  background-color: #444;
}

/* To change Profile background */
.aboutAuthor .aboutCont img {
  background-color: #ffeaef;
}

/* Dark Mode */
.drK .aboutAuthor .aboutCont img {
  background-image: linear-gradient(to top right, #363636, #717171);
}
/*]]>*/
</style>

<script>
  /*<![CDATA[*/
  function statsPst(json) {
    var el = document.querySelector('.statsNumber.p');
    el.innerHTML = '<span>' + parseInt(json.feed.openSearch$totalResults.$t, 10) + '</span>';
  }

  function statsCmt(json) {
    var el = document.querySelector('.statsNumber.c');
    el.innerHTML = '<span>' + parseInt(json.feed.openSearch$totalResults.$t, 10) + '</span>';
  }

  if (isPrivateBlog != 'true') {
    Defer.js(blogUrl + 'feeds/posts/default?alt=json-in-script&callback=statsPst', 'sts-pst');
    Defer.js(blogUrl + 'feeds/comments/default?alt=json-in-script&callback=statsCmt', 'sts-cmt');
  }
  /*]]>*/
</script>

<!-- [ About Author ] -->
<div class="aboutAuthor">
  <div class="aboutCont">
    <img alt="Author Picture" src="https://your-image-link-here" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada metus urna, at sodales justo maximus nec.</p>
    <div class="athrBtn">
      <a class="button" href="https://www.buymeacoffee.com/pitxplore" target="_blank">
        <svg viewBox="0 0 24 24">
          <g transform="translate(5.000000, 2.400000)">
            <path d="M6.84454545,19.261909 C3.15272727,19.261909 -8.52651283e-14,18.6874153 -8.52651283e-14,16.3866334 C-8.52651283e-14,14.0858516 3.13272727,11.961909 6.84454545,11.961909 C10.5363636,11.961909 13.6890909,14.0652671 13.6890909,16.366049 C13.6890909,18.6658952 10.5563636,19.261909 6.84454545,19.261909 Z" />
            <path d="M6.83729838,8.77363636 C9.26002565,8.77363636 11.223662,6.81 11.223662,4.38727273 C11.223662,1.96454545 9.26002565,-1.0658141e-14 6.83729838,-1.0658141e-14 C4.41457111,-1.0658141e-14 2.45,1.96454545 2.45,4.38727273 C2.44184383,6.80181818 4.39184383,8.76545455 6.80638929,8.77363636 C6.81729838,8.77363636 6.82729838,8.77363636 6.83729838,8.77363636 Z" />
          </g>
        </svg>
        Author Profile
      </a>
    </div>
  </div>
</div>

<h3 class="statsHeading">Blog Stats</h3>

<div class="statsWebsite">
  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <svg viewBox="0 0 24 24">
          <g transform="translate(2.000000, 4.000000)">
            <path d="M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z" />
            <path d="M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z" />
          </g>
        </svg>
        Total Visits
      </div>
      <div class="statsNumber v">
        <span class="pu-views" data-id="WebsiteStats" data-text="0"></span>
      </div>
    </div>
  </div>

  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <svg viewBox="0 0 24 24">
          <g transform="translate(2.000000, 4.000000)">
            <path d="M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z" />
            <path d="M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z" />
          </g>
        </svg>
        Comments
      </div>
      <div class="statsNumber c">
        <span>0</span>
      </div>
    </div>
  </div>

  <div class="statsCont">
    <div class="stats">
      <div class="statsName">
        <svg viewBox="0 0 24 24">
          <g transform="translate(2.000000, 4.000000)">
            <path d="M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z" />
            <path d="M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z" />
          </g>
        </svg>
        Posts
      </div>
      <div class="statsNumber p">
        <span>0</span>
      </div>
    </div>
  </div>
</div>


Related Posts

Ganti bagian yang sudah saya tandai dengan blogger anda, seperti link gambar(jangan di kasih format), deskripsi, dan link website.

Demo
 -Semoga bermanfaat.

© Pitapit Blog | Cara Membuat Halaman About .
www.pitapit.my.id

About the Author

Hi, I am Pitapit, a young man who loves to share interesting things on the internet. By focusing on simple tutorials and sharing premiu apps that are safe to use. Other than that, this blog also covers other cool stuff in general.
#Blogger #Tutorial

Posting Komentar

Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.