5 Januari 2014

Cara Membuat Bullet Berdampingan di blog

Bagi kalian yang ingin membuat daftar artikel, daftar link, daftar nama atau sebuah pembahasan yang menggunakan bullet pada postingan blog, namun ingin menampilkannya berdampingan, karena jika daftar sudah terlalu banyak akan membuat artikel semakin panjang hingga terlalu banyak memakan tempat postingan anda. Sebenarnya cara ini bisa dilakukan dengan menambah/mengubah padding, margin dan tipe style lainnya pada css, berhubung saya tidak begitu memahami bahasa css, akhirnya saya mengakali dengan membuat tabel tanpa border untuk membuat bullet berdampingan dengan rapi. Berikut contohnya.


Untuk membuat daftar bullet seperti diatas caranya mudah. Masuk ke akun blogger, buat postingan terbaru, lalu klik link/button html pada bagian kiri atas tepat sebelah link/button compose. lalu copy dan paste kode dibawah ke textbox editor anda.

<table border="0"><tbody>
<tr>
<td><ul style="margin: 0;"><li>Cara Membuat Bullet Berdampingan</li></ul></td>
<td><ul style="margin: 0;"><li>Cara Membuat Bullet Berdampingan</li></ul></td>
</tr>
<tr>
<td><ul style="margin: 0;"><li>Cara Membuat Bullet Berdampingan</li></ul></td>
<td><ul style="margin: 0;"><li>Cara Membuat Bullet Berdampingan</li></ul></td>
</tr>
</tbody></table>

Penjelasan
  • Lihat kode <table border="0">, maksud table border = 0 adalah ukuran border tabel = 0px atau tidak terlihat, untuk menampilkan border ubah angka 0 menjadi 1 atau 2 agar border lebih tebal.
  • Pada bagian <tr> yang ditutup dengan </tr> pertama adalah dua baris di sebelah kiri anda.
  • Pada bagian <tr> yang ditutup dengan </tr> kedua adalah dua baris di sebelah kanan anda.
  • Untuk menambah daftar baris pada kolom sebelah kiri copy kode dibawah ini tepat diatas </tr> pertama.
<td><ul style="margin: 0;"><li>Cara Membuat Bullet Berdampingan</li></ul></td> dibawah </td>
  • Untuk menambah daftar baris pada kolom sebelah kanan copy kode dibawah ini tepat diatas </tr> kedua.
<td><ul style="margin: 0;"><li>Cara Membuat Bullet Berdampingan</li></ul></td> dibawah </td>
  • Setelah selesai coba pratinjau untuk melihat hasilnya. Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar

Jika ada artikel yang tidak Anda mengerti, maka gunakan fasilitas kotak komentar ini atau pada halaman kontak untuk menanyakannya.

Best Regard


Decky canser