Membuat template blogger sendiri dari nol bukan sesuatu yang tidak mungkin. Memang akan terasa sulit dibayangkan jika melihat banyak baris kode ketika sudah jadi. Namun jika melihat kesederhanaan sejak awal membuat template blogger. Mungkin kesan tidak mungkin bisa itu tidak akan terlintas pada pikiran.
Ini seperti yang saya alami sendiri ketika baru pertama kali mengenal Blogger. Padahal sebelumnya saya sudah merasa jatuh cinta dengan CMS WordPress. Namun ketika diminta teman agar memperbaiki website usaha kecilnya. Justru saya angkat tangan karena tidak terbiasa dengan lingkungan Blogger.
Beranjak dari sanalah akhirnya teman saya keheranan. Lalu menceritakan awal mula pembuatannya yang digarap anak muda yang katanya lulusan SMP atau SMP juga tidak lulus. Saya lupa persis apa yang dikatakan oleh teman saya tersebut. Dan saya juga tidak bermaksud merendahkan lulusan apapun.
Yang jelas! Ucapan teman saya itu memacu keinginan untuk belajar mengenal Blogger. Hingga akhirnya saya pun kini bisa membuat template blogger sendiri dari nol. Dan terkait hal itu saya ingin berbagi tentang tahapan awal ketika membuat sebuah template blogger.
Cara Menyusun Kerangka Template Blogger Pertama Kali
Tahapan pertama agar bisa membuat template blogger sendiri adalah kerangka template. Pikirkanlah: "Apa yang ingin ditempatkan dalam sebuah blog? Ada berapa bilah sisi sidebar yang ingin kita buat? Apakah kita juga membutuhkan footer yang terbagi-bagi lagi?"
Cara lainnya bisa juga tanpa membayangkan seperti apa tampilannya. Entah dengan menggunakan secarik kertas dengan membuat pola desain sendiri. Dan bisa juga dengan cara melihat tampilan antarmuka website lain yang kita jadikan patokan yang ingin kita tiru desainnya.
Dan pada contoh di bawah ini misalkan saya ingin membuat template dengan dua bilah sisi sidebar. Sehingga yang terlihat akan terbagi menjadi 3 bagian; bilah sisi kanan dan kiri serta area postingan artikel kita. Adapun menu navigasi serta header nanti saja bagiannya Bootstrap agar lebih mudah.
Sekarang langsung masuk tahapan praktikumnya. Silahkan simak yang kali ini dengan contoh ingin membuat sidebar di sebelah kanan dan kiri.
1. Login ke dashboard Blogger.
2. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".
3. Hapus semua kode template default dan ganti dengan kerangka template blogger sendiri dari nol.
4. Templatte blogger kita sudah memiliki kerangka dengan 4 section. Tag <section> ini dapat digunakan untuk mengatur struktur dan tata letak konten dalam postingan blog. Dan jika ingin menambahkan section silahkan gandakan kemudian ganti nama "class" serta "id" untuk masing-masing sectionnya. Dan untuk tata cara penggunaan ke depannya juga bisa murni atau kombinasi dengan Bootstrap.
5. Sampai tahap ini template Blogger belum bisa menampilkan artikel yang diketik melalui dashboard Blogger. Untuk itu, letakan kode widget berikut ke dalam section <article> agar dashboard berfungsi.
6. Setelah section <article> terdapat widget <blog-posts> maka kodenya akan seperti ini:
7. Lakukan hal yang sama pada section lainnya, contoh berikut misalnya dengan menambahkan sebuah widget ke dalam section sidebar yang direncanakan berada di sebelah kiri.
8. Jika disatukan, maka kerangka template blogger praktikum hari ini adalah sebagai berikut:
9. Lihat template awal kita yang dibuat sendiri dari nol cuma sebanyak 26 baris.
10. Klik "Save" untuk menyimpan perubahan template.
11. Sekarang lihat perubahan yang menakjubkan karena dibantu oleh mesin Blogger. Dari kode template sebanyak 26 baris kini menjadi 902 baris. Udah hampir seribu aja nih kita ngoding hehe..... padahal dibantuin oleh mesin Blogger.
12. Itulah contoh kerangka template blogger yang dibuat sendiri dari nol. Langkah selanjutnya tinggal percantik saja dengan script yang banyak tersebar di internet.
Penutup
Hari ini kita belajar menyusun kerangka template blogger pertama kali. Yang sebetulnya ini penjelasan ringkas salah satu satu elemen blogger, yaitu: Tag <section>. Dan tag ini merupakan salah satu elemen HTML untuk mengelompokkan konten terkait menjadi satu bagian dalam sebuah dokumen web.
Dengan menggunakan tag <section> di Blogger kita dapat membagi postingan blog menjadi bagian yang lebih terorganisir. Hal ini dapat membantu pembaca dalam navigasi melalui konten dan memahami hierarki informasi di dalam postingan blog.
Penggunaan tag <section> juga dapat memberikan struktur yang lebih jelas pada setiap bagian. Hanya saja pada contoh di atas kita tidak membuat seluruh tag section. Selain itu, penggunaan tag ini juga dapat membantu mesin pencari dalam memahami struktur data pada sebuah blog .
Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar