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?
.png)
Memang hebat. Kerja pun jadi mudah sekarang ni kan.
BalasHapusdan teknologi tak bisa dilawan ya Cik
HapusYa ampuuunnn, kenapa nggak terpikirkan di saya yak :D
BalasHapusAbisnya, 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
sekarang chatgpt sudah lebih baik dalam memunculkan sumber refensi mb
HapusSaya masih puyeng dengan chatgpt. Nyoba-nyoba yang tinggal isi di internet malah rempong banget T-T
BalasHapusrempong gmn mba, mungkin bisa dimulai dengan pertanyaan2 sederhana
Hapuskeren juga ya ChatGPT... bisa sepintar itu ^_^
BalasHapusBTW, pa kbr Bang Day?
kabar baik bang, teknologi emg gak bisa dilawan
HapusAsik bener, ya. Chat GPT bisa bantuin kita di berbagai hal. Bahkan belajar dan memahami coding juga bisa. Asik nih, jadi banyak tau.
BalasHapusiya bang, banyak hal yang bisa jadi mudah dengan ini
HapusWahh bener-bener makin mudah banget yaa dengan bantuan chat GPT ini, tinggal ketik mau dibuatkan apa langsung muncul hasilnya..
BalasHapusiya bang Andri, sampe script phyton pun dia bisa
Hapusbaru 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
BalasHapustrims sudah berkunjung mba, iya nih saya juga lagi fase malas ngeblog hehe
HapusTeknologi 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😁
Iya Bli, teknologi tak bisa dilawan. kita harus menyesuaikan
HapusPakai chat gpt memang segalanya jadi terlihat lebih mudah, saya pernah iseng bertanya,dan jawabannya cukup masuk akal, tapi untuk blog belum pernah kepikiran .
BalasHapusChatGPT 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
BalasHapusjujur sih chat gpt ini emang jago banget
BalasHapusbikin orang jadi tambah males dah ya