Membuat Halaman Tentang Saya yang Modern

Halaman "Tentang Saya" merupakan salah satu komponen penting dalam sebuah blog yang sering kali diabaikan. Padahal, halaman ini memainkan peran strategis dalam membangun kredibilitas, meningkatkan kepercayaan pembaca, serta memperkuat sinyal SEO yang dikirimkan ke mesin pencari seperti Google. 

Dengan menampilkan informasi personal secara profesional, disertai keahlian, latar belakang, dan tujuan blog, Anda tidak hanya membantu pengunjung memahami siapa Anda, tetapi juga menciptakan fondasi yang kuat untuk personal branding. Google pun cenderung memberi nilai lebih pada situs yang transparan dan memiliki halaman profil penulis yang jelas.

Artikel ini akan membimbing Anda langkah demi langkah untuk membuat halaman Tentang Saya atau About Me yang modern, rapi, dan ramah SEO, seperti yang diterapkan di blog hendraws.com.

Langkah-Langkah Membuat Halaman "Tentang Saya" di Blogger

1. Masuk ke Dashboard Blogger

1. Login ke akun Blogger Anda.
2. Pilih blog yang ingin Anda edit.
3. Buka menu Halaman > klik Halaman Baru.

2. Beri Judul & URL SEO-Friendly

• Judul: Tentang Saya / About Me
• URL: https://namablog.blogspot.com/p/tentang.html

Gunakan URL pendek dan mengandung kata kunci "tentang" atau "about"

3. Gunakan Mode HTML

• Di editor postingan, klik tombol "HTML"
• Tempel kode HTML berikut:

HTML

<!--About Section by hendraws--> <div class="about-container fade-in"> <div class="about-avatar"> <img alt="Foto Hendra" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXcBHHn8lFrFX9ZwtMuIMunZCLryIh2avy6EYGj5kTtn4Gb6LRq2l3bHxopZB16-3LssbaMfTIBfyJ1xAAedPOf2792Ih5VDzu66KqURwGzSjHv-a5GHYPxA5q-AXEpXG5zJ7vsGAodM7MJA9TdpDaUXULvqQFC5Usdw-MgTYunH3Kr8a2FESWp3K1788/s320/2c71cda4-76be-4cd9-854a-5aa2bd13decc.jpg" /> </div> <div class="about-text"> <h2>Tentang Saya</h2> <p>Hai, saya <strong>Hendra</strong>, seorang blogger dari tahun 2012 yang senang bereksperimen dengan template dan widget Blogger. Di <strong>hendraws.com</strong>, saya berbagi widget siap pakai, tips kustomisasi blog, serta catatan perjalanan saya dalam belajar dunia web development.</p> <p>Awalnya saya hanya iseng mengutak-atik tampilan blog pribadi. Namun lama-kelamaan, ketertarikan saya terhadap desain dan pengembangan front-end membuat saya makin tertarik mendalami HTML, CSS, dan JavaScript.</p> <p>Blog ini saya buat untuk membantu blogger lain mendapatkan tampilan blog yang menarik tanpa harus pusing coding. Widget yang saya bagikan sudah diuji coba, responsif, dan mudah dipasang.</p> <p>Selain berbagi widget dan tips Blogger, saya juga mencatat eksperimen harian dan pembelajaran baru yang saya temukan dalam dunia blogging dan pengembangan web.</p> <p>Terima kasih telah berkunjung. Semoga apa yang saya bagikan bisa bermanfaat buat kamu!</p> <div class="skills"> <h3>Keahlian</h3> <ul> <li><i class="fas fa-code"></i> Web Design</li> <li><i class="fab fa-html5"></i> HTML</li> <li><i class="fab fa-css3-alt"></i> CSS</li> <li><i class="fab fa-js-square"></i> JavaScript</li> <li><i class="fas fa-chart-line"></i> SEO &amp; Writing</li> </ul> </div> </div> </div> <!--Font Awesome CDN--> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet"></link>

4. Tambahkan CSS di Bawah HTML

Masih di editor yang sama, tambahkan kode berikut setelah HTML-nya:

CSS

<style> .about-container { max-width: 750px; margin: 40px auto; padding: 20px; text-align: center; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; animation: slideFade 1s ease-in-out; } .about-avatar img { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; box-shadow: 0 4px 12px rgb(0 0 0 / 10%); transition: transform 0.5s; } .about-avatar img:hover { transform: scale(1.1) rotate(3deg); } .about-text { color: #001f1a; max-width: 600px; text-align: left; } .about-text h2 { font-size: 24px; margin-bottom: 12px; color: #2675a6; text-align: center; } .about-text p { margin: 10px 0; line-height: 1.8; text-align: justify; } .skills { margin: 20px 0; text-align: center; } .skills ul { padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .skills li { background: #f2f2f2; padding: 6px 12px; border-radius: 20px; font-size: 14px; color: #001f1a; display: flex; align-items: center; gap: 6px; } @keyframes slideFade { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @media (max-width: 600px) { .about-container { padding: 15px; } .about-avatar img { width: 100px; height: 100px; } .about-text h2 { font-size: 20px; } } </style>

Pastikan tidak menggunakan CSS dari template lain agar tidak konflik.

5. Publikasikan dan Cek Tampilan

• Klik Publikasikan.
• Buka URL halaman dan cek tampilannya di desktop dan mobile.

Tips Tambahan

• Masukkan link halaman "Tentang" ke menu navigasi blog.
• Update halaman ini secara berkala saat skill atau aktivitas kamu bertambah.
• Gunakan tools Google Search Console untuk submit halaman ini.

Dengan halaman "Tentang Saya" yang informatif, rapi, dan SEO-friendly, blog Anda akan terlihat lebih profesional di mata pengunjung dan mesin pencari.

Semoga bermanfaat!