Membuat template blogger sendiri membutuhkan banyak waktu. Sedangkan di luar sana ada banyak cara yang tersedia. Beragam referensi inilah yang membuat bingung bagi pemula yang belajar desain web otodidak. Puncaknya, keinginan membuat template sendiri akhirnya tidak tercapai.
Salah satu penyebabnya mungkin karena tidak menggunakan satu metode terlebih dahulu. Entah karena sumber rujukannya yang mempunyai konten campur aduk. Atau memang sumber rujukannya yang tidak tertata rapi seperti blog saya ini.
Untuk itulah, artikel kedua ini saya berikan judul yang sama dengan artikel sebelumnya. Maksud yang diinginkan adalah agar teman-teman bisa melihat jenjang/tingkatan materi. Sehingga dari pemberian nomor (X) pada judul akan memberikan panduan tentang apa yang ingin dipelajari.
Dan kali ini memasuki pertemuan kedua theme Blogger Bootstrap dengan bahasan: Cara Install Bootstrap pada theme Blogger melalui server CDN (Content Delivery Network).
Theme Blogger Bootstrap (2); Memasang Bootstrap via CDN
Sejatinya, Bootstrap bisa diunduh kemudian diletakan pada folder khusus. Setelah itu, file index.html dibuat kemudian diunggah ke cPanel bersamaan file lainnya. Dan file index.html ini berada dalam sebuah direktori yang terdapat didalamnya beberapa folder dan file terkait. Direktori inilah yang merupakan project kita yang tersimpan di server hosting.
Berbeda dengan cara di atas, platform Blogger memiliki ciri khas tersendiri. Dalam hal ini kita tidak bisa mengunduh Bootstrap dan menempatkannya di sana. Dan memang tidak perlu juga ya karena Blogger mempunyai teknologi tersendiri. Lalu bagaimana cara menempatkan Bootstrap pada theme Blogger? Content Delivery Network (CDN) adalah jawabannya.
Tenang, cara ini bukan berarti tidak lebih baik dibandingkan dengan pertama. Karena sebagaimana dikatakan oleh yoast sendiri:"Your SEO won’t suffer if you activate a CDN". Bahkan disebutkan di sana memiliki banyak keuntungan. Seperti meningkatkan kecepatan loading sebuah website, mengurangi biaya bandwith dan lain-lain.
Hal ini disebabkan karena CDN menyimpan (caches) konten statis seperti file HTML, CSS, JavaScript dan file gambar yang tetap sama untuk setiap pengguna. Tertarik menggunakan layanan CDN? Berikut ini cara install Boostrap pada theme Blogger melalui server CDN.
1. Login ke dashboard Blogger.
2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".
3. Perhatikan template Blogger yang sudah dibuat pada pertemuan sebelumnya.
4. Tambahkan baris kode berikut diantara tag <head> dan </head>.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"/>
5. Tambahkan juga baris kode berikut ini sebelum tag </body>.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
6. Template blogger bootstrap akan terlihat seperti berikut.
7. Simpan template.
Pada tutorial kali ini kita menggunakan Bootstrap 5.3.0. Hari ini pada saat artikel dibuat meerupakan versi terbaru. Namun entah besok lusa jika getbootstrap mengeluarkan versi baru. Untuk itu, silahkan update dengan mengganti baris kode pada nomor 4 dan 5 (jika ada versi terbaru).
Begitu juga dengan CDN pada contoh di atas menggunakan jsDelivr. Layanan server cdn ini bukan satu-satunya dimiliki jsDelivr. Mungkin artikel ke depan perlu dibuat secara khusus alternatif CDN. Karena bisa jadi kan ada yang lebih cocok dengan server CDN lain yang mungkin sering digunakan.
Sekian tutorial kali ini tentang cara pasang Bootstrap pada theme Blogger. Yakni dengan memanfaatkan layanan server CDN yang tersebar di seluruh dunia.
Selamat mencoba.
Tidak ada komentar:
Posting Komentar