Tahap Pertama:
1. Login ke Blogger > Template > Edit HTML
2. Jangan lupa centang "Expand Template Widget"
3. Cari kode ]]></b:skin> lalu sisipkan kode CSS berikut ini tepat di atas ]]></b:skin>
<!-- Nice Table Tipnya.blogspot.com--> table th { padding-top: 7px; text-align: left; } .nice-table { border-collapse: collapse; border-spacing: 0; } .nice-table tr:first-child th { border-top: 0 none; } .nice-table th:first-child { border-left: 0 none; } .nice-table tr:first-child th:last-child { border-right-color: #5476FC; } .nice-table th { background-color: #5476FC; color: white; font-weight: bold; } .nice-table th, .nice-table td { border: 1px solid #EBEBEB; padding: 3px 10px; } .nice-table td { background-color: #E6E6E6; border-color: #E5E5E5 #CCCCCC #E5E5E5 #E5E5E5; color: #444444; } .nice-table td:last-child { border-right-color: #E5E5E5; } .nice-table tr:nth-of-type(2n) td { background-color: #FFFFFF; border-right-color: #E5E5E5; } .nice-table.spaced-table td, .nice-table.spaced-table th { padding: 10px; } .nice-table.wide { width: 95%; } .nice-table.narrow { width: 75%; } .nice-table.narrower { width: 50%; } .nice-table.narrowest { width: 35%; } <!-- Nice Table tipnya.blogspot.com-->4. Klik Simpan template Tahap Kedua:
Tahap kedua adalah saat anda membuat postingan Blogger yang akan menggunakan tabel, pastikan edit entri pada mode HTML bukan "Compose".
Untuk membuat tabelnya silahkan ikuti contoh kode di bawah ini
<table class="nice-table" style="width: 90%px;"><tbody> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> <tr> <td>kolom 1 baris 1</td> <td>kolom 2 baris 1</td> <td>kolom 3 baris 1</td> <td>kolom 4 baris 1</td> </tr> <tr> <td>kolom 1 baris 2</td> <td>kolom 2 baris 2</td> <td>kolom 3 baris 2</td> <td>kolom 4 baris 2</td> </tr> <tr> <td>kolom 1 baris 3</td> <td>kolom 2 baris 3</td> <td>kolom 3 baris 3</td> <td>kolom 4 baris 3</td> </tr> <tr> <td>kolom 1 baris 4</td> <td>kolom 2 baris 4</td> <td>kolom 3 baris 4</td> <td>kolom 4 baris 4</td> </tr> </tbody> </table>
Header 1 | Header 2 | Header 3 | Header 4 |
---|---|---|---|
kolom 1 baris 1 | kolom 2 baris 1 | kolom 3 baris 1 | kolom 4 baris 1 |
kolom 1 baris 2 | kolom 2 baris 2 | kolom 3 baris 2 | kolom 4 baris 2 |
kolom 1 baris 3 | kolom 2 baris 3 | kolom 3 baris 3 | kolom 4 baris 3 |
kolom 1 baris 4 | kolom 2 baris 4 | kolom 3 baris 4 | kolom 4 baris 4 |
Catatan:
- Jika ingin menambah atau mengurangi jumlah kolom dan baris, silahkan mengedit dengan memperhatikan kode <td> dan <tr>
- Disetiap kolom akan ada kode <td> dan </td>
- Disetiap baris akan ada kode <tr> dan </tr>
- "Tahap Pertama" cukup dilakukan sekali saja, dan "Tahap Kedua" dilakukan setiap membuat tabel
- Ada pertanyaan silahkan komentar.
cara daftar blog , cara membuat , Informasi , membuat blog , Tips dan Trik , trik belajar blog