Cara desain template blogger dengan Tailwind CSS - Anix Clone New
Ini adalah tutorial membuat template blogger dengan Tailwind CSS. Tutorial bukan untuk pemula, tapi untuk developer tingkat menengah atau atas. Tutori…
- Threads
- 1
- Words
- 612
Ini adalah tutorial membuat template blogger dengan Tailwind CSS. Tutorial bukan untuk pemula, tapi untuk developer tingkat menengah atau atas. Tutori…
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