Berbagi Tema Bearblog

Juli 8, 2025

Haloo semuanya! Karena ada yang minta cara buat pasang tema yang sekarang aku pake, jadi di post ini aku bakal kasih kode CSS dan sedikit penjelasan buat kalian yang mau ubah warna atau fontnya.

Cara Pakai

Langsung aja kalau gamau ribet dan mau sama persis, tinggal copy kode CSS di bawah ini:

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300..800&family=Shippori+Antique&display=swap');

:root {
  --width: 987px;
  --font-main: "Shippori Antique", sans-serif;
  --font-secondary: "Manrope", sans-serif;
  --font-scale: 1rem;
  --space-1: 0.7rem;
  --space-2: 1.44rem;
  --space-3: 2.33rem;
  --space-4: 3.77rem;
  --gap: 6rem;
  --radius: 0.55rem;
  --background-color: #ffffff;
  --background-secondary: rgb(249, 249, 249);
  --blockquote-background: rgba(0, 95, 204, 0.08);
  --heading-color: #1a1a1a;
  --text-color: #2c2c2c;
  --link-color: #005fcc;
  --blockquote-color: #444;
  --code-background-color: #f3f3f3;
  --code-color: #1a1a1a;
  --line: 1px solid rgba(189, 189, 189, 0.8);
  --header-color: rgba(255, 255, 255, 0.4);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #000000;
    --background-secondary: rgb(20, 20, 20);
    --blockquote-background: rgba(0, 95, 204, 0.2);
    --heading-color: #fff;
    --text-color: #ddd;
    --link-color: #4ea8ff;
    --blockquote-color: #aaa;
    --code-background-color: #1a1a1a;
    --code-color: #f2f2f2;
    --line: 1px solid rgba(100, 100, 100, 0.7);
    --header-color: rgba(0, 0, 0, 0.4);
  }
}

.dropdown {
  display: none;
}
@media (max-width: 768px) {
  .dropdown {
    display: block;
    position: relative;
    text-align: center;
  }
  .dropdown-button {
    color: var(--link-color);
    padding: 10px;
    border: none;
    cursor: pointer;
    width: 100%;
  }
 
  .button p {
    font-size: 1.5rem;
  }
  .dropdown-content {
    border-radius:  var(--radius);
    display: none;
    position: absolute;
    border: 1px solid rgba(100, 100, 100, 0.5);
    background-color: var(--background-secondary);
    min-width: 100%;
    z-index: 1;
    right: 0;
    left: auto;
  }
  .dropdown-content a {
    color: var(--link-color);
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    display: block;
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }
  nav p {
    display: none !important;
  }
}

body {
  font-family: var(--font-secondary);
  font-size: var(--font-scale);
  color: var(--text-color);
  background-color: var(--background-color);
  line-height: 1.75;
  margin: 0 auto;
  padding: var(--space-2);
  max-width: var(--width);
  animation: blurFadeIn 0.6s ease;
}

@keyframes blurFadeIn {
  0% {
    opacity: 0;
    filter: blur(12px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}


h1 {
  font-size: 1.78rem;
}

h2 {
  font-size: 1.23rem;
}

h3 {
  font-size: 0.99rem;
}

h4, h5, h6 {
  font-size: var(--font-scale);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-main);
  color: var(--heading-color);
  margin-bottom: var(--space-1);
  line-height: 1.2;
}

strong, b {
  font-weight: 600;
  color: var(--heading-color);
}

a {
  color: var(--link-color);
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease;
}

a:hover,
a:active {
  transform: translateY(2px);
}


header {
  max-width: var(--width);
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: var(--header-color);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2);
  border-bottom: 1px solid rgba(100, 100, 100, 0.5);
}

main {
  margin-top: var(--gap);
  margin-bottom: var(--space-3);
}

nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

nav p {
  display: flex;
  gap: var(--space-1);
  font-size: 0.92rem;
  font-weight: bold;
  margin: 0;
}

footer {
  padding: var(--space-3) 0;
  text-align: center;
  font-size: 0.82rem;
}


.upvote-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.upvote-button:hover {
  transform: scale(0.9);
}

.upvote-button svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

.upvote-button .upvote-count {
  font-size: 14px;
  font-weight: bold;
}


img {
  max-width: 100%;
  display: block;
  border-radius: var(--radius);
}

code {
  font-family: monospace;
  font-size: 0.8rem;
  background-color: var(--background-secondary);
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius);
  word-break: break-word;
  border: 1px solid #005fcc14;
  color: var(--code-color);
}

pre {
  overflow-x: auto;
  white-space: pre;
  max-width: 100%;
  padding: 0.7rem;
  background-color: var(--background-secondary);
  border-radius: var(--radius);
  font-family: monospace;
  font-size: 0.95rem;
  line-height: 1.5;
  border: 1px solid #005fcc14;
}

blockquote {
  background-color: var(--blockquote-background);
  border-left: 3px solid var(--link-color);
  padding: 0.1rem 0 0.1rem var(--space-2);
  margin: var(--space-3) 0;
  font-style: italic;
  color: var(--blockquote-color);
}

hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: var(--space-3) 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-3);
  overflow-x: auto;
  display: block;
}

thead {
  background-color: var(--background-secondary);
  font-weight: bold;
}

th, td {
  text-align: left;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(136, 136, 136, 0.2);
  vertical-align: top;
}

time {
  color: rgba(145, 145, 145, 0.8);
  font-style: normal;
}


.title h1 {
  font-size: 1.08rem;
  margin: 0;
}

ul.blog-posts {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

ul.blog-posts li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  margin-bottom: var(--space-2);
  padding-bottom: 0.7rem;
  gap: var(--space-1);
  border-bottom: var(--line);
}

ul.blog-posts li span {
  color: #666;
  font-size: 0.82rem;
}

ul.blog-posts li a {
  font-weight: 500;
  color: var(--link-color);
  text-decoration: none;
}

Lalu simpan di themes (dashboard).

Cara Ganti Font

Cari font dari Google Fonts
Ganti bagian ini:

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');

Lalu ubah jadi:

--font-main: "Inter", sans-serif;
--font-secondary: "Inter", sans-serif;

Cara Ganti Warna

Edit di bagian :root, misalnya:

--background-color: #f9f9f9;
--text-color: #111;
--link-color: #e91e63;

Dark mode juga bisa diubah di bagian ini:

@media (prefers-color-scheme: dark) {
  ...
}

Karena aku bukan user premium, jadi navigasi mobile pakai CSS inline, karena gabisa pake javascript hehe.

Copy dan tempel di bagian nav:

[Thoughts](/thoughts/)
[Guestbook](/guestbook/)
[Gallery](/gallery/)

<div class="dropdown">
  <button class="dropdown-button">
    <span class="menu" style="font-size: 1.3rem; color: var(--link-color);">&#x2630;</span>
  </button>
  <div class="dropdown-content">
    <a href="/thoughts" style="border-bottom: 1px solid rgba(100, 100, 100, 0.5);">Thoughts</a>
    <a href="/guestbook" style="border-bottom: 1px solid rgba(100, 100, 100, 0.5);">Guestbook</a>
    <a href="/gallery">Gallery</a>
  </div>
</div>

Penjelasan Navigasi:

Yang ini hanya muncul di desktop:

[Thoughts](/thoughts/)
[Guestbook](/guestbook/)
[Gallery](/gallery/)

Yang dropdown akan tampil di mobile:

<div class="dropdown">
  <button class="dropdown-button"><span class="menu" style="font-size: 1.3rem; color: var(--link-color);">&#x2630;</span></button>
  <div class="dropdown-content">
    <a href="/thoughts" style="border-bottom: 1px solid rgba(100, 100, 100, 0.5);
">Thoughts</a>
    <a href="/guestbook" style="border-bottom: 1px solid rgba(100, 100, 100, 0.5);
">Guestbook</a>
    <a href="/gallery">Gallery</a>
  </div>
</div>

Contoh

Kalau halaman blog kalian cuma dua, misalnya /about dan /contact:

<a href="/about" style="border-bottom: 1px solid rgba(100, 100, 100, 0.5);">About</a>
<a href="/contact">Contact</a>

Kalau mau nambah halaman /projects:

<a href="/thoughts" style="border-bottom: 1px solid rgba(100, 100, 100, 0.5);">Thoughts</a>
<a href="/guestbook" style="border-bottom: 1px solid rgba(100, 100, 100, 0.5);">Guestbook</a>
<a href="/projects" style="border-bottom: 1px solid rgba(100, 100, 100, 0.5);">Projects</a>
<a href="/gallery">Gallery</a>

Link terakhir jangan dikasih border-bottom biar bawahnya gak ada garis sisa.

Okay, segitu dulu aja yaa! untuk tema guestbook di post ini Berbagi tema Guestbook. Semoga membantu.