Cara Membuat Tabel Keren di Postingan Blogger

Cara Membuat Tabel Keren di Postingan Blogger – Sebelumnya saya sudah pernah menjelaskan beberapa cara mudah membuat tabel responsive di blog/blogspot. Namun kali ini saya membuatnya dengan tampilan yang jauh lebih menarik dengan efek saat di sentuh cursor mouse.

Tabel pada postingan blog ini saya buat agak lebih mirip dengan dengan tabel yang saya gunakan di dalam blog saya, namun dengan tambahan efek warna memanjang saat cursor pointer menyentuh tabel tersebut.

Tabel ini sangat cocok di gunakan jika ingin membuat pengumuman online, seperti tabel pengumuman nilai atau pengumuman kelulusan, karena akan lebih mempermudah untuk melihat barisan label yang panjang pada tabel tersebut.

Cara Membuat Tabel Keren di Postingan Blogger

  1. Buka Blogger
  2. Pilih Tema
  3. Pada menu SESUAIKAN, pilih Edit HTML
  4. Salin dan letakkan kode CSS yang sudah saya sediakan dibawah ini tepat berada diatas kode ]]></b:skin> atau </style>
    /* Tabel Blogger Responsive By Yuki */
    table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
    table{border-collapse:collapse;border-spacing:0;}
    .post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:7px;text-align:left;vertical-align:top;}
    .post-body table tr th {border:1px solid #6f7785;color:#fff;padding:8px 10px;text-align:left;vertical-align:top;font-size:16px}
    .post-body table th {background:#747d8c;}
    .post-body table tr th:hover{background:#57606f}
    .post-body table.tr-caption-container {border:1px solid #f6f8f9;}
    .post-body table caption{border:none;font-style:italic;}
    .post-body td, .post-body th{color:#57606f;vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;}
    .post-body table tr:nth-child(even) > td {background-color:#ecf0f1;}
    .post-body table tr:nth-child(odd) > td {background-color:#f6f8f9;}
    .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 {color:#666;font-size:80%;padding:0px 8px 8px !important;}
    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%}
    .post-body table tr:hover td {background:#b0b1b4;color:#FFFFFF;border-top: 1px solid #22262e;}
    table tr:nth-child(odd):hover td {background:#b0b1b4;}
  5. Kemudian pilih Simpan

Cara Menerapkan Tabel dalam Postingan Blogger

  1. Buat postingan blog yang ingin dibuatkan tabel
  2. Pilih Icon Pensil di sudut kanan postingan, kemudian pilih menu Tampilan HTMLCara Membuat Tabel Keren di Postingan Blogger
  3. Kemudian masukkan kode ini untuk membuat tabel dalam postingan blog
    <table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
    <tr><th>Nama</th><th>Keterangan</th> </tr>
    <tr><td>Nama1</td><td>Nilai1</td> </tr>
    <tr><td>Nama2</td><td>Nilai2</td> </tr>
    <tr><td>Nama3</td><td>Nilai3</td> </tr>
    <tr><td>Nama4</td><td>Nilai4</td> </tr>
    </tbody> </table>
  4. Yang saya Mark diatas, isi dengan data yang anda ingin tampilkan

Jika anda ingin menambahkan jumlah tabel lagi di bawahnya tambahkan kode <tr><td>Nama</td><td>Nilai</td> </tr> tepat berada diatas kode </tbody> </table> tadi.

Kesimpulan

Secara default biasanya template blogger baik itu yang premium ataupun gratis, biasanya sudah menyediakan format tampilan tabel. Jadi kita hanya perlu menambahkan kode diatas tadi pada Tampilan HTML Postingan untuk mendapatkan susunan dalam bentuk tabel.

Tinggalkan komentar