Mempunyai template hasil karya sendiri merupakan salah satu impian seorang blogger. Terlepas apakah blog yang dia kelola berbasis wordpress atau pun blogger. Pada intinya sama saja karena berkutat dengan banyak script yang sama; yaitu HTML, CSS dan PHP.
Ini yang kadang menjadi masalah bagi sebagian blogger. Belum lagi banyaknya pilihan software yang tersedia. Memang dalam hal ini kita memiliki kemerdekaan dalam belajar. Namun tetap saja jika bergelut dengan kode adalah hal yang membosankan.
Oleh karena itu, ada alternatif lain yang perlu dicoba. Terutama yang ingin membuat template dengan cara yang mudah. Software ini disebut dengan page builder yang cara kerjanya cukup drag and drop. Contoh merk software ini sangat banyak ditemui di internet.
Adapun pada praktek kali ini akan mencoba MDB-Builder karena terkait dengan Bootstrap. Setelah itu kita pasang template bootstrap yang bisa kita download agar berjalan di blogspot. Berikut ini langkah selengkapnya membuat template dengan mdb-builder untuk Blogspot.
Cara Mendaftarkan Diri di MDB-Builder
Sebelum membuat template sendiri dengan cara drag and drop. Hal pertama yang harus dilakukan adalah mendaftarkan diri secara gratis di situs mdb-builder.
1. Kunjungi laman web mdb-builder.
2. Klik "Sign up for free" untuk membuat akun secara gratis.
3. Masukan data-data yang dibutuhkan seperti nama user, alamat email dan password setelah itu klik sign up.
4. Proses pendaftaran selesai ditandai dengan pemberitahuan:"registration completed".
Cara Membuat Template Bootstrap dengan MDB-Builder
Selanjutnya kita masuk tahapan inti; yaitu membuat template bootstrap. Pada tahap ini dilakukan dengan cara drag and drop atau menggunakan template yang sudah ada. Berikut ini langkah selengkapnya membuat template bootstrap dengan mdb-builder.
1. Buka tab baru dan kunjungi mdb-builder, masukan username serta password dan klik "Login".
2. Klik "Use it" untuk menggunakan contoh theme yang sudah ada. Atau klik "Create new project" untuk membuat theme bootstrap dari nol.
3. Klik and drag elemen blog yang dibutuhkan yang ada di sebelah kanan.
4. Tampilan web akan persis seperti tampak pada layar (sebelah kiri). Konsep ini dikenal dengan WYSIWYG (What You See Is What You Get).
5. Jika ada perubahan silahkan klik elemen website yang ingin diperbarui. Setelah terseleksi akan muncul ikon di atasnya yang berfungsi untuk memperlebar atau memperkecil, merubah posisi ke arah atas atau ke bawah atau menghapus elemen blog yang terseleksi (lagi diklik).
6. Untuk mengganti gambar latar juga bisa dilakukan.
7. Begitu juga jika kita ingin merubah tulisan pada elemen situs web. Caranya tinggal klik saja tulisan yang ingin diedit. Setelah itu, tulisan yang ada bisa dirubah sesuai keinginan.
8. Pemilihan warna juga bisa dilakukan dengan melakukan klik icon gerigi (di atas tulisan download dan di atas icon untuk menghapus project).
8. Klik download jika project sudah selesai. Desain my-project sederhana bin asalan saya contohnya ini.
Cara Menerapkan Template Bootstrap MDB-Builder di Blogspot
Untuk membuat template bootstrap yang sudah kita desain di atas berjalan di Blogspot. Maka penting diperhatikan pada saat menerapkan script html, css dan javasript. Karena hasil download my-project di mdb-builder menghasilkan sebuah file .html, satu folder css, satu folder gambar dan dan satu folder javascript. Sedangkan template blogger hanya terdiri atas sebuah file dengan ekstensi xml. Bagaimana memasukan script-script di atas sehingga masuk ke dalam satu file xml? Berikut ini pengalaman saya ketika mencoba melakukan praktek tersebut.
1. Buka dashboard Blogger > Tema > Sesuaikan > Edit HTML.
2. Hapus semua script blogger bawaan dan ganti dengan script dasar seperti berikut ini.
3. 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>.
4. Masukan script CSS setelah kode di atas. Script CSS diambil dari folder css hasil download dengan nama file mdb.min.css.
5. Jika mengalami masalah kesalahan sintaks css, javascript dan html padahal hasil copas. Biasanya hanya menambahkan tag penutup seperti </img> atau </input>. Silahkan coba juga paste via tool blogger ini. Setelah menekan tombol parse script silahkan copy dan coba paste ulang di template blogspot.
6. Masukan sebagian script HTML yang ada file index.html. Script yang dimasukan ditandai dengan kalimat <!-- Start your project here --> dan diakhiri dengan kalimat <!-- End your project here -->. Script ini dimasukan setelah tag <body> di template blogspot anda.
7. Pada contoh di bawah ini ada di baris 22 yang kalau ditempelkan ke template blogspot akan terlihat banyak dan berbaris-baris.
8. Terakhir masukan script JavaScript yang ada di folder js dengan nama file mdb.min.js.
9. Ketika memasukan kode JavaScript ke dalam Blogger ini silahkan apit dengan sintaks <script type="text/javascript"> dan </script>. Atau bisa juga dengan mengetikan <script> terlebih dahulu kemudian paste script javascript hasil download tadi dan tutup dengan kalimat </script>.
10. Untuk script blogger <b:section class='main' id='main' showaddelement='yes'/> jika berubah otomatis dengan tambahan dari blogger silahkan kembalikan ke asalnya.
11. Adapun seting seluler silahkan ganti menjadi kustom (custom) kemudian klik simpan.
Download Template Bootstrap Hasil Drag and Drop di MDB-Builder
Cara membuat template bootstrap hanya dengan klik dan klik terasa sangat mudah. Begitu juga dengan adaptasi script html, css dan javascript ke dalam blogspot. Hanya saja template yang saya ujicoba masih terlihat sangat sederhana. Hal ini karena saya ingin memulainya dari hal yang paling mudah. Seperti inilah situs demo template bootstrap yang dipasang di blogspot.
Bagi Anda yang tertarik untuk memperbaikinya agar lebih menarik. Silahkan download template bootstrap ini melalui google drive saya.
Selamat mencoba.
Tidak ada komentar:
Posting Komentar