-->
Home Experience Tips Ngobrol dengan ChatGPT: Membuat Tab Menu Horizontal Murni HTML dan CSS Pada Blog

Ngobrol dengan ChatGPT: Membuat Tab Menu Horizontal Murni HTML dan CSS Pada Blog

Desember 27, 2023

Jejakbede.online - Pengalaman saya membuat desain blog dengan bantuan ChatGPT, melibatkan kode-kode yang hanya dipahami oleh programmer.

 Saat ini, AI sudah mulai banyak dimanfaatkan, dan salah satu contohnya adalah ChatGPT.  Pertanyaan yang mungkin ada di pikiran Anda, "Jadi, apa sebenarnya ChatGPT?" 

Nah, ChatGPT bisa diibaratkan sebagai asisten virtual cerdas yang bisa membantu dengan berbagai ide. Dengan kemampuannya memahami dan merespons bahasa manusia, ChatGPT bukan hanya sumber informasi, tapi juga partner diskusi yang menyenangkan.

Baru-baru ini, saya memutuskan untuk berbincang-bincang dengan ChatGPT, dan hasilnya sungguh luar biasa! Saya berhasil menciptakan menu tab horizontal yang keren untuk mempercantik tampilan blog saya. Sungguh tak terduga, bukan?

Apa yang membuatnya lebih menarik adalah bahwa saya bukan seorang programmer. Kemampuan coding saya terbilang minim sekali. Tapi, berkat bantuan ChatGPT, saya mampu membuat tab menu yang mencuri perhatian.

Jadi, bagi Anda yang mungkin merasa kurang percaya diri dengan kemampuan coding seperti saya, tak perlu khawatir!

Dengan bimbingan dari ChatGPT, kita dapat menjelajahi dunia coding dan merancang proyek keren tanpa harus menjadi seorang programmer sejati. Bagaimana? Ingin mencoba? Ayo, berbincang dengan ChatGPT dan saksikan sendiri keajaibannya!

Begini kronologisnya. 

Pertama tentu saya menuju laman ChatGPT pada https://chat.openai.com/. Tampilannya sudah familiar lah ya.

Halaman akses ChatGPT

Saya: Hai ChatGPT! Ya, tentu saja. Saya penasaran bagaimana cara membuat tab menu dengan HTML dan CSS pada platform blogspot.

ChatGPT: Baiklah, mari kita mulai dari awal. Pertama-tama, kita butuh HTML untuk membuat struktur dasar dokumen kita. Inilah contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .tabs {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .tab {
            cursor: pointer;
            padding: 10px 20px;
            background-color: #3498db;
            color: #fff;
            margin-right: 5px;
            border: 1px solid #2980b9;
            border-radius: 5px 5px 0 0;
        }

        .tab:hover {
            background-color: #2980b9;
        }

        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #2980b9;
            border-radius: 0 0 5px 5px;
            background-color: #fff;
        }

        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>

<ul class="tabs">
    <li class="tab" onclick="openTab('tab1')">Tab 1</li>
    <li class="tab" onclick="openTab('tab2')">Tab 2</li>
</ul>

<div id="tab1" class="tab-content">
    <h2>Content for Tab 1</h2>
    <p>This is the content for Tab 1.</p>
</div>

<div id="tab2" class="tab-content">
    <h2>Content for Tab 2</h2>
    <p>This is the content for Tab 2.</p>
</div>

<script>
    function openTab(tabName) {
        // Hide all tab content
        var tabContents = document.querySelectorAll('.tab-content');
        tabContents.forEach(function(content) {
            content.classList.remove('active');
        });

        // Show the selected tab content
        var selectedTab = document.getElementById(tabName);
        if (selectedTab) {
            selectedTab.classList.add('active');
        }
    }
</script>

</body>
</html>

ChatGPT: Dalam contoh di atas, kita membuat dua tab dengan judul "Tab 1" dan "Tab 2". Setiap kali salah satu tab diklik, fungsi openTab dipanggil untuk menampilkan kontennya. Konten tab diatur dengan menggunakan class tab-content, dan tab yang aktif diberi class active. CSS digunakan untuk mengatur tata letak dan tampilan tab serta kontennya.


Setelah saya coba pada blog, sungguh memukau, hasilnya seperti ini.

Hasil awal membuat tab horizontal dengan bantuan ChatGPT


Selanjutnya saya meminta ChatGPT mengubah warna tab ketika aktif diklik. Karena, pada kode di atas menghasilkan warna yang sama meski kita mengklik tab yang berbeda.

Saya: Tolong ubah warna tab ketika aktif terbuka.

ChatGPT: Tentu, Anda dapat mengubah warna tab ketika aktif terbuka dengan menambahkan warna latar belakang atau properti warna lainnya. Berikut adalah contoh modifikasi CSS untuk mencapai itu:

Kode kedua dari ChatGPT

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .tabs {
            display: flex;
            margin: 0;
            padding: 0;
        }

        .tab {
            cursor: pointer;
            padding: 10px 20px;
            background-color: #3498db;
            color: #fff;
            margin-right: 5px;
            border: 1px solid #2980b9;
            border-radius: 5px 5px 0 0;
        }

        .tab:hover {
            background-color: #2980b9;
        }

        .tab.active {
            background-color: #2c3e50; /* Warna untuk tab aktif */
        }

        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #2980b9;
            border-radius: 0 0 5px 5px;
            background-color: #fff;
        }

        .tab-content.active {
            display: block;
        }
    </style>
</head>
<body>

<div class="tabs">
    <div class="tab" onclick="openTab('tab1')">Tab 1</div>
    <div class="tab" onclick="openTab('tab2')">Tab 2</div>
</div>

<div id="tab1" class="tab-content">
    <h2>Content for Tab 1</h2>
    <p>This is the content for Tab 1.</p>
</div>

<div id="tab2" class="tab-content">
    <h2>Content for Tab 2</h2>
    <p>This is the content for Tab 2.</p>
</div>

<script>
    function openTab(tabName) {
        // Hide all tab content
        var tabContents = document.querySelectorAll('.tab-content');
        tabContents.forEach(function(content) {
            content.classList.remove('active');
        });

        // Hide all tabs
        var tabs = document.querySelectorAll('.tab');
        tabs.forEach(function(tab) {
            tab.classList.remove('active');
        });

        // Show the selected tab content
        var selectedTab = document.getElementById(tabName);
        if (selectedTab) {
            selectedTab.classList.add('active');
        }

        // Highlight the selected tab
        var activeTab = document.querySelector('.tab[onclick="openTab(\'' + tabName + '\')"]');
        if (activeTab) {
            activeTab.classList.add('active');
        }
    }
</script>

</body>
</html>


Hasilnya seperti ini.
Hasil kedua membuat tab horizontal dengan bantuan ChatGPT


Sampai di sini saya makin takjub dengan kemampuan ChatGPT. Pada kode pertama dan modifikasinya, saya melihat ada penggunaan Javascript. 

Menurut beberapa pakar SEO katanya dapat memperlambat loading blog kita. Jadi iseng saya bertanya lagi.

Saya: Bisakah script di atas murni html dan css tanpa javascript?
ChatGPT: Ya, Anda bisa membuat tab tanpa menggunakan JavaScript hanya dengan HTML dan CSS. Berikut adalah contoh implementasi tab dengan HTML dan CSS saja:

Kode ketiga dari ChatGPT
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .tabs {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .tab {
            cursor: pointer;
            padding: 10px 20px;
            background-color: #3498db;
            color: #fff;
            margin-right: 5px;
            border: 1px solid #2980b9;
            border-radius: 5px 5px 0 0;
        }

        .tab:hover {
            background-color: #2980b9;
        }

        .tab.active {
            background-color: #2c3e50; /* Warna untuk tab aktif */
        }

        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #2980b9;
            border-radius: 0 0 5px 5px;
            background-color: #fff;
        }

        .tab1:checked ~ .tabs .tab1,
        .tab2:checked ~ .tabs .tab2 {
            background-color: #2c3e50; /* Warna untuk tab aktif saat menggunakan radio button */
        }

        .tab1:checked ~ .tab-content1,
        .tab2:checked ~ .tab-content2 {
            display: block;
        }
    </style>
</head>
<body>

<input type="radio" id="tab1" class="tab1" name="tabs" checked>
<input type="radio" id="tab2" class="tab2" name="tabs">

<div class="tabs">
    <label for="tab1" class="tab tab1">Tab 1</label>
    <label for="tab2" class="tab tab2">Tab 2</label>
</div>

<div id="content" class="tab-content tab-content1">
    <h2>Content for Tab 1</h2>
    <p>This is the content for Tab 1.</p>
</div>

<div id="content" class="tab-content tab-content2">
    <h2>Content for Tab 2</h2>
    <p>This is the content for Tab 2.</p>
</div>

</body>
</html>

Tidak ada perbedaan tampil dengan penggunaan ataupun tanpa javscript pada kode tab horizontal dari ChatGPT di atas.

Selanjutnya masih banyak permintaaan saya ke Chat GPT seperti:
  • atur agar jarak tab 1 dari kiri 10 px
  • ubah top border menu jadi 5px
  • atur jarak padding, dll.

Masih banyak lagi, namanya juga trial and error ya. Daaaan, terakhir saya meminta ChatGPT untuk menjadikan tanya jawab tersebut menjadi postingan blog. Inilah yang sedang anda baca.

Keren bukan?
This Is The Newest Post
Previous article Previous Post

You Might Also Like

8 Komentar untuk "Ngobrol dengan ChatGPT: Membuat Tab Menu Horizontal Murni HTML dan CSS Pada Blog"

  1. Azhafizah MN1 Januari 2024 pukul 09.42

    Memang hebat. Kerja pun jadi mudah sekarang ni kan.

    BalasHapus
  2. Rey - reyneraea.com 1 Januari 2024 pukul 11.03

    Ya ampuuunnn, kenapa nggak terpikirkan di saya yak :D
    Abisnya, sejak awal kemunculannya, dan cobain tanya-tanya, hasilnya lebih memuaskan nanya google.
    Alasannya, kita nggak tahu apakah jawaban chatgpt itu bener atau enggak, karena nggak ada pembandingnya kek google yang muncul banyak artikel lainnya

    BalasHapus
  3. Ummu10 Januari 2024 pukul 00.43

    Saya masih puyeng dengan chatgpt. Nyoba-nyoba yang tinggal isi di internet malah rempong banget T-T

    BalasHapus
  4. Penghuni 6011 Januari 2024 pukul 16.10

    keren juga ya ChatGPT... bisa sepintar itu ^_^
    BTW, pa kbr Bang Day?

    BalasHapus
  5. Rahman Kamal18 Januari 2024 pukul 11.04

    Asik bener, ya. Chat GPT bisa bantuin kita di berbagai hal. Bahkan belajar dan memahami coding juga bisa. Asik nih, jadi banyak tau.

    BalasHapus
  6. Andrie K.25 Januari 2024 pukul 13.05

    Wahh bener-bener makin mudah banget yaa dengan bantuan chat GPT ini, tinggal ketik mau dibuatkan apa langsung muncul hasilnya..

    BalasHapus
  7. Enny Ratnawati8 Februari 2024 pukul 13.39

    baru nemu postingan ini.Boleh jugaaaa nih,knp gak kepikiran menyelesaikan masalah blog di chat gpt haha.makasih inspirasinya bang day..lama gak saling berkunjung nih

    BalasHapus

Silahkan memberi komentar sesuai isi artikel yah. Mohon maaf spam dan link aktif akan dihapus. Terima kasih sobat...👍👍👍

:) :( hihi :-) :D =D :-d ;( ;-( @-) :P :o -_- (o) :p (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (y) (f) x-) (k) (h) cheer lol rock angry @@ :ng pin poop :* :v 100

This Is The Newest Post
Previous article Previous Post