Cara Membuat Tabel Responsive Di Blogger - JagoanQue
Blogging
Cara Membuat Tabel Responsive Di Blogger - JagoanQue. Mungkin banyak
diantara anda yang masih belum mengerti cara membuat tabel di blog, mungkin
ada juga yang sudah membuat akan tetapi tabel yang mereka gunakan tidak
responsive dengan template mereka.
Tabel ini juga sangat cocok untuk niche tekno yang membahas spesifikasi dan
harga, atau juga ada yang membutuhkan tabel ini untuk keperluan lainnya. Pada
kesempatan kali ini saya akan memberikan script tabel yang responsive untuk
anda.
Walaupun sudah banyak di internet yang membuat tutorial ini tetapi masih tidak
responsive dengan template anda masing masing. Anda juga tidak perlu takut
jika memberatkan loading page blog anda, dikarenakan script ini hanya
menggunakan CSS, jadi loading blog anda tetap wuzz. Yuk langsung saja simak
tutorialnya dibawah ini
Cara Membuat Tabel Responsive Di Blogger
1. Login kea kun “Blogger” anda
2. Cari menu “Tema” lalu “Edit HTML”
3. Cari kode
]]></b:skin>
4. Lalu letakkan kode CSS dibawah ini tepat diatas kode
]]></b:skin>
/* CSS Post Table */
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:5px 10px;text-align:left;vertical-align:top;}
.post-body table th {border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table.tr-caption-container {border:1px solid #e9e9e9;}
.post-body table caption{border:none;font-style:italic;} .post-body table{} .post-body td,
.post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) > td:hover {background-color:#0082d8;}
.post-body th{background:#bcdbfe;font-weight:bold;text-transform:uppercase;font-size:14px}
.post-body th:hover{background:#fdfdfd;}
.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}
.post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
.post-body td a[target="_blank"]:after {margin-left:5px;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container,
.post-body table.tr-caption-container img,
.post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {font-size:80%;padding:0px 8px 8px !important;}
.post-body li {list-style-type:square;} img {max-width:100%;height:auto;border:none;} table {max-width:100%;width:100%;margin:1.5em auto;} table.section-columns td.first.columns-cell{border-left:none} table.section-columns{border:none;table-layout:fixed;width:100%;position:relative} table.columns-2 td.columns-cell{width:50%} table.columns-3 td.columns-cell{width:33.33%} table.columns-4 td.columns-cell{width:25%} table.section-columns td.columns-cell{vertical-align:top} table.tr-caption-container{padding:4px;margin-bottom:.5em} td.tr-caption{font-size:80%} .widget ul {padding:0;}
5. Setelah itu “Simpan Tema”
Cara Membuat Tabel Di Postingan Blog
1. Cari menu “Postingan”
2. Setelah itu cari “Postingan Baru”
3. Kemudian cari menu “HTML” jangan mode “Compose”
4. Setelah itu masukan kode di bawah ini di dalam mode “HTML”
<table cellpadding="0" cellspacing="0" style="text-align: left;">
<tbody>
<tr> <th>Header Kolom 1</th> <th>Header Kolom 2</th> </tr>
<tr> <td>Baris 1 Kolom 1</td> <td>Baris 1 Kolom 2</td> </tr>
<tr> <td>Baris 2 Kolom 1</td> <td>Baris 2 Kolom 2</td> </tr>
<tr> <td>Baris 3 Kolom 1</td> <td>Baris 3 Kolom 2</td> </tr>
<tr> <td>Baris 4 Kolom 1</td> <td>Baris 4 Kolom 2</td> </tr>
<tr> <td>Baris 5 Kolom 1</td> <td>Baris 5 Kolom 2</td> </tr>
</tbody>
</table>
Jika anda ingin menambahkan kolom anda tinggal menambahkan kode yang saya
berikan di bawah ini
Untuk menambahkan kolom ;
<tr> <th>Header Kolom</th> </tr>
Untuk Menambahkan Baris ;
<tr> <td>Baris</td> </tr>
Demikian artikel saya yang berjudul
Cara Membuat Tabel Responsive Di Blogger, semoga dengan adanya artikel
ini bisa membantu anda untuk membuat tabel yang responsive di blog anda. Jika
ada pertanyaan seputar artikel ini silahkan bertanya di kolom komentar, saya
usahakan untuk membalas komentar anda satu per satu. Semoga bermanfaat