EDITBLOGTEMA: tabel

Tampilkan postingan dengan label tabel. Tampilkan semua postingan

BEGINI CARA MEMBUAT TABEL DATA PADA POSTINGAN BLOGGER TERBARU 2020

Tidak ada komentar

Mei 13, 2020

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:

Pilih postingan baru
Pilih tool di atas lembar postingan hingga ke paling ujung titik berbaris/lapis tiga
Jika di-klik akan muncul drop-menu scroll kebawah dan pilih 'Tabel'
Ketika tabel di pilih akan muncul menu di kanan, maka pilih 'Tambahkan Table'

Perhatikan gambar:

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  ITEMS CODE MARKAS:  
 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.

CARA MEMBUAT TABEL SEDERHANA DAN RESPONSIF DI BLOGGER

2 komentar

November 20, 2019

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
Sofyan	Sofyan Ya-an	50
Anissa	Anissa Auliasari	94
Adelina	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:

Masuk ke dasbor blogger, silahkan mulai menulis dengan mengklik "compose" dan ketika akan memasukan kode tabel kalian harus beralih ke mode HTML.

Cara Compose:

Cara HTML:
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.

Cara membuat tabel perbandingan di halaman blog

5 komentar

November 12, 2019

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

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.

BAGAIMANA MEMBUAT TABEL YANG BENAR DI DALAM KONTEN BLOGGER?

1 komentar

November 11, 2019

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

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

EDITBLOGTEMA

BEGINI CARA MEMBUAT TABEL DATA PADA POSTINGAN BLOGGER TERBARU 2020

Mei 13, 2020

CARA MEMBUAT TABEL SEDERHANA DAN RESPONSIF DI BLOGGER

November 20, 2019

Nilai Ujian Python (Bahasa Program)

Cara membuat tabel perbandingan di halaman blog

November 12, 2019

Tabel perbandingan

BAGAIMANA MEMBUAT TABEL YANG BENAR DI DALAM KONTEN BLOGGER?

November 11, 2019

Pelanggan saya

Halaman

cari di blog ini

Entri yang Diunggulkan

MENGAPA TABLET DAN IPAD LEBIH BAIK PILIH WIFI KETIMBANG WIFI PLUS SELULER?

Postingan Populer

Popular Tags

Ads

BATAM	ITEMS	CODE	MARKAS:
3.34	12.00	12.20	OK
1.1	11.00	12.00	OK
5.0	09.00	12.00	N/A