 |
| tabel untuk konten blog |
 |
| compose dan HTML pada dasbor blogger |
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>
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
saya sering letaknya acak-acakan,,tapi ini patut di coba lah
BalasHapus