YUGEN - Template Anime Streaming Blogger New
YUGEN adalah tema blogger buat streaming anime. Setiap Episode anime terpisah dan memiliki postingan masing-masing. Pembuatannya cukup lama, beberapa…
- Threads
- 29
- Words
- 2231
YUGEN adalah tema blogger buat streaming anime. Setiap Episode anime terpisah dan memiliki postingan masing-masing. Pembuatannya cukup lama, beberapa…
Artikel ini merupakan sambungan dari artikel sebelumnya
Di artikel sebelumnya kita memakai CDN sebagai basis pembuatan template blogger.
Namun tujuan kita kali ini untuk menghasilkan file output CSS sekecil mungkin. Proses minifikasi file CSS bisa menghasilkan ukuran file kurang dari 10kB, bahkan untuk website yang komplex.
NojeJS
Periksa NodeJS apakah sudah terinstall: node -v
Buat tema menggunakan CDN Tailwind CSS. Disini aku memakai tema dasar v10 khusus untuk tutorial. Download Raw File.
Instal tailwindcss
melalui npm, proses ini otomatis buat file tailwind.config.js
.
Jalankan perintah berikut di terminal satu per satu.
npm install -D tailwindcss
npx tailwindcss init
npm install flowbite
npm install -D @tailwindcss/typography
Paste code berikut di dalam tailwind.config.js
.
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: ["./src/**/*.{html,js}"],
theme: {
extend: {
colors: {accent: '#451184',},
},
},
plugins: [require('@tailwindcss/typography','flowbite/plugin'),],
}
Ini file config yang biasa kupakai, ada dark mode, accent color dan plugin flowbite.
Buat folder baru, beri nama: src.
Buat file baru, beri nama: input.css
Paste code di bawah di dalam input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Paste code berikut di dalam index.html
.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../dist/output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Jalankan perintah berikut di terminal
Non Minified
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Minified
npx tailwindcss -o build.css --minify
gabisa min kalo mentah2 copas dari xml blogger ke file index.html, kalo dibuka tampilannya ancur ;(
kalo harus buat file index.html sendiri khusus untuk development di lokal (offline) sebelum nanti diterapin di theme blogger, itungannya kerja 2 kali dong T_T
Benar, untuk apa kerja 2 kali. Dah pernah kucoba, susah dan memakan waktu lama.
Pengerjaan tema tetap di browser dengan Tailwind CSS CDN.
Kalau sudah selesai, tinggal pastekan di index.html untuk mengektrak CSS-nya.
Ada di dalam zeistmanga v5.
Script itu yg saya pakai sampai sekarang. Lokasinya: id='chapNextPrev'
id='chapNextPrev-bottom' Javascriptnya cari code: const nPL=
const nPL2=
Tamahkan label: Series
di post info.
Buat minimal 2 post chapter untuk melihat next dan previous.
Atau coba pasang jQuery.
Part 3 when ? for this flowbite series ?
What you want to know?
i want to know how to create post grid in blogger using tailwind css , flowbite (responsive)
Maaf saya tolak.
Simple sih, cuman lama juga bikinnya.
Kalau mau coba pakai AnimeDex