Cara Menciptakan Tabel Spesifikasi Responsive Didalam Artikel Blog
Cara Praktis 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 biar tampilan dari daftar atau list tersebut terlihat rapi dan lezat dilihat.
Tabel spesifikasi biasanya dipakai oleh blog dengan niche/ jenis konten penyedia template atau blog dengan konten spesifikasi smartphone. Sebenarnya untuk menampilkan fitur atau speaifikasi dapat saja tidak memakai tabel spesifikasi, namun berdasarkan aku kurang lezat dilihat. Menambahkan tabel spesifikasi ke dalam blog menciptakan blog kita terihat menyerupai blog profesional :v.
Untuk itu kored id akan membagikan cara menciptakan tabel responsif yang biasa dipakai oleh blog-blog penyedia template dan spesifikasi hp. Caranya sangat gampang dan gampang untuk diikuti. Oke pribadi saja,
Baca Juga :
Untuk membuatnya diharapkan isyarat css yang akan di tambahkan ke dalam isyarat html template blog kita. Kode css ini gunannya biar tampilan tabelnya lebih lezat dilihat dan juga responsive.
1. Log in Blogger.com
2. Pilih Tema -> Edit HTML
3. Cari isyarat </style> Atau ]]></b:skin> (Gunakan ctrl+f untuk mencarinya)
4. Tambahkan isyarat dibawah ini sempurna di atas </style> Atau ]]></b:skin>
5. Kemudian, Simpan Tema
Di atas ialah langkah-langkah memasang isyarat css ke dalam template kita. Sekarang kita lanjut ke bab pemasangan didalam postingan artikel kita. Di butuhkan isyarat pemanggil lagi bila 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 isyarat pemanggil dibawah ini diantara artikel yang kita buat
Ganti goresan pena yang sudah diberi warna merah sesuai dengan kebutuhan kalian
5. Untuk melihat kesudahannya silahkan pratinjau dahulu sebelum di publish. Selesai
Sekian yang dapat aku jelaskan. Cara diatas ialah cara paling gampang menciptakan tabel spesifikasi responsive. Dan sudab niscaya tidak akan ada yang ditanyakan lagi :v. Semoga dapat diterapkan kedalam blog anda. Terimakasih sudah berkunjung.
Sumber https://www.kored.id/
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 biar tampilan dari daftar atau list tersebut terlihat rapi dan lezat dilihat.
Tabel spesifikasi biasanya dipakai oleh blog dengan niche/ jenis konten penyedia template atau blog dengan konten spesifikasi smartphone. Sebenarnya untuk menampilkan fitur atau speaifikasi dapat saja tidak memakai tabel spesifikasi, namun berdasarkan aku kurang lezat dilihat. Menambahkan tabel spesifikasi ke dalam blog menciptakan blog kita terihat menyerupai blog profesional :v.
Untuk itu kored id akan membagikan cara menciptakan tabel responsif yang biasa dipakai oleh blog-blog penyedia template dan spesifikasi hp. Caranya sangat gampang dan gampang untuk diikuti. Oke pribadi saja,
Baca Juga :
- Aplikasi Perekam Layar Android Terbaik 2019. Tanpa Watermark
- Cara Memasang Iklan AdSense di Atas, Tengah dan Bawah Artikel Blog
Untuk membuatnya diharapkan isyarat css yang akan di tambahkan ke dalam isyarat html template blog kita. Kode css ini gunannya biar tampilan tabelnya lebih lezat dilihat dan juga responsive.
1. Log in Blogger.com
2. Pilih Tema -> Edit HTML
3. Cari isyarat </style> Atau ]]></b:skin> (Gunakan ctrl+f untuk mencarinya)
4. Tambahkan isyarat dibawah ini sempurna 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 ialah langkah-langkah memasang isyarat css ke dalam template kita. Sekarang kita lanjut ke bab pemasangan didalam postingan artikel kita. Di butuhkan isyarat pemanggil lagi bila 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 isyarat 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 goresan pena yang sudah diberi warna merah sesuai dengan kebutuhan kalian
5. Untuk melihat kesudahannya silahkan pratinjau dahulu sebelum di publish. Selesai
Sekian yang dapat aku jelaskan. Cara diatas ialah cara paling gampang menciptakan tabel spesifikasi responsive. Dan sudab niscaya tidak akan ada yang ditanyakan lagi :v. Semoga dapat diterapkan kedalam blog anda. Terimakasih sudah berkunjung.
Sumber https://www.kored.id/
