Membuat Halaman About atau Tentang Saya di Blogger
Kali ini saya membuat artikel tentang bagaimana membuat halaman About atau Tentang saya di Blogger.
Pertama-tama :
- Buka Blogger Kalian
- Masuk ke Halaman
- Buat Halaman Baru
- Ganti mode tulisan ke HTML
Salin Semua Kode ini
<!-- Kontainer Halaman -->
<div class='post-body entry-content'>
<div class='aboutAuthor'>
<div class='aboutCont'>
<div class='img-wrapper'>
<img alt='Author Profile' src='Gambar-Profil-blog-kamu'/>
</div>
<div class='text-content'>
<h3 class='admin-name'>
Nama-Blog-atau-Admin-Name
<span class='vh-verify-badge' title='Đã xác minh'>
<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z' fill='#3498db'/>
</svg>
</span>
</h3>
<p>
Halo! Saya adalah penulis di blog ini. Saya berbagi tutorial, tips, dan informasi menarik seputar teknologi dan blogging. Terima kasih telah berkunjung!
</p>
</div>
<div class='socialLinks'>
<a class='fb' href='#' target='_blank' title='Facebook'><svg viewBox='0 0 24 24'><path d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/></svg></a>
<a class='ig' href='#' target='_blank' title='Instagram'><svg viewBox='0 0 24 24'><path d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259 0 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/></svg></a>
<a class='tg' href='https://t.me/yourusername' target='_blank' title='Telegram'><svg viewBox='0 0 24 24'><path d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.891 7.021l-2.02 9.551c-.15.682-.557.85-1.126.531l-3.09-2.284-1.491 1.437c-.165.165-.303.302-.622.302l.221-3.142 5.719-5.166c.249-.221-.054-.344-.381-.127l-7.069 4.449-3.048-.953c-.663-.208-.676-.663.138-.981l11.915-4.591c.552-.201 1.035.13 0 .881z'/></svg></a>
<a class='ml' href='mailto:address@gmail.com' title='Email'><svg viewBox='0 0 24 24'><path d='M12 12.713l-11.985-9.713h23.97l-11.985 9.713zm0 2.574l12-9.725v15.438h-24v-15.438l12 9.725z'/></svg></a>
<a class='yt' href='#' target='_blank' title='YouTube'><svg viewBox='0 0 24 24'><path d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/></svg></a>
</div>
<div class='athrBtn'>
<a class='button'Profil-Blog-kamu' target='_blank'>View Blogger Profile</a>
</div>
</div>
</div>
<!-- =========================
BAGIAN 2: ESTIMATED VIEWS CHART
========================= -->
<h3 class="statsHeading">
<!--[ Stats Heading ]-->
Blog Stats
</h3>
<div class='blogstat-container'>
<div class='stat-card'>
<div class='stat-head'>
<svg class="line" 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>
<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"
></path>
</g>
</svg>
<span>Total Visits</span>
</div>
<div class='stat-value' id='pui-stat-visits'>0</div>
</div>
<div class='stat-card'>
<div class='stat-head'>
<svg class="line" viewBox="0 0 24 24">
<g transform="translate(2.000000, 2.000000)">
<path
d="M10.0002,0.7501 C3.0632,0.7501 0.7502,3.0631 0.7502,10.0001 C0.7502,16.9371 3.0632,19.2501 10.0002,19.2501 C16.9372,19.2501 19.2502,16.9371 19.2502,10.0001"
/>
<path
d="M17.5285,2.3038 L17.5285,2.3038 C16.5355,1.4248 15.0185,1.5168 14.1395,2.5098 C14.1395,2.5098 9.7705,7.4448 8.2555,9.1578 C6.7385,10.8698 7.8505,13.2348 7.8505,13.2348 C7.8505,13.2348 10.3545,14.0278 11.8485,12.3398 C13.3435,10.6518 17.7345,5.6928 17.7345,5.6928 C18.6135,4.6998 18.5205,3.1828 17.5285,2.3038 Z"
/>
<line x1="13.009" y1="3.8008" x2="16.604" y2="6.9838" />
</g>
</svg>
<span>Posts</span>
</div>
<div class='stat-value' id='pui-stat-posts'>0</div>
</div>
<div class='stat-card'>
<div class='stat-head'>
<svg class="line" viewBox="0 0 24 24">
<g transform="translate(2.000000, 2.000000)">
<line x1="13.9394" y1="10.413" x2="13.9484" y2="10.413"></line>
<line x1="9.9304" y1="10.413" x2="9.9394" y2="10.413"></line>
<line x1="5.9214" y1="10.413" x2="5.9304" y2="10.413" />
<path
d="M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z"
/>
</g>
</svg>
<span>Comments</span>
</div>
<div class='stat-value' id='pui-stat-comments'>0</div>
</div>
</div>
<style>
.blogstat-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin: 20px 0;
width: 100%;
}
.stat-card {
background: #f0f1f4;
padding: 20px 10px;
border-radius: 18px;
text-align: center;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.stat-head {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
color: #334155;
}
.stat-head svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.stat-head span {
font-size: 13px;
font-weight: 500;
}
.stat-value {
font-size: 24px;
font-weight: 700;
color: #0f172a;
}
/* DARK MODE Support */
.drK .stat-card {
background: var(--darkBs);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.drK .stat-head { color: #94a3b8; }
.drK .stat-value { color: #ffffff; }
@media screen and (max-width: 768px) {
.blogstat-container { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 480px) {
.blogstat-container { grid-template-columns: 1fr; }
.stat-card { padding: 15px; }
}
</style>
<script>
//<![CDATA[
"use strict";
(function(a, b, c) {
function fetchBloggerStats() {
// 1. Ambil Post Count
fetch('/feeds/posts/summary?alt=json-in-script&max-results=0')
.then(r => r.text())
.then(d => {
let m = d.match(/\"openSearch\$totalResults\":\{\"\$t\":\"(\d+)\"\}/);
if (m) c.getElementById('pui-stat-posts').innerText = m[1];
});
// 2. Ambil Comment Count
fetch('/feeds/comments/summary?alt=json-in-script&max-results=0')
.then(r => r.text())
.then(d => {
let m = d.match(/\"openSearch\$totalResults\":\{\"\$t\":\"(\d+)\"\}/);
if (m) c.getElementById('pui-stat-comments').innerText = m[1];
});
// 3. Ambil Total Visits (Data Internal Plus UI)
if (navigator.onLine && a.lz) {
a.lz.then(() => a.df).then(() => {
const statsUrl = new URL(a.cf.bst.su, a.bg.cnHmU);
statsUrl.searchParams.set("timeRange", "ALL_TIME");
return fetch(statsUrl).then(res => res.ok ? res.json() : null);
}).then(data => {
if (data && data.total) {
const targetVisits = c.getElementById('pui-stat-visits');
if (typeof a.abvN === "function") {
targetVisits.innerText = a.abvN(data.total, 1).join("");
} else {
targetVisits.innerText = data.total > 999 ? (data.total / 1000).toFixed(1) + 'K' : data.total;
}
}
}).catch(e => console.log("Stats error ignored"));
}
}
b.addEventListener('DOMContentLoaded', fetchBloggerStats);
})(PU, window, document);
//]]>
</script>
<script>
"use strict";!((a,b,c)=>{if(!navigator.onLine)return;const d=c.currentScript,e=d.insertAdjacentElement("beforebegin",a.cEl("canvas",{style:"width: 100%; height: auto;",width:800,height:400,ariaLabel:"Estimated views chart",role:"img"}));a.lz.then(()=>a.df).then(()=>a.lJs("https://cdn.jsdelivr.net/npm/chart.js")).then(()=>{const b=new URL(a.cf.bst.su,a.bg.cnHmU);return b.searchParams.set("timeRange","LAST_MONTH"),fetch(b).then(a=>a.ok?a.json():null)}).then(b=>{if(!b)return;const{rows:c}=(a=>{const b=a.total,c=a.sparklineData,d=c.reduce((a,[,b])=>a+b,0),e=[],f=new Date;for(const[g,h]of c){const a=new Date(Date.UTC(f.getUTCFullYear(),f.getUTCMonth(),f.getUTCDate()-(29-g))),c=a.toLocaleDateString("en-GB",{day:"2-digit",month:"short"}),i=Math.round(h/d*b);e.push({date:c,views:i})}return{total:b,rows:e,sparks:c}})(b),d=e.getContext("2d"),f=d.createLinearGradient(0,0,0,e.height);f.addColorStop(0,"rgba(195, 113, 239, 0.15)"),f.addColorStop(1,"rgba(0, 0, 0, 0)"),new Chart(e,{type:"line",data:{labels:c.map(a=>a.date),datasets:[{label:"Estimated Views",data:c.map(a=>a.views),fill:!0,tension:.4,borderColor:"#c371ef",borderWidth:2,backgroundColor:f,pointRadius:2,pointHoverRadius:5,pointHoverBorderWidth:4,pointHoverBackgroundColor:"#fff"}]},options:{responsive:!0,interaction:{mode:"index",intersect:!1},plugins:{tooltip:{backgroundColor:"rgba(53, 27, 92, 0.8)",caretPadding:5,boxWidth:5,usePointStyle:"triangle",boxPadding:3,callbacks:{label:a=>`Views: ${a.raw}`,title:a=>`Date: ${a[0].label}`}},legend:{display:!1,labels:{usePointStyle:!0}}},scales:{x:{grid:{display:!1},title:{display:!1,text:"Date"}},y:{title:{display:!1,text:"Views"},beginAtZero:!0,ticks:{callback:b=>a.abvN(b,2).join("")}}}}})})(PU,window,document);
</script>
</div>
<style>
.aboutAuthor {
padding: 80px 15px 40px;
display: flex;
justify-content: center;
font-family: inherit;
clear: both;
}
.aboutCont {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
width: 100%;
max-width: 1000px;
padding: 75px 20px 35px;
background: #ffffff;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
border-radius: 20px;
box-sizing: border-box;
}
/* Image centering fix */
.img-wrapper {
position: absolute;
top: -60px;
left: 0; right: 0;
margin: 0 auto;
width: 120px;
height: 120px;
z-index: 5;
}
.aboutCont img {
width: 120px;
height: 120px;
border: 6px solid #ffffff;
border-radius: 50%;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
object-fit: cover;
display: block;
}
/* Admin Name Center Fix */
.text-content { width: 100%; }
.admin-name {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 15px 0 10px !important;
padding: 0 !important;
font-size: 24px !important;
color: #1a1a1a;
font-weight: 700 !important;
width: 100%;
border: none !important;
}
.vh-verify-badge {
display: inline-flex;
align-items: center;
margin-left: 8px;
}
.vh-verify-badge svg { width: 22px; height: 22px; vertical-align: middle; }
.aboutCont p { font-size: 15px; color: #666; margin: 0 0 25px; line-height: 1.6; }
/* Social Icons */
.socialLinks { display: flex; gap: 12px; margin-bottom: 30px; justify-content: center; }
.socialLinks a {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,0.05);
border-radius: 50%;
transition: all .3s;
}
.socialLinks a svg { width: 18px; height: 18px; fill: #555; }
.socialLinks a:hover svg { fill: #fff; }
.socialLinks a.fb:hover { background: #1877f2; }
.socialLinks a.ig:hover { background: #e4405f; }
.socialLinks a.tg:hover { background: #0088cc; }
.socialLinks a.ml:hover { background: #ea4335; }
.socialLinks a.yt:hover { background: #ff0000; }
.athrBtn .button {
display: inline-block;
padding: 12px 28px;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
}
/* DARK MODE (.drK) - Manual Override */
.drK .aboutAuthor .aboutCont {
background: var(--darkBs);
box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.drK .aboutAuthor .aboutCont img {
border-color: var(--darkBs);
box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.drK .admin-name { color: #ffffff !important; }
.drK .aboutCont p { color: #bbbbbb; }
.drK .socialLinks a { background: rgba(255,255,255,0.1); }
.drK .socialLinks a svg { fill: #bbbbbb; }
/* Website Stats */
.statsHeading{
text-align:center
}
</style>
Setelah di salin pastekan atau tempel kode tersebut dan simpan
Selesai
Sekian artikel kali ini saya buat semoga bermanfaat Terimakasi!
