哈啰塞穆亚！ 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。
卡拉·帕凯
Langsung aja kalau gamau ribet dan mau sama persis, tinggal复制代码CSS di bawah ini :
@import url('https://fonts.googleapis.com/css2?family=Manrope:[email protected]&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; --heading-color: #1a1a1a; --text-color: #2c2c2c; --link-color: #005fcc; --visited-color: #444; --code-background-color: #f3f3f3; --code-color: #1a1a1a; --blockquote-color: #444; --line: 1px solid rgba(189, 189, 189, 0.8); --header-color: rgba(255, 255, 255, 0.4); --background-secondary: rgb(250, 250, 250); } @media (prefers-color-scheme: dark) { :root { --background-color: #000000; --heading-color: #fff; --text-color: #ddd; --link-color: #4ea8ff; --visited-color: #86c3ff; --code-background-color: #1a1a1a; --code-color: #f2f2f2; --blockquote-color: #aaa; --line: 1px solid rgba(100, 100, 100, 0.7); --header-color: rgba(0, 0, 0, 0.4); --background-secondary: rgb(30, 30, 30); } } body { animation: blurFadeIn 0.6s ease; font-family: var(--font-secondary); font-size: var(--font-scale); margin: 0 auto; padding: var(--space-2); max-width: var(--width); background-color: var(--background-color); color: var(--text-color); line-height: 1.75; } @keyframes blurFadeIn { 0% { opacity: 0; filter: blur(12px); } 100% { opacity: 1; filter: blur(0); } } .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; } 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; } a { color: var(--link-color); text-decoration: none; transition: all 0.2s ease; display: inline-block; } 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(10px); -webkit-backdrop-filter: blur(10px); 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; } p { font-size: 0.92rem; } .title h1 { font-size: 1.08rem; margin: 0; } strong, b { font-weight: 600; color: var(--heading-color); } table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); overflow-x: auto; display: block; font-size: 0.95rem; font-family: sans-serif; } thead { background-color: rgba(136, 136, 136, 0.2); font-weight: bold; } th, td { text-align: left; padding: 0.75rem 1rem; border: 1px solid rgba(136, 136, 136, 0.2); vertical-align: top; } tbody tr:nth-child(even) { background-color: rgba(190, 190, 190, 0.2); } tbody tr:nth-child(odd) { background-color: rgba(250, 250, 250, 0.2); } hr { border: none; border-top: 1px solid #e0e0e0; margin: var(--space-3) 0; } img { max-width: 100%; border-radius: var(--radius); display: block; } code { font-family: monospace; font-size: 0.8rem; background-color: rgba(203, 208, 205, 0.38); padding: 0.15rem 0.4rem; border-radius: 4px; color: #1a1a1a; word-break: break-word; } blockquote { border-left: 3px solid var(--link-color); padding-left: var(--space-1); margin: var(--space-3) 0; font-style: italic; color: var(--blockquote-color); } footer { padding: var(--space-3) 0; text-align: center; font-size: 0.82rem; } time { color: rgba(145, 145, 145, 0.8); font-style: normal; } 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; margin-bottom: var(--space-2); gap: var(--space-1); padding-bottom: 0.7rem; border-bottom: var(--line); flex-direction: row-reverse; } 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; } pre { overflow-x: auto; white-space: pre; max-width: 100%; padding: 1rem; background-color: rgba(136, 136, 136, 0.2); border-radius: 6px; font-family: monospace; font-size: 0.95rem; line-height: 1.5; } .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; } }拉鲁·辛潘·迪@import url('https://fonts.googleapis.com/css2?family=Manrope:[email protected]&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; --heading-color: #1a1a1a; --text-color: #2c2c2c; --link-color: #005fcc; --visited-color: #444; --code-background-color: #f3f3f3; --code-color: #1a1a1a; --blockquote-color: #444; --line: 1px solid rgba(189, 189, 189, 0.8); --header-color: rgba(255, 255, 255, 0.4); --background-secondary: rgb(250, 250, 250); } @media (prefers-color-scheme: dark) { :root { --background-color: #000000; --heading-color: #fff; --text-color: #ddd; --link-color: #4ea8ff; --visited-color: #86c3ff; --code-background-color: #1a1a1a; --code-color: #f2f2f2; --blockquote-color: #aaa; --line: 1px solid rgba(100, 100, 100, 0.7); --header-color: rgba(0, 0, 0, 0.4); --background-secondary: rgb(30, 30, 30); } } body { animation: blurFadeIn 0.6s ease; font-family: var(--font-secondary); font-size: var(--font-scale); margin: 0 auto; padding: var(--space-2); max-width: var(--width); background-color: var(--background-color); color: var(--text-color); line-height: 1.75; } @keyframes blurFadeIn { 0% { opacity: 0; filter: blur(12px); } 100% { opacity: 1; filter: blur(0); } } .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; } 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; } a { color: var(--link-color); text-decoration: none; transition: all 0.2s ease; display: inline-block; } 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(10px); -webkit-backdrop-filter: blur(10px); 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; } p { font-size: 0.92rem; } .title h1 { font-size: 1.08rem; margin: 0; } strong, b { font-weight: 600; color: var(--heading-color); } table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); overflow-x: auto; display: block; font-size: 0.95rem; font-family: sans-serif; } thead { background-color: rgba(136, 136, 136, 0.2); font-weight: bold; } th, td { text-align: left; padding: 0.75rem 1rem; border: 1px solid rgba(136, 136, 136, 0.2); vertical-align: top; } tbody tr:nth-child(even) { background-color: rgba(190, 190, 190, 0.2); } tbody tr:nth-child(odd) { background-color: rgba(250, 250, 250, 0.2); } hr { border: none; border-top: 1px solid #e0e0e0; margin: var(--space-3) 0; } img { max-width: 100%; border-radius: var(--radius); display: block; } code { font-family: monospace; font-size: 0.8rem; background-color: rgba(203, 208, 205, 0.38); padding: 0.15rem 0.4rem; border-radius: 4px; color: #1a1a1a; word-break: break-word; } blockquote { border-left: 3px solid var(--link-color); padding-left: var(--space-1); margin: var(--space-3) 0; font-style: italic; color: var(--blockquote-color); } footer { padding: var(--space-3) 0; text-align: center; font-size: 0.82rem; } time { color: rgba(145, 145, 145, 0.8); font-style: normal; } 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; margin-bottom: var(--space-2); gap: var(--space-1); padding-bottom: 0.7rem; border-bottom: var(--line); flex-direction: row-reverse; } 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; } pre { overflow-x: auto; white-space: pre; max-width: 100%; padding: 1rem; background-color: rgba(136, 136, 136, 0.2); border-radius: 6px; font-family: monospace; font-size: 0.95rem; line-height: 1.5; } .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; } }
themes （仪表板）。
Cara Ganti 字体
- 从Google Fonts下载字体
- 请记住这一点：
拉鲁乌巴贾迪： @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
--font-main: "Inter", sans-serif; --font-secondary: "Inter", sans-serif;卡拉甘蒂·瓦尔纳--font-main: "Inter", sans-serif; --font-secondary: "Inter", sans-serif;
编辑 bagian :root ，misalnya:
--background-color: #f9f9f9; --text-color: #111; --link-color: #e91e63;黑暗模式--background-color: #f9f9f9; --text-color: #111; --link-color: #e91e63;
Juga bisa diubah di bagian ini:
@media (prefers-color-scheme: dark) { ... }移动导航（下拉菜单）@media (prefers-color-scheme: dark) { ... }
Karena aku bukan 用户高级，jadi navigasi mobile pakai CSS 内联，karena gabisa pake javascript呵呵。
复制 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);">☰</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>提交导航：[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);">☰</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>
- 杨尼哈尼亚·蒙库尔迪桌面：
[Thoughts](/thoughts/) [Guestbook](/guestbook/) [Gallery](/gallery/)移动端的 Yang 下拉菜单：[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);">☰</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>示例<div class="dropdown"> <button class="dropdown-button"><span class="menu" style="font-size: 1.3rem; color: var(--link-color);">☰</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>
Kalau halaman 博客 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>卡劳毛南巴哈<a href="/about" style="border-bottom: 1px solid rgba(100, 100, 100, 0.5);">About</a> <a href="/contact">Contact</a>
/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>链接terakhir<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>
jangan dikasih 边界底部biar bawahnya gak ada garis sisa。
好吧，segitu dulu aja yaa！贝尔巴吉主题留言簿中的留言簿。 Semoga membantu。