Ada yang menarik dari kata pencarian yang diketik oleh pengunjung. Salah seorang menulis kata-kata membuat template blogger dengan bootstrap. Satunya lagi membuat template blogger sederhana dengan bootstrap. Sepertinya saya harus mencari tahu sekalian sama tempe tentang theme bootstrap ini.
Oh, ternyata Bootstrap itu dulunya bernama Twitter Blueprint. Framework CSS yang dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter. Jejak digital orang pertama bisa diketahui dari github. Berikut ini tangkapan layar laman salah satu developer Bootstrap di sana.
Oke, kita mulai belajar bootstrap sedikit-sedikit dengan cara copas sana sini.... 😀😅😇
Cara Membuat Theme Portofolio Blogspot dengan Bootstrap
Bootstrap yang akan kita praktekan kali ini versi 5.0.2. Untuk memahami lebih jauh silahkan kunjungi laman web Bootstrap. Adapun tutorial ini hanya contoh penggunaan dalam bentuk praktis. Harapannya semoga bisa diikuti pemula yang belajar komputer secara otodidak.
Begitu juga dengan script yang tertera di bawah ini. Semuanya diambil dari startbootstrap.com kemudian diadaptasi ke lingkungan blogger. Lebih jelasnya, silahkan ikuti praktek membuat theme portofolio di Blogspot dengan Bootstrap berikut ini.
1. Hapus semua kode theme di Blogspot dan ganti dengan script dasar berikut ini.
2. Kita panggil Bootstrap 5.02 dengan cara menempatkan kode di bawah ini diantara kode <b:skin><![CDATA[]]></b:skin>. Tepatnya setelah <b:skin><![CDATA[ dan sebelum ]]></b:skin>.
3. Tempatkan kode di bawah ini sebelum ]]</b:skin>.
4. Tempatkan kode di bawah ini setelah <body> sebelum <b:section class='main' id='main' showaddelement='yes'> --- </b:section>.
5. Silahkan edit gambar dan kata-kata yang ingin dirubah. Contohnya ganti foto dengan merubah url berikut ini:
6. Untuk mengedit kata-kata silahkan cari dengan Ctrl+F. Silahkan tambahkan juga alamat sosial media Anda. Pada contoh di atas masih kosong dan belum diisi.
7. Tempatkan kode berikut di bawah script yang baru dipaste nomor 4 di atas dan sebelum </body>.
8. Hasil akhir akan terlihat seperti laman blogspot saya.
Catatan Tambahan
Praktek di atas bisa terjadi kemungkinan error yang tidak disengaja. Hal ini disebabkan kode <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'/> berubah menjadi panjang karena otomatis ditambahkan oleh Blogger. Efeknya akan terlihat pada layar berupa tanda subscribe layanan Atom di bagian bawah footer. Untuk mengatasi hal tersebut silahkan lakukan hal-hal berikut ini.
1. Klik tanda panah kecil agar kode di samping terlihat lebih ringkas.
2. Script yang tadinya panjang akan terlihat dalam satu baris.
3. Hapus kode tersebut dan ganti dengan kode ini.
4. Klik simpan.
Download Template Portofolio Blogspot dengan Bootstrap
Theme bootstrap portofolio edisi belajar otodidak kali ini bisa juga didownload melalui google drive ini. Format file menggunakan ekstensi xml sehingga bisa langsung diterapkan di Blogspot. Silahkan unduh dan perbaiki theme tersebut agar lebih menarik lagi.
Selamat mencoba.
Tidak ada komentar:
Posting Komentar