Tampilkan postingan dengan label tabel. Tampilkan semua postingan
Tampilkan postingan dengan label tabel. Tampilkan semua postingan
Pada pengaturan atau dasbor blogger terbaru selain antar muka yang lebih fresh terdapat beberapa fitur baru. Misalnya jika kita ingin membuat tabel yang responsif yang berguna untuk penulisan yang menyertakan data sederhana berdasarkan tabel, maka kini dengan mudah kita dapat melakukannya tanpa harus memasukan kode HTML tambahan seperti di masa lalu. Dan juga tidak perlu lagi mengcopy-paste bentuk bentuk tabel dari luar format blogger-blogspot.
cara membuat tabel data di blogger blogspot

Kalian cukup masuk ke pengaturan blogger:
  1. Pilih postingan baru
  2. Pilih tool di atas lembar postingan hingga ke paling ujung titik berbaris/lapis tiga
  3. Jika di-klik akan muncul drop-menu scroll kebawah dan pilih 'Tabel'
  4. Ketika tabel di pilih akan muncul menu di kanan, maka pilih 'Tambahkan Table'
Perhatikan gambar:
fitur baru dasbor blogger 2020

  • Jika ingin menambahkan tabel ke bawah klik atau pilih sisipkan baris di bawah
  • Jika ingin menambahkan kolom di kanan klik atau pilih sisipkan kolom di kanan
  • DST
Perhatikan table contoh sederhana berikut:
Table ini dibuat dengan cara di atas.
BATAM ITEMSCODEMARKAS:  
 3.34 12.00 12.20 OK
 1.1 11.00 12.00 OK
 5.0 09.00 12.00 N/A

Setelah mendapatkan gambaran di atas silahkan kalian mencoba karena hanya dengan mencoba kalian akan mendapatkan peningkatan pengalaman. Dengan menguasai tool di atas kalian akan dapat membuat konten konten yang lebih sempurna, terutama jika kalian bermaksud memasukan semua data data penyokong artikel atau konten yang kalian tulis...

sudah barang tentu fitur diatas masih memiliki banyak kekurangan, namun seiring dengan pengembangan lanjutannya, kita berharap fitur fitur tersebut menjadi semakin baik dan sempurna.



SHARE YA:

tabel data
tabel data
Adakalanya kita ingin serius pada saat membuat konten tutorial, dan menampilkan presentasi dengan data standar yang dapat dibaca dan di fahami oleh pengunjung, misalnya pada saat menampilkan data dengan singkat dan tidak perlu menjabarkannya dengan text dan kalimat kalimat yang mungkin akan membuat pembaca menafsirkannya berbeda beda.

Untuk itu kita perlu tabel, statistik, matrix dan sebagainya. Contoh dibawah adalah ketika saya ingin menjelaskan bagaimana hasil ujian belajar bahasa program Python online cukup hanya melalui sebuah tabel:

Nilai Ujian Python (Bahasa Program)

Nama panggilan Nama Lengkap Nilai Ujian
SofyanAvatar Sofyan Ya-an 50
AnissaAvatar Anissa Auliasari 94
AdelinaAvatar Adelina Sofyan 67

Data dalam bentuk tabel diatas lebih mampu mempresentasikan data pribadi orang dan juga nilai yang mereka dapatkan misalnya dalam ujian bahasa program python. Cara penerapannya adalah sbagai berikut:
  1. Masuk ke dasbor blogger, silahkan mulai menulis dengan mengklik "compose"  dan ketika akan memasukan kode tabel kalian harus beralih ke mode HTML.
  • Cara Compose:
    compose dan HTML1

    1. Cara HTML:
      compose dan HTML2
    2. Pada mode HTML letakan kode berikut dibawah ini tepat dibawah tulisan compose:
    <style>
    table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
    }
    th, td {
    text-align: left;
    padding: 16px;
    }
    tr:nth-child(even) {
    background-color: #E6E6FA;
    }
    </style>
    </head>
    <body>
    <h2>Nilai Ujian Python (Bahasa Program)</h2>
    <table>
    <tr>
    <th>Nama panggilan</th>
    <th>Nama Lengkap</th>
    <th>Nilai Ujian</th>
    </tr>
    <tr>
    <td>Sofyan</td>
    <td>Sofyan Ya-an</td>
    <td>50</td>
    </tr>
    <tr>
    <td>Anissa</td>
    <td>Anissa Auliasari</td>
    <td>94</td>
    </tr>
    <tr>
    <td>Adel</td>
    <td>Adelina Sufyan</td>
    <td>67</td>
    </tr>
    </table>
    Save template dan preview hasilnya. Sampai saat ini kelemahan blogger adalah belum adanya tool pembuat tabel, statistik dan atau matrix seperti layaknya yang terdapat pada aplikasi perkantoran dengan format 'word processor". Jadi kita memang harus membuatnya secara manual. Padahal tool tersebut bisa sangat berguna bagi blogger niche pendidikan, tutorial, penelitian dst...

    Dan nilai di atas tidak membuktikan bahwa kaum cowok lebih unggul dalam mata pelajaran programming, atau matimatika kalkulus bahkan terlihat jelas dua cewek nilainya lebih tinggi. LOL.

    SHARE YA:

    ilustrasi tabel perbandingan
    ilustrasi tabel perbandingan

    Pada tutorial sebelumnya saya memposting "cara membuat tabel yang benar pada postingan blog" sebenarnya kalian tidak akan pernah kesulitan membuat tabel apapun jika digunakan untuk kehidupan sehari hari dan bukan untuk blog atau halaman website.

    Tinggal buka MS office, atau jenis Open Office lainnya menggunakan stylesheet, exel atau apaun namanya seperti layaknya yang bapak bapak kita lakukan pada saat mereka bekerja di kantor. Tapi hal tersebut tidak akan mudah dilakukan pada halaman blog, kecuali jika kalian mau mengambil risiko meng-copy-pastekannya dari situs lain dengan risiko kerusakan format halaman blog.

    Pada halaman blog saat ingin membuat atau mempresentasikan sesuatu dengan table data kalian harus membuatnya melalui opsi HTML:
    Ketika kalian masuk ke dasbor blogger untuk membuat postingan baru, disana kan ada dua pilihan "compose" dan HTML seperti gambar berikut:

    compose dan HTML pada dasbor blogger
    compose dan HTML pada dasbor blogger

    gambar diatas jika seandainya kita membuat postingan normal cukup pilih 'compose' saja sedangkan jika membuat konten atau postingan khusus mau tidak mau kita harus memilih opsi HTML.

    Baca juga: BAGAIMANA MEMBUAT TABEL YANG BENAR DI DALAM KONTEN BLOGGER?

    Contoh cara membuat tabel perbandingan:

    Tabel perbandingan

    Fitur Basis Pro
    contoh teks
    contoh teks
    contoh teks
    contoh teks
    contoh teks
    Karena kegunaannya untuk memperesentasikan data di halaman web, tabel diatas di buat sangat responsive. Dapat di presentasi melalui halaman dengan berbagai ukuran layar, Desktop, Laptop, tablet hingga smarphone.

    Cara penerapannya: Masuk ke opsi HTML (bukan compose) dan diantara kalimat selipkan contoh kode berikut:
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
    }
    th, td {
    text-align: center;
    padding: 16px;
    }
    th:first-child, td:first-child {
    text-align: left;
    }
    tr:nth-child(even) {
    background-color: #f2f2f2
    }
    .fa-check {
    color: green;
    }
    .fa-remove {
    color: red;
    }
    </style>
    </head>
    <body>
    <h2>Tabel perbandingan</h2>
    <table>
    <tr>
    <th style="width:50%">Fitur</th>
    <th>Basis</th>
    <th>Pro</th>
    </tr>
    <tr>
    <td>contoh teks</td>
    <td><i class="fa fa-remove"></i></td>
    <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
    <td>contoh teks</td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
    <td>contoh teks</td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
    <td>contoh teks</td>
    <td><i class="fa fa-remove"></i></td>
    <td><i class="fa fa-check"></i></td>
    </tr>
    <tr>
    <td>contoh teks</td>
    <td><i class="fa fa-check"></i></td>
    <td><i class="fa fa-check"></i></td>
    </tr>
    </table>
    Jika kalian sudah terbiasa dengan opsi HTML di halaman blogger maka trik ini tidak akan menjadi kendala utnuk mempresentasikan data data dasar untuk penelitian, statistik dsb.

    SHARE YA:

    tabel untuk konten blog
    tabel untuk konten blog
    Ketika kalian masuk ke dasbor blogger untuk membuat postingan baru, disana kan ada dua pilihan "compose" dan HTML seperti gambar berikut:
    compose dan HTML pada dasbor blogger
    compose dan HTML pada dasbor blogger
    Pada gambar diatas jika seandainya kita membuat postingan normal cukup pilih 'compose' saja sedangkan jika membuat konten atau postingan khusus mau tidak mau kita harus memilih opsi HTML.

    Pada tutorial kali ini kalian harus menggunakan kedua opsi itu sekaligus karena konten atau postingan sedang membutuhkannya yakni misalnya jika suatu postingan harus menyertakan tabel, dan beberapa fitur yang tidak terdapat pada tool blogger di dasbor mau tidak mau kita harus membuatnya sendiri melalui editor HTML.

    Contohnya tabel berikut di bawah ini:

    Pelanggan saya

    Nama Negara
    Alfreds Futterkiste Germany
    Berglunds snabbkop Sweden
    Island Trading UK
    Koniglich Essen Germany
    Laughing Bacchus Winecellars Canada
    Magazzini Alimentari Riuniti Italy
    North/South UK
    Paris specialites France


    Di atas tabel ada kolom pencarian, cobalah ketikan salah satu nama,  misalnya Island Trading,  yang terdapat di dalam list di atas. Kolom pencarian tersebut sangat berguna untuk mempersingkat waktu penyortiran. Artinya contoh sampel yang saya kemukakan diatas berguna.

    Tabel diatas juga sangat responsive artinya dapat dengan mudah di akses melalui layar desktop maupun laptop dan dapat menyesuaikan dirinya dengan layar yang lebih sempitndan kecil seperti tablet dan smartphone.

    Jadi penulisan kodenya yang harus kalian letakan pada diantara tulisan pada opsi HTML adalah sebagai berikut:
    <style>
    * {
    box-sizing: border-box;
    }
    #myInput {
    background-image: url('/css/searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    width: 100%;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
    }
    #myTable {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
    font-size: 18px;
    }
    #myTable th, #myTable td {
    text-align: left;
    padding: 12px;
    }
    #myTable tr {
    border-bottom: 1px solid #ddd;
    }
    #myTable tr.header, #myTable tr:hover {
    background-color: #f1f1f1;
    }
    </style>
    </head>
    <body>

    <h2>Pelanggan saya</h2>
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
    <table id="myTable">
    <tr class="header">
    <th style="width:60%;">Nama</th>
    <th style="width:40%;">Negara</th>
    </tr>
    <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
    </tr>
    <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
    </tr>
    <tr>
    <td>Island Trading</td>
    <td>UK</td>
    </tr>
    <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
    </tr>
    <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
    </tr>
    <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
    </tr>
    <tr>
    <td>North/South</td>
    <td>UK</td>
    </tr>
    <tr>
    <td>Paris specialites</td>
    <td>France</td>
    </tr>
    </table>
    <script>
    function myFunction() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
    txtValue = td.textContent || td.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
    tr[i].style.display = "";
    } else {
    tr[i].style.display = "none";
    }
    }
    }
    }
    </script>
    Memang agak ribet, namun perhatikan tulisan yang saya sorot kuning, kalimat kalimat itu adalah isi daripada tabel yang kita buat, kita hanya dapat merobahnya melalui opsi HTML bukan Compose.

    Ini tentang bagaimana membuat elemen di dalam postingan atau konten blog kalian. Jika bekerja di kantor kalian bisa mempresentasikan proyeksi dan hasil kerja dengan mudah menggunakan MS office,  namun di halaman web tool tersebut belum ditemukan hampir pada setiap platform blogger.

    Kalian bisa saja mengcopy-paste table dari internet, dari word, dan dari situs situs khusus, tapi tunggu, hasilnya bisa mempengaruhi struktur blog kalian tanpa kalian sadari...bisa mengakibatkan kerusakan format pada struktur HTML blogger kalian, karena apa yang kalian copy akan tercopy juga sekaligus kode kode dan format-nya dan karena platform blog beda dengan platform yang lain, kemungkinan format dari konten tabel hasil copy akan berjalan di dalam HTML blogger.

    www.editblogtema.net

    SHARE YA: