Cara Meletakan Kode HTML, CSS dan JavaScript di Template Blogspot

Juli 08, 2023

Pengatahuan paling dasar yang harus dipahami adalah peletakan kode pada template blogspot. Sebagaimana kita ketahui bersama banyak tutorial di internet yang mengupas tentang desain web dengan script HTML, CSS dan JavaScript.

Ada yang secara spesifik menyebutkan platform tertentu dalam tutorialnya. Namun ada juga yang menyertakan kode-kode yang dibutuhkan tersebut namun secara umum. Misalnya hanya menyebut kode HTML, CSS dan JavaScript saja.

Sehingga, bagi pemula yang baru mengenal template blogspot bisa salah menduga. Dia mengira tutorial yang tidak menyebutkan dengan jelas "untuk blogspot" seolah-olah tidak bisa digunakan atau diujicobakan.

Padahal template blogspot juga biasa disisipi dengan kode-kode HTML, CSS dan JavaScript. Bahkan jika perlu bisa juga disisipkan dengan kode dari framework CSS yang Anda sukai. Dan itu semakin memudahkan pembuatan template blogspot.

Misalnya framework yang pernah coba yaitu yaitu framework CSS. Contohnya Sebardi Theme yang menggunakan Bootstrap. Dan Terisi Info yang saya bangun dengan Halfmoon. Sedangkan Tailwind CSS belum saya coba sama sekali.

 

Apakah Tutorial Desain Web Secara Umum Bisa Diterapkan di Blogspot?

Salah satu website yang menyediakan tutorial lengkap seputar desain web adalah w3schools. Di sana ada tutorial bahasa C, PHP, Python serta script HTML,CSS dan lain-lain. Dan fokus kita pada pembahasan ini tentang HTML, CSS dan JavaScript.

Sekarang timbul sebuah pertanyaan:"Apakah tutorial dari website yang demikian bisa diterapkan pada platform Blogspot?" Jawabannya tentu saja bisa jika kode yang dipasang sesuai dengan ekosistem blogspot.

Oleh karena itu ke depan kita coba mengambil kode HTML, CSS dan JavaScript dari sana. Untuk kemudian kita terapkan pada blogspot agar menjadi sebuah template. Dan kita usahakan tidak menggunakan framework CSS apapun.

Namun sebelum masuk dalam praktek sesungguhnya. Berikut ini akan dijelaskan terlebih dahulu tentang cara meletakan kode HTML, CSS dan JavaScript ke dalam theme blogger atau template blogspot.


Cara Meletakan Kode HTML, CSS dan JavaScript di Template Blogspot

Template blogspot memiliki aturan tersendiri untuk setiap kode. Namun secara umum, kode HTML, CSS dan JavaScript ditempatkan pada sebuah blok khusus. Meskipun pada beberapa percobaan pernah saya dapati keluar dari kondisi ini.

Terlebih lagi jika menggunakan framework seperti Bootstrap misalnya. Karena pengaturan yang biasanya ada di blok CSS juga bisa dilakukan pada blok HTML. Namun untuk memudahkan pemahaman kita coba dengan aturan umum dulu.

Jika bahasan ini sudah dipahami baru bisa dijelaskan contoh penempatan lainnya yang keluar dari kebiasan. Adapun bagi saya pribadi yang masih pemula, aturan di bawah ini lebih disukai karena memudahkan untuk belajar. 

Berikut ini cara meletakan kode HTML, CSS dan JavaScript pada theme blogger.

1. Login ke Blogger.

2. Pilih "Tema" kemudian klik panah bawah ( ) di sebelah tulisan "SESUAIKAN".

3. Klik "Edit HTML".

4. Dan kemarin kita sudah membuat template blogspot sendiri dari nol ini.

5. Letakan kode HTML yang didapat dari website tutorial di antara tag awal <body> dan </body> template Anda. Jika kode HTML Anda tentang menu navigasi atau header letakan sebelum tag <b:section class='main' id='main' showaddelement='yes'/>. Sedangkan kode HTML tentang footer atau bottombar di bawah tag tersebut. Intinya, kode HTML ini diletakan diantara tag <body> dan </body>.

6. Letakan kode CSS yang didapat dari blog lain di antara tag <b:skin><![CDATA[ dan tag ]]></b:skin> pada template Anda. Di sinilah semua kode CSS sebaiknya dikumpulkan. Meskipun pada beberapa kasus diletakan sebelum </head>. Atau bahkan ada juga yang menempatkannya di blok HTML dengan cara khusus.

7. Letakan kode JavaScript yang didapat dari situs lain pada template Anda sebelum tag akhir </body>.

8. Simpan template Anda dan lihat hasilnya.

 

Penutup

Dalam artikel ini, kita telah membahas cara meletakkan kode HTML, CSS, dan JavaScript pada template Blogspot. Dengan memahami langkah-langkah yang telah dijelaskan, Anda dapat dengan mudah menambahkan kode-kode yang didapat dari situs lain untuk memperluas fungsionalitas dan penampilan blog Anda.

Ingatlah untuk selalu berhati-hati saat melakukan perubahan pada template blog. Pastikan kode yang ditambahkan tidak mengganggu struktur atau tampilan keseluruhan blog. Selain itu, jika template sudah berkembang kami sarankan untuk mencadangkan template sebelum melakukan perubahan signifikan, sehingga Anda dapat mengembalikan ke versi sebelumnya jika terjadi masalah.

Dengan menguasai cara meletakkan kode HTML, CSS, dan JavaScript di template Blogspot. Maka semakin terbuka lebarlah cara untuk mengoptimalkan blog Anda. Meskipun kode HTML, CSS dan JavaScript didapat dari tutorial secara umum.

Selamat mencoba.

Baca Juga

Share This:

Tidak ada komentar:

Posting Komentar

Popular Posts