Belajar Bootstrap 5 dari Awal dengan Blogspot

Anda tertarik belajar bootstrap dari awal? Silahkan tentukan tujuannya agar lebih fokus. Terutama bagi pemula yang belajar komputer secara otodidak. Misalnya saya ingin membuat website dengan bootstrap. Tampilan website yang seperti apakah yang Saya inginkan? 

Sebagaimana dimaklumi bersama bahwasannya website mempunyai dua buah tampilan yang berbeda. Satu sisi digunakan oleh admin yang biasa dikenal dengan dashboard. Sisi lainnya biasa terlihat oleh pengunjung yang mencerminkan template website yang digunakan.

Dalam hal ini, apakah tujuannya disertai dengan dashboard admin yang juga dibuat dengan bootstrap? Jika itu yang dimaksud sepertinya tutorial kali ini tidak cocok. Karena secara saya sendiri yang juga masih belajar bootstrap 5. Menurutku, pilihan yang simpel dan lebih cepat menghasilkan sebuah karya adalah dengan cara kombinasi.

Iya, untuk urusan dashboard sebuah website kita serahkan saja dengan CMS (Content Management Systems) yang ada. Sehingga konsentrasi kita lebih fokus dengan cara membuat template website dengan bootstrap. Lain cerita jika kita tidak lagi termasuk kelas pemula dalam dunia bootstrap.

Setelah itu, sebaiknya kerucutkan lagi tujuan kita agar semakin sederhana. Karena secara fakta CMS yang ada sangatlah banyak. Namun yang paling terkenal dan banyak digunakan adalah Wordpress dan Blogspot. Dari dua itu tinggal pilih CMS apa yang ingin kita sandingkan dengan Bootstrap

Dan pada kesempatan ini izinkan saya mencoba mulai dengan Blogspot terlebih dahulu.

Belajar Bootstrap 5 dari Awal dengan Blogspot


Script Dasar Theme Blogspot dengan Bootstrap 5

Pada kesempatan yang lalu kita sudah mempelajari script dasar xml pada theme blogspot. Didalamnya kita melihat baris kode yang terdiri atas: <html> (tag html pembuka) dan </html> (tag html penutup), <head> dan </head>, serta <body> dan </body>. Kemudian setelah menyimpan di Blogspot akan otomatis ditambahkan baris kode lain oleh Blogger. Dan mengingatkan kembali tutorial sebelumnya, template blogspot juga harus memiliki tag b:skin dan b:section minimal satu.

1. Selengkapnya, di bawah ini script dasar paling minimal sebuah template blogspot tanpa bootstrap. Kode <?xml version........ ?> dan xmlns=......... /gml/expr'> termasuk kode yang ditambahkan otomatis.

2. Untuk memasukan bootstrap ke dalam blogspot, tempatkan baris kode berikut diantara <head> dan </head>. Lihat! Script Bootstrap diambil dari server CDN (Content Delivery Network) jsdelivr.net. Sebelumnya tambahkan tag meta viewport responsif. Hal ini karena Bootstrap didesain optimal terutama untuk perangkat mobile. Kode tersebut untuk memastikan rendering dan zooming yang tepat untuk semua perangkat ketika disentuh.

3. Sedangkan JavaScriptnya dengan baris kode berikut yang ditaruh sebelum tag penutup </body>.

4. Terakhir, agar posting artikel bisa dilakukan melalui dashboard blogger tambahkan baris kode ini untuk mengaktifkan widget postingan blog. Letaknya setelah kode <b:section class='main' id='main' showaddelement='yes'>. Jangan lupa atur tag penutupnya agar mempunyai pasangannya masing-masing.

5. Kesimpulannya, berikut ini script dasar theme bootstrap paling minimal dengan blogspot.


Penutup

Baris kode di atas merupakan template paling dasar menggunakan Bootstrap versi 5.1.3. Keajaiban memang belum terlihat karena script bootstrap belum digunakan. Adapun baris kode di atas baru pemanggilan. Dengan kata lain template sudah mempunyai koleksi script Bootstrap 5 yang siap digunakan. 

Mudah-mudahan tulisan berikutnya lebih banyak tentang cara menggunakan bootstrap. 

Oh ya, script di atas akan berubah menjadi panjang setelah disimpan di Blogger. Hal ini karena adanya penambahan script secara otomatis. Jangan lupa cek cara menghilangkan tulisan langganan entri atom. Pada tutorial tersebut ada baris kode yang harus dihapus. Kecuali jika Anda menginginkan tulisan langganan entri atom ini tetap tampil di beranda. Cara lainnya, bisa juga dengan membiarkan kode tersebut apa adanya. Namun pada pengaturan css di template silahkan beri nilai"none"agar tidak tampil dengan kode berikut: .feed-links{ display:none;}.

Selamat mencoba.

Baca Juga

Tidak ada komentar:

Posting Komentar