© 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.
© Pitapit Blog | Cara Membuat Halaman About .
www.pitapit.my.id