-->

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?

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

  1. Memang hebat. Kerja pun jadi mudah sekarang ni kan.

    BalasHapus
  2. 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
    Balasan
    1. sekarang chatgpt sudah lebih baik dalam memunculkan sumber refensi mb

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

    BalasHapus
    Balasan
    1. rempong gmn mba, mungkin bisa dimulai dengan pertanyaan2 sederhana

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

    BalasHapus
    Balasan
    1. kabar baik bang, teknologi emg gak bisa dilawan

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

    BalasHapus
    Balasan
    1. iya bang, banyak hal yang bisa jadi mudah dengan ini

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

    BalasHapus
    Balasan
    1. iya bang Andri, sampe script phyton pun dia bisa

      Hapus
  7. 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
    Balasan
    1. trims sudah berkunjung mba, iya nih saya juga lagi fase malas ngeblog hehe

      Hapus
  8. Teknologi memang berkembang pesat ya bang... Tidak disangka, pemrograman yang hanay dikuasi segelintir orang bisa dipraktekkan dengan chat gpt. Ke depannya entah bagaimana perkembangan dunia ya...
    😁

    BalasHapus
    Balasan
    1. Iya Bli, teknologi tak bisa dilawan. kita harus menyesuaikan

      Hapus
  9. Pakai chat gpt memang segalanya jadi terlihat lebih mudah, saya pernah iseng bertanya,dan jawabannya cukup masuk akal, tapi untuk blog belum pernah kepikiran .

    BalasHapus
  10. ChatGPT sekarang emang jd andalan sh, bahkan beberapa orang nyari penulis yg pandai mengaplikasikan chatGPT di artikelnya. Tapi aku sendiri malah gak bsa. Meski udh baca ini, tetep syulit banget untuk diikuti hihi apa krna aku emang zonk banget soal IT

    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

Next article Next Post
Previous article Previous Post