Cara Membuat Tabel Spesifikasi Responsive didalam Artikel Blog
Cara Mudah Memasang Tabel Spesifikasi Responsive di blog
Membuat tabel spesifikasi responsive di blog umumnya di buat untuk menampilkan daftar atau list dari beberapa keterangan dari suatu produk atau bahkan untuk melihat spesifikasi hp atau pun melihat fitur-fitur suatu template. Gunanya tak lain supaya tampilan dari daftar atau list tersebut terlihat rapi dan enak dilihat.
Tabel spesifikasi biasanya digunakan oleh blog dengan niche/ jenis konten penyedia template atau blog dengan konten spesifikasi smartphone. Sebenarnya untuk menampilkan fitur atau speaifikasi bisa saja tidak menggunakan tabel spesifikasi, namun menurut saya kurang enak dilihat. Menambahkan tabel spesifikasi ke dalam blog membuat blog kita terihat seperti blog profesional :v.
Untuk itu kored id akan membagikan cara membuat tabel responsif yang biasa digunakan oleh blog-blog penyedia template dan spesifikasi hp. Caranya sangat mudah dan mudah untuk diikuti. Oke langsung saja,
Baca Juga :
Untuk membuatnya diperlukan kode css yang akan di tambahkan ke dalam kode html template blog kita. Kode css ini gunannya supaya tampilan tabelnya lebih enak dilihat dan juga responsive.
1. Log in Blogger.com
2. Pilih Tema -> Edit HTML
3. Cari kode </style> Atau ]]></b:skin> (Gunakan ctrl+f untuk mencarinya)
4. Tambahkan kode dibawah ini tepat di atas </style> Atau ]]></b:skin>
5. Kemudian, Simpan Tema
Di atas adalah langkah-langkah memasang kode css ke dalam template kita. Sekarang kita lanjut ke bagian pemasangan didalam postingan artikel kita. Di butuhkan kode pemanggil lagi jika ingin menggunakannya ke dalam artikel.
Baca juga :
1. Masih di dashboard blogger
2. Pilih Positingan -> Entri Baru
3. Pilih Tab HTML bukan Compose
4. Tambahkan kode pemanggil dibawah ini diantara artikel yang kita buat
Ganti tulisan yang sudah diberi warna merah sesuai dengan kebutuhan kalian
5. Untuk melihat hasilnya silahkan pratinjau dahulu sebelum di publish. Selesai
Sekian yang bisa saya jelaskan. Cara diatas adalah cara paling mudah membuat tabel spesifikasi responsive. Dan sudab pasti tidak akan ada yang ditanyakan lagi :v. Semoga bisa diterapkan kedalam blog anda. Terimakasih sudah berkunjung.
Membuat tabel spesifikasi responsive di blog umumnya di buat untuk menampilkan daftar atau list dari beberapa keterangan dari suatu produk atau bahkan untuk melihat spesifikasi hp atau pun melihat fitur-fitur suatu template. Gunanya tak lain supaya tampilan dari daftar atau list tersebut terlihat rapi dan enak dilihat.
Tabel spesifikasi biasanya digunakan oleh blog dengan niche/ jenis konten penyedia template atau blog dengan konten spesifikasi smartphone. Sebenarnya untuk menampilkan fitur atau speaifikasi bisa saja tidak menggunakan tabel spesifikasi, namun menurut saya kurang enak dilihat. Menambahkan tabel spesifikasi ke dalam blog membuat blog kita terihat seperti blog profesional :v.
Untuk itu kored id akan membagikan cara membuat tabel responsif yang biasa digunakan oleh blog-blog penyedia template dan spesifikasi hp. Caranya sangat mudah dan mudah untuk diikuti. Oke langsung saja,
Baca Juga :
- Aplikasi Perekam Layar Android Terbaik 2019. Tanpa Watermark
- Cara Memasang Iklan AdSense di Atas, Tengah dan Bawah Artikel Blog
Untuk membuatnya diperlukan kode css yang akan di tambahkan ke dalam kode html template blog kita. Kode css ini gunannya supaya tampilan tabelnya lebih enak dilihat dan juga responsive.
1. Log in Blogger.com
2. Pilih Tema -> Edit HTML
3. Cari kode </style> Atau ]]></b:skin> (Gunakan ctrl+f untuk mencarinya)
4. Tambahkan kode dibawah ini tepat di atas </style> Atau ]]></b:skin>
/* Post Table Spesifikasi */
.post-body table{width:100%;max-width:auto;border-radius:3px;overflow:hidden}
.post-body table td,.post-body table caption{border:0;padding:12px 10px;text-align:left;vertical-align:top;color:#57606f;font-size:.9rem;font-weight:100}
.post-body table td:first-child{border-right:0}
.post-body table th{background:#4B77BE;color:#fff;border:0;padding:12px 20px;text-align:left;vertical-align:top;font-size:16px;font-weight:100;text-transform:capitalize}
.post-body table tr th:hover{background:#1F3A93}
.post-body table.tr-caption-container{border:0;margin:0}
.post-body table caption{border:none;font-style:italic}
.post-body td,.post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:0}
.post-body td a{background:#4B77BE;color:#fff;padding:3px 10px;font-size:70%;float:right;display:inline-block;border-radius:3px;text-transform:uppercase}
.post-body td a[target="_blank"]:after{margin-left:5px}
.post-body table.tr-caption-container td{border:0;padding:0;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#3498DB}
.post-body table.tr-caption-container,.post-body table.tr-caption-container img,.post-body img{max-width:100%;height:auto}
.post-body table tr:nth-of-type(even) td{background-color:#fafafa}
.post-body table tr:nth-of-type(odd) td{background-color:#f5f5f5}
.post-body table tr td:nth-of-type(even){border-left:1px solid rgba(0,0,0,0.03)}
.post-body table tr th:nth-of-type(even){border-left:1px solid rgba(255,255,255,0.03)}
.post-body li{list-style-type:square}
.post-body td.tr-caption{background:#465158!important;color:#fff!important;font-size:85%;padding:10px!important}
.sr {visibility:hidden;width:0;height:0;}
.clear{clear:both}
html{-webkit-font-smoothing:antialiased}
::selection {background:#f33846;color:#fff;text-shadow:none}
.post-body ::selection {background:#f33846;color:#fff}
.post-body td a{background:#3498DB;color:#fff;padding:0 12px;font-size:80%;float:right;display:inline-block;border-radius:3px;font-weight:100;text-transform:capitalize}
.post-body td a:hover {background:#19B5FE;color:#fff;}
.post-body td a[target="_blank"]:after {margin-left:12px;}
.post-body .addthis_inline_share_toolbox td{background:transparent;border-color:rgba(0,0,0,0.05);margin:0;line-height:normal}
.post-body .addthis_inline_share_toolbox table{margin:0 0 10px 0}
.post-body .at4-jumboshare .at4-count-container {border-right:1px solid rgba(0,0,0,0.05);}
.tab-padding {padding:20px}5. Kemudian, Simpan Tema
Di atas adalah langkah-langkah memasang kode css ke dalam template kita. Sekarang kita lanjut ke bagian pemasangan didalam postingan artikel kita. Di butuhkan kode pemanggil lagi jika ingin menggunakannya ke dalam artikel.
Baca juga :
- Cara Membuat Notifikasi Cookies Pada Blog Dengan Cookie Consent
- Cara Memasang Web Push Notifikasi di Blogger
1. Masih di dashboard blogger
2. Pilih Positingan -> Entri Baru
3. Pilih Tab HTML bukan Compose
4. Tambahkan kode pemanggil dibawah ini diantara artikel yang kita buat
<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Features</th> <th>Availability</th> </tr>
<tr> <td>Mobile Friendly 2</td> <td>True<a href="#" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>Mobile Friendly 3</td> <td>True<a href="#" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>Mobile Friendly 4</td> <td>True<a href="#" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>Mobile Friendly 5</td> <td>True<a href="#" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>SEO Friendly 2</td> <td>True</td> </tr>
<tr> <td>SEO Friendly 2</td> <td>True</td> </tr>
<tr> <td>SEO Friendly 2</td> <td>True</td> </tr>
<tr> <td>SEO Friendly 2</td> <td>True</td> </tr>
<tr> <td>SEO Friendly 2</td> <td>True</td> </tr>
<tr> <td>Fast Version 3</td> <td>Pro Version</td> </tr>
<tr> <td>Fast Version 3</td> <td>Pro Version</td> </tr>
<tr> <td>Fast Version 3</td> <td>Pro Version</td> </tr>
<tr> <td>Fast Version 3</td> <td>Pro Version</td> </tr>
<tr> <td>Fast Version 3</td> <td>Pro Version</td> </tr>
<tr> <td>Fast Version 3</td> <td>Pro Version</td> </tr>
</tbody></table>Ganti tulisan yang sudah diberi warna merah sesuai dengan kebutuhan kalian
5. Untuk melihat hasilnya silahkan pratinjau dahulu sebelum di publish. Selesai
Sekian yang bisa saya jelaskan. Cara diatas adalah cara paling mudah membuat tabel spesifikasi responsive. Dan sudab pasti tidak akan ada yang ditanyakan lagi :v. Semoga bisa diterapkan kedalam blog anda. Terimakasih sudah berkunjung.