Cara Download Kaggle Dataset Di Google Colab

  Ada kalanya kita ingin sekali download dataset dari Kaggle namun ingin langsung tersedia di dalam Google Drive kita. Namun bagaimana caranya ya? Caranya memang tidak sederhana dan (kalo boleh jujur) sangat rumit dan tricky Namun jika kalian ingin mencobanya, saya akan membagikan caranya dibawah Langkah Langkah Pertama buat notebook dengan Google Colab kalian di Drive Masukkan perintah berikut !pip install opendatasets import opendatasets as od' Perintah tersebut berguna untuk menginstall library opendatasets sekaligus mengimport library tersebut Jika sudah masukkan kode di bawah from google.colab import files files.upload() Colab akan meminta kita untuk memasukkan file, file ini merupakan file json yang berisi key username dan password dari Kaggle cara mendapatkannya adalah dengan Login Kaggle Buka Account Klik Create New API Token Otomatis akan mendownload file json bernama kaggle.json upload file tersebut Masukkan kode dibawah !ls -lha kaggle.json !pip install -q kaggle # insta

Cara Membuat Daftar Isi Sederhana Pada Postingan Blogger Dengan HTML dan Javascript

 

Kalian pasti pernah kesusahan ketika ingin membaca satu bagian saja dalam isi blog. Biasanya karena blog tersebut memiliki tulisan yang banyak dan kita ga punya banyak waktu untuk membaca seluruh isinya

Maka dari itu sebagian blog juga memberikan daftar isi agar pembaca bisa langsung membaca inti tulisan yang dia inginkan.

https://penerbitdeepublish.com/metodologi-penelitian/
 

Ini juga bisa meningkatkan SEO blog tersebut, karena dianggap bisa ramah pembaca.

Namun ada beberapa kesulitan ketika membuatnya, terkadang kita capek untuk memberikan id pada tag tulisan blog kita. Tentu ini akan membosankan dan ribet, apalagi kalo kalian harus menulis lebih dari satu tulisan setiap harinya

Ada kah cara yang sederhana?

Ada, postingan ini akan menjelaskan tutorial cara membuat Daftar Isi dengan lebih otomatis

Baca Juga:  Option Group adalah Alternatif Penggunaan Dependant Dropdown List 


Daftar Isi

Konsep

Saya memanfaatkan sesuatu yang disebut dengan Javascript DOM, dimana saya menyeleksi Heading yang memiliki tag <h2>, lalu tag tag heading ini saya looping ke dalam HTML. Ini memungkinkan meskipun kita mengubah isi Heading, daftar isi juga akan berubah secara otomatis.

Langkah Langkah

1. Buat Heading

Pastikan ketika kalian menulis blog, kalian memberikan heading pada tulisan. Contohnya pada postingan ini kalian bisa melihat saya memberikan Heading pada Langkah Langkah. Tentu kalian akan memiliki lebih dari satu Heading.

Heading ini memiliki tag <h2> yang oleh script javascript sudah terseleksi. Maka dari itu pastikan kalian membuat Heading sesuai kebutuhan kalian

Kalian bisa membuat heading dengan memblok tulisan dan menekan Heading pada Tab diatas

Setidaknya kalian akan membuat postingan dengan struktur mirip seperti berikut

2. Pastekan code <div class="content"></div>

Masukkan kode diatas pada posisi yang kalian inginkan pada postingan kalian. Caranya dengan mengubah mode tulisan ke dalam HTML View, lalu pastekan di tempat  yang kalian inginkan.

Saya akan meletakkan kode ini dibawah tulisan Daftar Isi


3. Pastekan kode javascript pada HTML pada postingan blog

Kalian buka postingan dalam HTML View, lalu pastekan kode berikut

<script>

const content = document.querySelector('.content')
const ul = document.createElement('ul')
const allHeadings = document.querySelectorAll('h2')

allHeadings.forEach(item => {
    const li = document.createElement('li')
    const a = document.createElement('a')

    item.setAttribute('id', item.innerHTML)
    a.setAttribute('href', `#${item.innerHTML}`)
    a.innerHTML = item.innerHTML

    li.append(a)
    ul.append(li)
})

content.append(ul)

</script>

Letakann di paling bawah. Sehingga hasilnya akan terlihat seperti berikut


Supaya tampilannya lebih dinamis, kita juga bisa memberikan fitur dimana ketika kita mengklik daftar isi tersebut ia akan langsung menggeser dengan halus

Caranya kalian pilih Theme, lalu klik tanda segitiga dan pilih Edit HTML


 

Kalian akan melihat sourcecode blog kalian. Cari body { Lalu kalian tambahkan kode berikut

html {
  scroll-behavior: smooth;
}

dibawah tagnya

Contoh seperti ini

 

Contoh pada tulisan saya yang berjudul Review Kali Linux Versi 22.4, OS Sakti Untuk Hacking + Cara Install Ketika kita lihat hasilnya maka secara otomatis script tersebut akan membuatkan daftar isi sesuai dengan heading heading yang kita buat sekaligus scrolling otomatis yang smooth

Kesimpulan

Untuk membuat daftar isi pada tulisan blog, kita memanfaatkan kode javascript dan html sederhana. Membubuhkannya pada postingan, dan secara otomatis ia script tersebut akan menyeleksi apa aja heading yang kita buat

Sourcecode: Github

Comments

Video Baru!