Pada pertemuan sebelumnya kita sudah berhasil membungkus "widget post" pada template blogspot dengan kode bootstrap. Widget ini berfungsi untuk menampilkan artikel yang kita tulis pada blogger. Sedangkan kode bootstrap menyederhanakan penyesuaian tampilan pada semua perangkat.
Sehingga,tata letak pada template blogspot dibuat dengan bootstrap agar responsif. Sedangkan penulisan artikel tetap menggunakan dashboard bawaan blogger agar tetap familiar.
Dalam hal ini, untuk tampilan antarmuka atau front end diarahkan dengan bootstrap. Sedangkan back end tetap menggunakan dashboard dari blogger. Saya pikir, pekerjaan ini lebih mudah ketimbang membuat dashboard sendiri menggunakan bootstrap.
Selanjutnya kita akan belajar bersama-sama menambahkan area sidebar pada template blogger. Kode yang digunakan tetap menggunakan sintaks dari Blogger namun dibungkus dengan kode bootstrap lagi. Seperti apakah caranya? Berikut ini hasil belajar otodidak saya tentang blogspot dan bootstrap.
Cara Bootstrap Menambahkan Sidebar Template Blogger
Cara membuat template blogger sendiri yang kita pelajari bersama-sama sudah bisa membuat menu navigasi dan memunculkan konten artikel atau postingan. Semua ini hanya menggunakan template blogspot dari nol kemudian dibalut dengan sedikit kode dengan bootstrap.
Berikutnya, yuks kita tambahkan sidebar dengan cara sebagai berikut. Untuk memudahkan agar tidak membuka pelajaran sebelumnya kita mulai template dari nol.
1. Buat template blogger dari nol.
2. Tambahkan bootstrap kedalam template blogger hingga menjadi seperti di bawah ini. Catatan! Jika nanti ada perubahan versi terbaru dari bootstrap silahkan ganti yang baru ya. Pada saat dibuat ini masih menggunakan versi terbaru; yaitu v5.2.0.
3. Untuk menu navigasi misalnya menggunakan kode berikut yang ditempatkan setelah <body>. Silahkan sesuaikan sendiri atau pilih salah satu dari daftar menu bootstrap. Selain itu bisa juga pilih menu lainnya yang sudah di bahas di sini.
4. Nah, ini juga sudah dibahas tentang cara membuat area untuk postingan blog. Silahkan letakan kode berikut setelah <body> dan baris kode menu navigasi di atas atau kode navigasi bootstrap sesuai pilihan teman-teman.
5. Kode diatas untuk mengganti kode "section" blogspot yang belum disertai "widget blog post" yang kemudian dibungkus dengan kode bootstrap berupa <div class='container mt-5'>
6. Dengan mengganti baris kode nomor 5 dengan nomor 4 kita sudah berhasil menampilkan postingan artikel melalui dashboard blogger.
7. Selanjutnya tambahkan kode berikut untuk menambahkan sidebar blogspot yang sudah disertai dengan widget 'Popular Post' misalnya.
8. Atau bisa juga hanya menambahkan section untuk sidebar saja. Biar nanti menambahkan widget melalui "Tata Letak" atau "Layout" pada Blogger.
9. Baris kode nomor 7 atau 8 ini disisipkan ke dalam <div class='container mt-5'>.
10. Sehingga jika baris kode untuk postingan blog (nomor 4) dan sidebar blogspot (nomor 7 atau 8) digabung maka akan terlihat seperti berikut ini.
11. Dan inilah cara membuat template blogger sendiri dari nol dengan bootstrap kali ini sudah bisa menampilkan postingan blog disertai dengan area sidebar.
10. Simpan template.
Kesimpulan
Jika kita perhatikan pada tata letak blogger terlihat tampilan sidebar berada di bagian bawah blog post. Berbeda halnya jika menggunakan pengaturan css secara langsung akan terlihat di samping.
Namun demikian kita jangan terlalu khawatir karena secara tampilan pada blog sudah berfungsi sebagaimana terlihat pada gambar screenshoot di bawah ini.
Satu lagi, pada template blogger yang baru saja kita buat terlihat hanya 50 baris kode. Namun setelah disimpan pada mesin blogger menjadi hampir seribu baris kode; yakni sekitar 890 baris lebih. Dengan demikian, mempelajari cara membuat template blogger sendiri akan semakin tampak lebih mudah dengan kode sumber awal. Ingat! jangan dulu dipusingkan dengan baris kode otomatis yang ditambahkan oleh mesin blogger ya.
Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar