Membuat Template Blogger dengan Tailwind CSS dan Flowbite

June 09, 2023

Tailwind CSS adalah salah satu framework CSS yang semakin populer dalam web dev. Dengan pendekatan utility-first, Tailwind CSS memungkinkan developer untuk membuat tampilan web yang kaya dan responsif dengan cepat. Sedangkan, Flowbite adalah template UI yang dibangun di atas Tailwind CSS, menawarkan komponen yang siap pakai untuk mempercepat pembuatan web. Dalam artikel ini, kita akan membahas cara membuat template Blogger menggunakan Tailwind CSS dan Flowbite.

Langkah 1: Persiapan

Buat web demo baru atau gunakan web yang telah ada setelah itu unduh tema dasar

Buka Docs Tailwind CSS dan Flowbite

Download browser Firefox atau Chrome untuk PC. Untuk pengguna HP android download kiwi Browser

Langkah 2: Instalasi Tailwind CSS dan Flowbite

Setelah persiapan selesai, import file tema dasar ke dalam Edit HTML dan paste skrip CDN di bawah <head>.

CDN:

<script src='https://cdn.tailwindcss.com'/>

Paste JS Config di bawah <head>

JS Config:

<script>/*<![CDATA[*/
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            accent: '#da373d',
          }
        }
      }
    }
/*]]>*/</script>

Paste CDN Flowbite di atas </body>

CDN:

<script src='https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.5/flowbite.min.js'/>

Sebenarnya kalian sudah dapat menggunakan kelas utility yang disediakan oleh Tailwind CSS dalam tema. Ingat class saja yang ditambahkan, kalian tidak perlu menulis CSS lagi.

Langkah 3: Menggunakan Komponen Flowbite

Flowbite menyediakan berbagai komponen siap pakai yang dapat digunakan dalam template Blogger. Hanya tinggal copy dan paste aja. Misalnya, ingin menambahkan drawer ke post chapter template manga, buka halaman ini copy dan paste ke elemen b:includable chapter template. Namun lokasinya bisa saja berbeda tergantung struktur tema.

Langkah 4: Dark Mode

Zaman sekarang fitur dark mode sudah wajib digunakan. Untungnya, cara mengakifkan fungsi dark mode sangatlah mudah, hanya tambahkan darkMode: 'class',di JS config

JS Config:

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

Flowbite sudah menyediakan skrip dark mode switcher.

Paste skrip di atas <head> xml:

JS Config:

<script>/*<![CDATA[*/
    // On page load or when changing themes, best to add inline in `head` to avoid FOUC
    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
    } else {
        document.documentElement.classList.remove('dark')
    }
/*]]>*/</script>

Ini fungsinya untuk mengatus otomatis mode gelap atau terang berdasarkan preferensi skema warna browser.

Tambahkan elemen <button> untuk mengubah warna tema secara manual:

JS Config:

<button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
    <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
    <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
</button>

Tambahkan JavaScript berikut di atas </body>:

JS Config:

<script>/*<![CDATA[*/
    var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

// Change the icons inside the button based on previous settings
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    themeToggleLightIcon.classList.remove('hidden');
} else {
    themeToggleDarkIcon.classList.remove('hidden');
}

var themeToggleBtn = document.getElementById('theme-toggle');

themeToggleBtn.addEventListener('click', function() {

    // toggle icons inside button
    themeToggleDarkIcon.classList.toggle('hidden');
    themeToggleLightIcon.classList.toggle('hidden');

    // if set via local storage previously
    if (localStorage.getItem('color-theme')) {
        if (localStorage.getItem('color-theme') === 'light') {
            document.documentElement.classList.add('dark');
            localStorage.setItem('color-theme', 'dark');
        } else {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('color-theme', 'light');
        }

    // if NOT set via local storage previously
    } else {
        if (document.documentElement.classList.contains('dark')) {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('color-theme', 'light');
        } else {
            document.documentElement.classList.add('dark');
            localStorage.setItem('color-theme', 'dark');
        }
    }
    
});
/*]]>*/</script>