Sekarang pada part 1 tutorial membuat tempelate blog sendiri disini saya memberikan tutorial desain homepage blog dengan menggunakan komponen boostrap v4. prosesnya tidak lama hanya dalam beberapa menit saja selesai yah..
ok langsung saja, berikut kriteria homepage yang akan di desain :
- Menggunakan Boostrap
- Postingan disembunyikan dari tampilan Homepage
- Home page tersusun dari beberapa sesion (menu navigasi, image header, car title, dan footer)
Mengambil komponen boostrap
Mengapa kita menggunakan boostrap, ada beberapa alasan mengapa menggunakan boostrap yaitu Instan sudah disediakan style css, responsive dan mudah digunakan.
untuk menggunakannya cukup mudah kita hanya mengambil url link css dan JS nya saja, dengan cara mengunjungi website boostrap kemudia pada halaman beranda intruduktion nya sudah tersedia link yang haru kita Copy dan kita gunakan pada tempelate blogger kita.
selain itu untuk gunakan komponennya tinggal kita cari dan kita pilih sesuai keinginkan kita atau kebutuhan kita, mudah bukan. untuk dapat mengambil linknya teman-teman tinggal kunjungi situs boostrap pada link ini : https://getbootstrap.com/docs/4.0/getting-started/introduction/
jika sudah maka selanjutnya teman-teman mencari link css boostrap dan link JS boostrap, jika teman-teman kebingungan bisa melihat petunjuk gambar yang sudah saya sediakan dibawah ini
Cara menempatkan url css boostrap dan js boostrap
jika sudah temanteman copy linknya, yang harus dilakukan adalah menempatkan link-link tersebut kedalam tempelate kita, caranya yang pertama teman-teman klik menu TEMA yang ada di bilah kiri, setelah itu klik panah pada menu SESUAIKAN dan pilih EDIT HTML.
jika sudah maka teman-teman akan masuk pada halaman edit html tempelate blog, tinggal teman-teman pastekan tepat dibawah tag head "<head>". kemudian untuk link url JSnya teman-teman pastekan tepat diatas tag penutup body atau bisa teman-teman cari menggunakan tombol CTR + F, kemudian cari tag body penutup "</body>"
jika benar maka hasilnya akan seperti gambar dibawah ini:
Menyusun Sesion
Selanjutnya teman-teman tinggal membuat sesionnya seperti yang telah saya tunjuk pada tutorial membuat tempelate blog sendiri part 1, jika sudah maka selanjutnya kita tambahkan widget pada sesion yang telah kita buat "<b:section>" dengan cara klik menu tata letak disana teman-teman akan melihat menu add widget dan nama sesion <b:section> yang telah teman-teman buat.
contoh penulisan scrip sesion seperti ini :
<b:section id="beri nama id">
</b:section>
berikut contoh gambar tampilan pada menu tata letak, dari gambar terlihat ada sesion (<b:section id="kepala"></b:section>) tinggal kita klik ad widget dengan cara klik tambahkan widget (tulisan berwarna biru dan ada tanda +)
setelah klik tambahkan widget teman-teman pilih widget Html/JavaScript, teman-teman cari komponen yang mau digunakan bisa mencarinya di boostrap sepert
- image
- navigasi
- card title
- table
- dll
tinggal teman-teman copy script komponen yang ingin digunakan dan pastekan pada kolom konten widget, selanjutnya teman-teman bisa memberi nama pada widgetnya
