Cara membuat template sendiri selalu menarik perhatian. Terlebih lagi dengan munculnya satu per satu website builder. Sepertinya ke depan semakin lebih mudah membuat template. Bahkan untuk pemula yang sangat alergi dengan kode. Termasuk bagi mereka yang tertarik menggunakan bootstrap.
Meskipun bootstrap terdengar sedikit baru dibandingkan dengan yang lain. Namun, perkembangan yang sangat cepat semakin mempopulerkan teknologi ini. Apalagi jika menggunakan aplikasi yang hanya butuh drag and drop. Sekarang semua orang bisa membuat website dengan mudah.
Nah, kali ini kita akan kembali belajar membuat template bootstrap. Praktek ini sengaja diterapkan di blogspot versi gratisan. Sehingga semua orang bisa mengikuti tutorial membuat template bootstrap tanpa kecuali. Hanya saja, proses drag and drop menggunakan bootstrap builder tidak ditampilkan. Tapi kita langsung menerapkan kode yang dihasilkan tersebut ke dalam theme blogger.
Adapun link demo hasil script menu bootstrap disertai animasi ini bisa dilihat di sini. Jika teman-teman tertarik dengan menu tersebut silahkan ikuti tutorial cara membuat menu keren dengan bootstrap berikut ini.
Cara Membuat Menu Keren dengan Bootstrap
Script bootstrap untuk membuat template bootstrap banyak bertebaran di internet. Ada script untuk membuat carosusel, footer atau sidebar. Tidak terkecuali dengan script menu navigasi dan header. Dan semuanya itu bisa diambil secara gratis kecuali kuota Anda.
Dan untuk menerapkan script tersebut di lingkungan blogger. Sebetulnya kita hanya perlu menyatukan semua kode ke dalam sebuah file xml. Sehingga file css, html dan javascript semuanya ada dalam file template. Nah, dari sekian banyak script tersebut kemudian saya pilih menu navigasi yang disertai animasi.
Semoga menu ini cocok dengan kriteria seseorang yang mencari artikel dengan kata kunci di atas. Berikut ini tutorial selengkapnya tentang cara membuat menu keren dengan bootstrap di blogspot.
1. Hapus semua kode theme di Blogspot dan ganti dengan script dasar berikut ini.
2. (Opsional) Silahkan tempatkan kode berikut di antara <head> dan </head>.
3. Tempatkan script Bootstrap diantara kode <b:skin><![CDATA[]]></b:skin>. Tepatnya setelah <b:skin><![CDATA[ dan sebelum ]]></b:skin>.
4. Tempatkan kode css berikut sebelum ]]></b:skin>.
5. Tambahkan kode css setelah kode di atas sebelum ]]></b:skin>.
6. Tempelkan kode berikut setelah <body>
Cara Setting Setting Tampilan Blog di Perangkat Seluler
Agar tampilan template bootstrap terlihat maksimal jika dilihat dari layar mobile. Berikut ini langkah-langkah yang perlu dilakukan.
1. Masuk ke dasboard Blogger.
2. Pilih "Tema".
3. Klik tanda panah ke bawah setelah tulisan "Sesuaikan".
4. Klik "Setelan Seluler".
5. Pilih "Seluler".
6. Pada bagian "Konfigurasi tampilan seluler" pilih tanda panah ke bawah sebelum tulisan "Default".
7. Pilih "Kustom".
8. Klik "Simpan".
Kesimpulan
Template bootstrap dengan menu navigasi keren sudah berhasil kita buat. Silahkan lakukan perubahan pada bagian <!--Main Navigation--> untuk menyesuaikan dengan tema blog Anda. Seperti mengganti gambar latar belakang, kata-kata pembuka dan lain-lain. Dan script ini terletak setelah tag <body> dan sebelum tag penutup </body>.
Selamat mencoba.
Tidak ada komentar:
Posting Komentar