Cara Menciptakan Table Responsive Pada Postingan Blog
Table pada postingan blog biasanya dipakai untuk menampilkan list semoga terlihat rapi, beda halnya dikala kita menciptakan list tanpa menggunakan table, postingannya pun akan kurang lezat dilihat.
Membuat table di blog tidak ibarat menciptakan table di microsoft office, fiturnya pun sudah disediakan, kita tinggal tambahkan atau isi seberapa banyak table yang kita butuhkan dan tablepun sudah jadi. Nah jikalau diblog biasanya ada kode-kode yang harus kita tambahkan kemudian di panggil didalam postingan artikel kita.
Table dalam blog biasanya sering dipakai blog dengan niche penyedia template blog, jadi daftar fitur suatu template yang ditampilkanpun dapat tertata dengan baik dan akan terlihat rapi juga. Ada banyak cara untuk menciptakan table pada blog, namun aku sering menemukan table yang mereka buat tidak responsive untuk di terapkan dalam sebuah postingan blog, maka dari itu aku akan membagikan beberapa cara untuk Membuat Tabel responsive dengan menambahkan warna pada kolom-kolomnya. Selain responsive, table yang akan aku bagikan ini sangat lezat untuk dilihat dan sangat cocok untuk blog yang sering memposting fitur-fitur untuk sebuah template.
Ada 2 style table responsive yang akan Kored Id bagikan sekarang. caranya membuatnyapun sangat gampang untuk di praktekan kembali. Anda hanya tinggal menambahkan isyarat css nya dan memanggil isyarat css tadi ke dalam postingan anda. sepakat eksklusif saja,
Baca Juga :
Cara Membuat Table Responsive Pada Postingan Blog
Tabel Style 1
1. Seperti Biasa Login ke Blogger.com
2. Pilih Tema -> Edit HTML
3. Kemudian, Cari isyarat Css ]]></b:skin> atau </style> (Gunakan ctrl+ Untuk Mencarinya)
4. Lalu Copy isyarat dibawah ini dan Paste sempurna sebelum isyarat ]]></b:skin> atau </style>
5. Kemudian, Simpan Tema
Kode diatas merupakan isyarat css untuk menciptakan suatu table pada postingan blog, nah kini cara menambahkan tabel kedalam postingannya.
Cara Menerapkan Table Kedalam Postingan Blog
1. Masih di dasboard Blogger
2. Pilih Postingan -> Entri Baru
3. Pilih Tab HTML bukan Compose
4. Lalu Tambahkan atau Sisipkan isyarat ini didalam postingan anda
Baca Juga :
Lang-langkahnya sama ibarat table style 1
1. Login ke Blogger.com
2. Pilih Tema -> Edit HTML
3. Cari isyarat Css ]]></b:skin> atau </style>
4. Lalu Copy isyarat dibawah ini dan Paste sempurna sebelum/ diatas isyarat ]]></b:skin> atau </style>
5. Simpan Tema
Cara Menerapkan kedalam postingan
1. Pilih Postingan -> Entri Baru
2. Pilih Tab HTML
3. Lalu Sisipkan isyarat ini didalam postingan
4. Silahkan rubah goresan pena yang diberi warna merah sesuai impian atau kebutuhan anda.
Jika Membutuhkan 2 Table saja silahkan hapus antara <td> dan (Tulisan)</td></tr>
Demikian Cara Membuat Table Responsive Pada Postingan Blog. Gunakan salah satu saja ya. Table responsive diatas dapat dipakai diberbagai macam template blog. Semoga dapat diterapkan kedalam blog anda.
Sumber isyarat : Analis Yuki. Namina Kiky
Sumber https://www.kored.id/
Membuat table di blog tidak ibarat menciptakan table di microsoft office, fiturnya pun sudah disediakan, kita tinggal tambahkan atau isi seberapa banyak table yang kita butuhkan dan tablepun sudah jadi. Nah jikalau diblog biasanya ada kode-kode yang harus kita tambahkan kemudian di panggil didalam postingan artikel kita.
Table dalam blog biasanya sering dipakai blog dengan niche penyedia template blog, jadi daftar fitur suatu template yang ditampilkanpun dapat tertata dengan baik dan akan terlihat rapi juga. Ada banyak cara untuk menciptakan table pada blog, namun aku sering menemukan table yang mereka buat tidak responsive untuk di terapkan dalam sebuah postingan blog, maka dari itu aku akan membagikan beberapa cara untuk Membuat Tabel responsive dengan menambahkan warna pada kolom-kolomnya. Selain responsive, table yang akan aku bagikan ini sangat lezat untuk dilihat dan sangat cocok untuk blog yang sering memposting fitur-fitur untuk sebuah template.
Ada 2 style table responsive yang akan Kored Id bagikan sekarang. caranya membuatnyapun sangat gampang untuk di praktekan kembali. Anda hanya tinggal menambahkan isyarat css nya dan memanggil isyarat css tadi ke dalam postingan anda. sepakat eksklusif saja,
Baca Juga :
- Cara Membuat Link Sumber Otomatis Ketika Artikel Blog di Copas Orang Lain
- Cara Praktis Membuat Effect Double Click To Select Dengan Tag Selection 'kbd'
- Tips Cara Mengajukan Ulang Monetisasi Youtube Supaya Di Monetisasi Kembali
Cara Membuat Table Responsive Pada Postingan Blog
Tabel Style 1
1. Seperti Biasa Login ke Blogger.com
2. Pilih Tema -> Edit HTML
3. Kemudian, Cari isyarat Css ]]></b:skin> atau </style> (Gunakan ctrl+ Untuk Mencarinya)
4. Lalu Copy isyarat dibawah ini dan Paste sempurna sebelum isyarat ]]></b:skin> atau </style>
table{background-color:transparent;width:100%;max-width:100%;margin-bottom:20px} table img{width:100%;height:auto} table.tr-caption-container{padding:0;border:none} table td.tr-caption{font-size:12px;font-style:italic} table{border-spacing:0;border-collapse:collapse} td,th{padding:0} th{text-align:left} .table{width:100%;max-width:100%;margin-bottom:20px} .table a{text-decoration:none!important} .table > thead > tr > th,.table > tbody > tr > th,.table > tfoot > tr > th,.table > thead > tr > td,.table > tbody > tr > td,.table > tfoot > tr > td{padding:8px;line-height:1.42857143;vertical-align:top} .table > thead > tr > th{background-color:#26C281;color:#fff;vertical-align:bottom} .table > thead > tr > th a{color:#fff!important} .table > caption + thead > tr:first-child > th,.table > colgroup + thead > tr:first-child > th,.table > thead:first-child > tr:first-child > th,.table > caption + thead > tr:first-child > td,.table > colgroup + thead > tr:first-child > td,.table > thead:first-child > tr:first-child > td{border-top:0} .table > tbody > tr:nth-of-type(odd){background-color:#f9f9f9} table col[class*="col-"]{position:static;display:table-column;float:none} table td[class*="col-"],table th[class*="col-"]{position:static;display:table-cell;float:none} .table-responsive{min-height:.01%;overflow-x:auto} @media screen and (max-width:767px){.table-responsive{width:100%;margin-bottom:15px;overflow-y:hidden;-ms-overflow-style:-ms-autohiding-scrollbar}.table-responsive > .table{margin-bottom:0}.table-responsive > .table > thead > tr > th,.table-responsive > .table > tbody > tr > th,.table-responsive > .table > tfoot > tr > th,.table-responsive > .table > thead > tr > td,.table-responsive > .table > tbody > tr > td,.table-responsive > .table > tfoot > tr > td{white-space:nowrap}.table-responsive > .table-bordered{border:0}}5. Kemudian, Simpan Tema
Kode diatas merupakan isyarat css untuk menciptakan suatu table pada postingan blog, nah kini cara menambahkan tabel kedalam postingannya.
Cara Menerapkan Table Kedalam Postingan Blog
1. Masih di dasboard Blogger
2. Pilih Postingan -> Entri Baru
3. Pilih Tab HTML bukan Compose
4. Lalu Tambahkan atau Sisipkan isyarat ini didalam postingan anda
<div class="table-responsive"> <table class="table"> <thead> <tr> <th>Nama Blog</th> <th>Keterangan Blog</th> <th>Platform Blog</th> </tr> </thead> <tbody> <tr> <td>Renna.id</td> <td>Pemilik Blog kored.id</td> <td>Blogger</td> </tr> <tr> <td>Renna1</td> <td>Renna2</td> <td>Renna3</td> </tr> <tr> <td>Renna</td> <td>Renna</td> <td>Renna</td> </tr> </tbody> </table> </div> 6. Lalu pratinjau terlebih dahulu untuk melihat akibatnya
Baca Juga :
- 2 Cara Melihat Status WhatsApp Teman Tanpa Ketahuan
- Ivan Irawan Animator Indonesia Kelas Hollywood. Sang Penghidup Kembali Dinosaurus
- Cara Mengetahui Template/ Theme Wordpress Yang Digunakan Orang Lain
Lang-langkahnya sama ibarat table style 1
1. Login ke Blogger.com
2. Pilih Tema -> Edit HTML
3. Cari isyarat Css ]]></b:skin> atau </style>
4. Lalu Copy isyarat dibawah ini dan Paste sempurna sebelum/ diatas isyarat ]]></b:skin> atau </style>
/* Table Responsive */ 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:10px;text-align:left;vertical-align:top;} .post-body table tr th {border:1px solid #6f7785;color:#fff;padding:14px 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 table tr:nth-child(even) > td:hover {background-color:#ecf0f1;} .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%}5. Simpan Tema
Cara Menerapkan kedalam postingan
1. Pilih Postingan -> Entri Baru
2. Pilih Tab HTML
3. Lalu Sisipkan isyarat ini didalam postingan
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr><th>Nama Blog</th><th>Keterangan Blog</th> <th>Platform Blog</th> </tr> <tr><td>Renna</td><td>Kored.id</td> <td>Blogger</td></tr> <tr><td>Renna</td><td>Kored.id</td> <td>Blogger</td></tr> <tr><td>Renna</td><td>Kored.id</td> <td>Blogger</td></tr> <tr><td>Renna</td><td>Kored.id</td> <td>Blogger</td></tr> <tr><td>Renna</td><td>Kored.id</td> <td>Blogger</td></tr> <tr><td>Renna</td><td>Kored.id</td> <td>Blogger</td></tr> <tr><td>Renna</td><td>Kored.id</td> <td>Blogger</td></tr> </tr> </tbody> </table>4. Silahkan rubah goresan pena yang diberi warna merah sesuai impian atau kebutuhan anda.
Jika Membutuhkan 2 Table saja silahkan hapus antara <td> dan (Tulisan)</td></tr>
Demikian Cara Membuat Table Responsive Pada Postingan Blog. Gunakan salah satu saja ya. Table responsive diatas dapat dipakai diberbagai macam template blog. Semoga dapat diterapkan kedalam blog anda.
Sumber isyarat : Analis Yuki. Namina Kiky
Sumber https://www.kored.id/
