Cara Pasang Kode Tailwind Simple Responsive Navigation ke dalam Theme Blogger

Ada yang tertarik membuat theme blogger sendiri dari nol? Mau coba Tailwind-CSS ke dalam theme Blogger? Sekarang kita jalan-jalan dulu mencari kode yang akan kita jadikan sebagai percobaan. Ya, meskipun pada artikel aslinya tidak ditujukan untuk theme blogger.

Di sini ada kode "Simple responsive navigation bar" yang bisa Anda lihat di creative-tim.com. Seperti inilah tampilan menunya untuk versi mobile. Di link tersebut Anda bisa mencoba tampilan versi mobile dengan beragam ukuran layar maupun mode layar komputer

Untuk melihat kode sumbernya tentu sangat mudah karena di sana sudah disediakan. Ya, tinggal klik icon yang disertai tulisan; "</> Show Code" ini. Maka, seketika itu pula akan tampak sekian baris kode yang menghasilkan menu navigasi tersebut yang dibuat dengan Tailwind.

Lantas bagaimana caranya jika kode-kode tersebut kita pasang pada theme blogger? Apakah bisa menggunakan Tailwind-CSS pada template Blogger? Untuk menemukan jawabannya mari kita coba beberapa menit ke depan untuk membuktikannya.

Simple Responsive Navigation Bar Tailwind CSS dari Creative Tim ke Theme Blogger

Mengembangkan tampilan blog dengan Tailwind CSS di platform Blogger (Blogspot) sepertinya jarang dibahas. Mungkin Anda juga pernah merasa kesulitan mencari referensi yang berkaitan dengan Tailwind dan Blogspot secara runut dan terstruktur.

Salah satu contoh yang paling umum misalnya ketika mencari kode untuk membuat menu navigasi (navigation bar) yang modern dan responsif. Beberapa website memang membahas Tailwind-CSS dengan baik. Namun tidak jika dikhususkan untuk platform Blogspot secara khusus.

Nah, kali ini kita ingin ikut meramaikan tema tersebut agar dikenal para kreator template meskipun amatiran. Oleh karena itu, mari kita ikuti bahasan ini tentang cara menyisipkan menu navigasi bar dengan kode-kode Tailwind yang dikutp dari Creative Tim namun ke dalam theme Blogger.

Baris Kode Simple Responsive Navigation Bar di Tutorial Asal

Sebagai contoh, kita akan menggunakan komponen yang disebut sebagai Simple Responsive Navigation Bar. Sedangkan baris kode untuk komponen itu didapatkan dari laman creative-tim.com berikut:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" integrity="sha256-x8PYmLKD83R9T/sYmJn1j3is/chhJdySyhet/JuHnfY=" crossorigin="anonymous" /> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700;900&display=swap" rel="stylesheet"> <style> html, body { font-family: "Rubik", sans-serif; } /* navigation - show navigation always on the large screen devices with (min-width:1024) */ @media (min-width: 1024px) { .top-navbar { display: inline-flex !important; } </style> <nav class="flex items-center bg-gray-800 p-3 flex-wrap"> <a href="#" class="p-2 mr-4 inline-flex items-center"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="fill-current text-white h-8 w-8 mr-2" > <path d="M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z" /> </svg> <span class="text-xl text-white font-bold uppercase tracking-wide" >Talwind CSS</span > </a> <button class="text-white inline-flex p-3 hover:bg-gray-900 rounded lg:hidden ml-auto hover:text-white outline-none nav-toggler" data-target="#navigation" > <i class="material-icons">menu</i> </button> <div class="hidden top-navbar w-full lg:inline-flex lg:flex-grow lg:w-auto" id="navigation" > <div class="lg:inline-flex lg:flex-row lg:ml-auto lg:w-auto w-full lg:items-center items-start flex flex-col lg:h-auto" > <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white" > <span>Home</span> </a> <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white" > <span>About</span> </a> <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white" > <span>Services</span> </a> <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white" > <span>Gallery</span> </a> <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white" > <span>Products</span> </a> <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white" > <span>Contact Us</span> </a> </div> </div> </nav> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script> <script> $(document).ready(function() { $(".nav-toggler").each(function(_, navToggler) { var target = $(navToggler).data("target"); $(navToggler).on("click", function() { $(target).animate({ height: "toggle" }); }); }); }); </script>

Untuk tampilan versi desktop akan terlihat seperti ini:

Sedangkan versi mobile jika belum di klik akan tampak seperti ini:

Untuk tampilan lainnya silahkan menuju laman terkait sebagaimana telah disebutkan.

Cara Menempatkan Kode Tailwind Simple Navigation ke Theme Blogger

Sekarang kita masuk pembahasa inti yang akan membuktikan praduga kita selama ini. Apakah benar jika kode-kode Tailwind ini bisa kita pasang di Blogger? Simak langkah demi langkah cara menempatkan kode Tailwind menu navigasi ke theme blogger berikut:

Langkah 1: Siapkan Theme Blogger

Sebelum menyisipkan navigasi, pastikan Anda sudah menggunakan theme custom Blogger yang sudah memiliki link CDN Tailwind CSS seperti tampak dalam kode di bawah ini.

<?xml version="1.0" encoding="UTF-8" ?> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta charset='utf-8'/> <meta content='width=device-width, initial-scale=1' name='viewport'/> <script src='https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4'/> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <b:section class='main' id='main' showaddelement='yes'/> </body> </html>

Intinya, Anda cuma butuh menyisipkan link CDN Tailwind di dalam `<head>` template Blogger.

Langkah 2: Copy Kode Navbar dari Tailwind Components dan pasang di Theme Blogger

Buka halaman komponen kode sumber asal lalu copy seluruh kode HTML pada bagian navigasinya. Kode yang dimaksud yang terlihat seperti ini:

<nav class="flex items-center bg-gray-800 p-3 flex-wrap"> <a href="#" class="p-2 mr-4 inline-flex items-center"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="fill-current text-white h-8 w-8 mr-2" > <path d="M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z" /> </svg> <span class="text-xl text-white font-bold uppercase tracking-wide" >Talwind CSS</span > </a> <button class="text-white inline-flex p-3 hover:bg-gray-900 rounded lg:hidden ml-auto hover:text-white outline-none nav-toggler" data-target="#navigation" > <i class="material-icons">menu</i> </button> <div class="hidden top-navbar w-full lg:inline-flex lg:flex-grow lg:w-auto" id="navigation" > <div class="lg:inline-flex lg:flex-row lg:ml-auto lg:w-auto w-full lg:items-center items-start flex flex-col lg:h-auto" > <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white" > <span>Home</span> </a> <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white" > <span>About</span> </a> <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white" > <span>Services</span> </a> <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white" > <span>Gallery</span> </a> <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white" > <span>Products</span> </a> <a href="#" class="lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-gray-400 items-center justify-center hover:bg-gray-900 hover:text-white" > <span>Contact Us</span> </a> </div> </div> </nav>

Anda bisa sesuaikan warna dan isi menunya sesuai kebutuhan.

Langkah 3: Sisipkan Kode Navbar ke Template Blogger

Masuk ke Dashboard Blogger → Tema → klik Edit HTML. Cari tag `<body>` dan tentukan di mana Anda ingin menampilkan navigasi bar (biasanya di atas konten). Lalu tempelkan kode `<nav>` tadi tepat setelah tag `<body>`

Langkah 4: Tambahkan Fungsionalitas Toggle

Beberapa navbar memiliki tombol hamburger untuk tampilan mobile. Biasanya mereka menyertakan JavaScript untuk membuka dan menutup menu. Pada contoh ini silahkan copy kode ini:

Kemudian letakan kode di atas tambahkan di bagian akhir theme blogger Anda sebelum tag penutup`</body>`:

Langkah 5: Tambahkan Kode CSS

Untuk mempercantik tampilan silahkan tambahkan kode CSS berikut yang nanti bisa disesuaikan.

@media (min-width: 1024px) { .top-navbar { display: inline-flex !important; }

Kode di atas ditempatkan di antara tag "<b:skin><![CDATA[" dan "]]></b:skin>".

Langkah 6: Tes di Mobile & Desktop

Setelah menyimpan template, buka blog Anda dan lihat tampilannya di layar desktop dan mobile. Pastikan navigasi tampil sesuai harapan, menu dropdown atau hamburger toggle bekerja dan tidak bentrok dengan CSS Blogger lainnya.

Tips Tambahan

Untuk mempercantik sebuah blog kita bisa menggunakan ikon sesuai selera. Jika icon yang dicontohkan kurang menarik bagi Anda. Referensi lainnya seputar ikon hamburger bisa kita cari melalui Font Awesome atau Heroicons dan lain-lain.

Caranya, jangan lupa tambahkan terlebih dahulu link CDN dari penyedia ikon hamburger tersebut di tag `<head>. Kemudian simpan perubahan tersebut sebelum menutup editor. Hasilnya bisa dicek dengan mode penyamaran (incognito) untuk melihat hasilnya tanpa cache.

Penutup

Dengan memanfaatkan komponen Tailwind dari Creative Tim, Anda bisa mempercantik blog tanpa harus mulai dari nol. Ini cocok buat Anda yang ingin blog-nya tampil modern tapi tetap ringan. Bahkan dengan Tailwind ini kita bisa membuat theme blogger sendiri dari nol.

Selamat mencoba.