Cara Menambahkan Widget Multi Kolom di Blogger!
Pertama-tama kita akan menambahkan kode CSS dalam template blogger Anda dan kemudian tambahkan kode HTML-nya. Jadi tanpa membuang banyak waktu mari kita langsung menuju langkah-langkahnya.
- Login dulu ke akun Blogger Anda
- Klik Tab Template (pada menu drop down)
- Backup dulu template Anda bila perlu
- Klik Edit HTML
- Carilah kode ]]></b:skin> (gunakan Ctrl + F untuk memudahkan pencarian)Kemudian letakkan kode berikut ini di bawah kode ]]></b:skin
Buka:
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
Simpan Template Anda dan selesai Sekarang Anda masuk ke Tab Layout dan tambahkan widget Anda yang baru di Footer yang telah Anda buat seperti gambar ini.
Anda dapat mengamati bahwa ada empat kolom secara default dan Anda dapat menambahkan atau mengurangi jumlah kolom vertikal dengan mengikuti langkah-langkah di bawah ini: Cara Kostumisasi Widget! Saya akan membahasnya secara sederhana. Saya pikir untuk warna dan ukuran keseluruhan sudah tepat. Satu-satunya hal yang perlu Anda sesuaikan dengan Template Anda adalah lebar widget dan jumlah kolom vertikal. Untuk mengurangi atau menambah lebar keseluruhan widget, Anda tinggal perlu mengubah width: 960px; Jika Anda ingin mengurangi jumlah widget menjadi tiga, maka cukup hapus bagian kode ini:
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
Jika Anda ingin menambahkan ekstra kolom, maka tambahkan kode berikut di atas kode
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div> Ingat bahwa lowerbar#
adalah mengacu pada jumlah kolom. Jadi jika Anda ingin menambahkan kolom kelima maka cukup mengganti lowerbar# menjadi lowerbar5. Setelah Anda menambahkan kolom kelima maka ingatlah untuk mengubah width: 23%; menjadi width: 17%;. Anda ulangi langkah 3 untuk memperbanyak jumlah kolom yang Anda inginkan. Tapi 3, 4, dan 5 kolom itu adalah standar. Jika lebih dari itu maka akan terlihat jelek, jadi pertimbangkan itu. Semoga artikel ini bermanfaat bagi Anda dan jangan lupa untuk membagikan ini dengan teman-teman Anda jika Anda menyukainya. Terimakasih.
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div> Ingat bahwa lowerbar#
adalah mengacu pada jumlah kolom. Jadi jika Anda ingin menambahkan kolom kelima maka cukup mengganti lowerbar# menjadi lowerbar5. Setelah Anda menambahkan kolom kelima maka ingatlah untuk mengubah width: 23%; menjadi width: 17%;. Anda ulangi langkah 3 untuk memperbanyak jumlah kolom yang Anda inginkan. Tapi 3, 4, dan 5 kolom itu adalah standar. Jika lebih dari itu maka akan terlihat jelek, jadi pertimbangkan itu. Semoga artikel ini bermanfaat bagi Anda dan jangan lupa untuk membagikan ini dengan teman-teman Anda jika Anda menyukainya. Terimakasih.
EmoticonEmoticon