Tema Biolink Sederhana untuk Blogger
COND.MY.ID - Jika Anda mencari cara untuk membuat halaman biolink seperti Linktree di Blogger, maka menggunakan tema khusus ini adalah solusinya. Tema ini memungkinkan Anda membuat halaman biolink dengan desain yang sederhana dan responsif tanpa elemen default Blogger yang mengganggu.
Dalam artikel ini, saya akan membagikan kode tema Biolink sederhana yang bisa langsung digunakan di Blogger.
Cara Menggunakan Tema Biolink di Blogger
Metode 1: Copy-Paste Langsung ke Tema Blogger
1. Masuk ke dashboard Blogger.
2. Pilih Tema > Edit HTML.
3. Hapus semua kode yang ada dan ganti dengan kode berikut:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<title>Biolink Sederhana</title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css' rel='stylesheet'/>
<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css' rel='stylesheet'/>
<style>
body {
background-color: #333;
color: #fff;
}
.container-fluid {
background-color: #444;
padding: 20px;
max-width: 800px; /* Membatasi lebar kontainer */
margin: auto; /* Memusatkan kontainer */
}
.LinktreeList {
max-width: 580px;
display: block;
margin: 27px auto;
}
.LinktreeList a {
text-align: center;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
padding: 15px;
border: 1px solid #fff;
display: block;
border-radius: 15px;
position: relative;
font-size: 17px;
width: 680px;
max-width: 95%;
transition: all 0.3s ease-in-out;
color: #fff;
text-decoration: none;
}
.LinktreeList a:hover {
text-decoration: none;
background-color: #fff;
color: #2d3748;
transition: all 0.2s;
transform: scale(1.03);
}
.profile-picture {
max-width: 100px;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
border-radius: 50%; /* Membuat gambar menjadi bulat */
}
.profile-name {
text-align: center;
padding: 10px;
color: #fff;
font-size: 20px;
font-weight: bold;
}
.profile-about {
text-align: center;
color: #fff;
letter-spacing: 2px;
font-size: 15px;
}
</style>
<b:skin><![CDATA[
/* CSS untuk tema gelap */
body {
background-color: #333;
color: #fff;
}
.container-fluid {
background-color: #444;
}
.LinktreeList a {
border: 1px solid #fff;
}
.LinktreeList a:hover {
background-color: #fff;
color: #2d3748;
}
]]></b:skin>
</head>
<body>
<div class='container-fluid'>
<!-- Profile name -->
<div class='mb-3 text-center'>
<img alt='profile picture' class='profile-picture' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1eKd1drcqDF6Go5CXnCYjbQAqjFT8WytEL7jHWTfeEJof8X36noGUJt-AYqhc6UfnlDwqNB1U9ZkEmyRD7_IylfAYS79RMhYQ4iv_MYxoA6bjV2J24r2HJ41JV7MA-RQq86r9OnKHKYWC7iFav7ZUalwhYWrRMzx21RbJAuFZbtaIUifWj_vvPx49Bo/s1500/Cond%20Rock....jpg'/>
<div class='profile-name'>Cond Rock</div>
<div class='profile-about'>Learning is like gardening,<br> there's always something<br> that can be planted and developed.</div>
</div>
<!-- List Menu Linktree -->
<div class='mb-3'>
<div class='LinktreeList'>
<a class='links' href='#url_mediasosial' target='_blank'><i class='bi bi-link-45deg'/> Website</a>
<a class='links' href='#url_mediasosial' target='_blank'><i class='bi bi-linkedin'/> LinkedIn</a>
<a class='links' href='#url_mediasosial' target='_blank'><i class='bi bi-github'/> GitHub</a>
<a class='links' href='#url_mediasosial' target='_blank'><i class='bi bi-twitter'/> Twitter</a>
<a class='links' href='#url_mediasosial' target='_blank'><i class='bi bi-google-play'/> Play Store</a>
<a class='links' href='#url_mediasosial' target='_blank'><i class='bi bi-instagram'/> Instagram</a>
<a class='links' href='#url_mediasosial' target='_blank'><i class='bi bi-tiktok'/> TikTok</a>
<a class='links' href='#url_mediasosial' target='_blank'><i class='bi bi-youtube'/> YouTube</a>
<a class='links' href='#url_mediasosial' target='_blank'><i class='bi bi-facebook'/> Facebook</a>
<a class='links' href='#url_mediasosial' target='_blank'><i class='bi bi-pinterest'/> Pinterest</a>
</div>
</div>
<!-- Section untuk widget -->
<b:section id='main' showaddelement='yes'/>
</div>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js'/>
<script>
// Set the current year
document.getElementById('getYear').innerHTML = new Date().getFullYear();
</script>
</body>
</html>
4. Klik Simpan untuk menerapkan tema.
Metode 2: Mengunggah File Tema XML
1. Unduh file tema Biolink berikut:
2. Masuk ke dashboard Blogger.
3. Pilih Tema > Klik ikon panah.
4. Pilih Pulihkan > Unggah file tema.
5. Pilih file tema-biolink.xml yang telah diunduh.
6. Klik Simpan.
Kesimpulan: Buat Halaman Biolink Anda Sekarang
Tema Biolink ini memungkinkan Anda membuat halaman biolink sederhana di Blogger dengan tampilan bersih dan responsif. Anda bisa mengganti gambar profil, nama, deskripsi, dan tautan sesuai kebutuhan dengan mudah.
Dengan desain yang minimalis dan modern, tema ini sangat cocok untuk siapa saja yang ingin memiliki halaman biolink profesional tanpa perlu keterampilan coding.
Coba sekarang dan buat halaman biolink Anda sendiri hanya dalam hitungan menit. Coba salah satu metode di atas dan sesuaikan dengan kebutuhan Anda.
Jangan ragu untuk membagikan pengalaman Anda menggunakan tema ini di komentar atau hubungi admin jika Anda memiliki pertanyaan. Selamat mencoba.
