Apa yang terpikirkan sekarang ketika ingin membuat template blogger yang baru? Ruang iklan, ya ingin menghadirkan banyak ruang iklan yang potensial. Kesimpulan ini setelah bergabung beberapa saat lamanya sebagai publisher Ezoic.
Dari pengalaman tersebut ada banyak pelajaran yang dipetik seputar placeholder yang menyediakan ruang untuk iklan. Pengaturan placeholder itulah yang mengenalkan beragam ukuran iklan yang tersedia. Sehingga, seorang blogger mesti menyediakan sebuah template yang tepat untuk tujuan itu.
Lalu bagaimana penerapannya jika kita hanya seorang blogger biasa? Tidak seperti Ezoic yang memiliki mesin kecerdasan buatan untuk menempatkan iklan sesuai preferensi pengguna? Menurut saya pribadi, sekarang sudah saatnya menggunakan template blogger dengan 3 column gaes.
Cara Membuat Template Blogger 3 Lajur dengan Bootstrap
Template blogger dengan 3 kolom memiliki lebih banyak ruang dan kesempatan untuk menampilkan script HTML. Jika ingin menampilkan widget maka ini memudahkan pengunjung blog agar tidak perlu scroll ke bawah hanya karena ingin melihat fitur lain yang dimiliki oleh blog Anda.
Karena ketersediaan ruang yang ada di sebelah kanan dan kiri bisa digunakan untuk tujuan tersebut. Begitu juga jika seorang blogger ingin memaksimalkan iklan dan pendapatannya. Dengan template 3 kolom ini memungkinkan untuk menampilkan lebih banyak iklan tanpa mengganggu konten utama.
Anda tertarik untuk belajar bersama membuat template blogger 3 columns? Berikut ini tutorial selengkapnya tentang cara membuat template blogger 3 lajur menggunakan Bootstrap.
1. Gunakan template blogger dasar yang sudah terpasang cdn Bootstrap.
2. Kita bagi menjadi 3 column dengan kode berikut yang diletakan setelah tag <body>:
3. Untuk kolom pertama; yaitu "class col-lg-3" paling awal masukan section berikut:
Pada section di atas nanti bisa diisi dengan widget yang Anda inginkan, baik melalui "Tata Letak"/"Layout" atau pun langsung menggunakan kode di "Edit HTML".
4. Untuk class yang lebih lebar isi dengan section "article" atau "main" yang sudah ada sebelumnya pada template dasar nomor 1 di atas. Silahkan cut kode yang terlihat seperti di bawah ini dan pindahkan setelah tag <div class=col-lg-6'> dan sebelum tag penutup </div> dari kolom yang lebar yang ada di tengah ini.
di dalam section tersebut isi dengan widget "blog post" agar tersambung dengan dashboard Blogger. Masukan kode di bawah ini sebelum "</b:section>" dari class 'article' di atas.
5. Untuk kolom ketiga 'class=col-lg-3' yang terakhir, masukan section berikut.
Sedangkan widgetnya bisa menggunakan kode di bawah. Atau jika Anda menginginkan widget "Popular Post" bisa akses melalui "Layout/Tata Letak".
7. Kode seluruhnya akan tampak seperti berikut jika menggunakan class='main'
8. Atau seperti berikut jika menggunakan class='article'.
9. Klik "Save", kode akan bartambah banyak secara otomatis menjadi 900 baris kode.
10. Silahkan buat sebuah postingan sehingga akan tampak artikel berada di tengah-tengah dengan kedua sisi yang sudah diatur menjadi "left-sidebar" dan "right-sidebar". Kira-kira gambarannya akan tampak seperti tangkapan layar berikut ini.
Kesimpulan
Dengan menggabungkan kepopuleran Blogger sebagai platform blogging dan fleksibilitas desain yang ditawarkan oleh Bootstrap. Cara membuat template Blogger dengan Bootstrap menjadi solusi yang efektif bagi para blogger. Dengannya kita bisa menghadirkan tampilan yang profesional dan menarik.
Dan dalam artikel ini, telah diuraikan langkah-langkah yang jelas dan mudah diikuti untuk menciptakan tata letak yang dinamis, responsif, dan ramah seluler. Serta memastikan pengalaman pengguna yang optimal di berbagai perangkat meskipun memiliki 3 column.
Adapun pemilihan Bootstrap sebagai framework yang disandingkan dengan Blogger ini dengan beberapa alasan. Salah satunya adalah karena Bootstrap memiliki beragam komponen dan fitur yang telah teruji yang diharapkan dapat meningkatkan performa situs secara keseluruhan.
Dengan demikian, para pengguna Blogger yang ingin mengambil langkah lebih maju dalam desain dan fungsionalitas blog mereka, dapat mengadopsi panduan dasar ini agar bisa menciptakan template yang lebih menarik dan modern secara efisien, serta mengembangkan templatenya lebih luas lagi.
Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar