November 11, 2019

BAGAIMANA MEMBUAT TABEL YANG BENAR DI DALAM KONTEN BLOGGER?

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

I am a student of Senior High School (SMA) I am living in Bandar Lampung, Selalu tertarik dengan HTML, sedang belajar Javascript, python dan C++

1 comment:

  1. saya sering letaknya acak-acakan,,tapi ini patut di coba lah

    ReplyDelete