Membuat Tabel di Postingan 2

|
Membuat Tabel di Postingan 2 ~ Pada postingan terdahulu saya pernah share sebuah Blogger Tutorial mengenai Membuat Tabel di Postingan blog, dan pada saat saya publish artikelnya eh tabelnya tidak kelihatan, hanya isi tabel saja yang kelihatan/muncul dipostingan sehingga saya mengganti contohnya dengan sebuah gambar. Setelah saya bertanya pada salah satu sobat blogger saya si iskaruji dot com, ternyata ada beberapa template yang tidak bisa menampilkan tabel dengan kode script tabel biasa dan harus menambahkan sebuah kode CSS.



Teks 1 Teks 2 Teks 3
Teks 1 Teks 2 Teks 3
Teks 1 Teks 2 Teks 3

Jika ada diantara para sobat blogger yang jenis template blognya sama seperti jenis template blog saya yang tidak bisa menampilkan tabel dan ingin menampilkan tabel saat melakukan posting sebuah tabel, Silahkan kalian ikuti langkah-langkah berikut.

1. Login ke akun blogger kalian, bisa klik Disini, Pilih Rancangan >> Lalu klik Edit HTML
2. Jika sudah, cari kode ]]></b:skin>, untuk mempercepat pencarian gunakan Ctrl+F, kemudian copy kode CSS di bawah ini dan paste di bawah kode ]]></b:skin>

<style type='text/css'>
table, td, th
{
border:1px solid #ffffff;
}
th
{
background-color:#cc0000 ;
color:white;
}
td
{
text-align:center;
}
th
{
text-align:center;
}
</style>

border:1px solid #ffffff
1px adalah ukuran besar kecilnya border/garis pinggir tabel dan #ffffff adalah kode warnanya kalian bisa ubah sesuaikan dengan warna template kalian
background-color:#cc0000
Kode ini adalah kode warna untuk background tabelnya

3. Terakhir setelah rampung semua klik Simpan template
4. Untuk pemanggilan kode CSSnya, silahkan kalian copas kode dibawah ini ke dalam postingan, pastenya di posisi Edit Html bukan posisi Compose

<table style="width: 500px;"><tbody><tr>
<th style="text-align: center;">Teks 1</th>
<th style="text-align: center;">Teks 2</th>
<th style="text-align: center;">Teks 3</th>
</tr>
<tr>
<td style="text-align: center;">Teks 1</td>
<td style="text-align: center;">Teks 2</td>
<td style="text-align: center;">Teks 3</td>
</tr>
<tr>
<td style="text-align: center;">Teks 1</td>
<td style="text-align: center;">Teks 2</td>
<td style="text-align: center;">Teks 3</td>
</tr>
</tbody></table>

width: 500px adalah lebar tabel bisa kalian sesuaikan dengan keinginan kalian
Untuk menambah kolom  lihat saja teks 1 sampai 3, cukup tambahkan kode yang sama dibawahnya contoh

<td style="text-align: center;">Teks 4</td>

Untuk menambahkan baris juga cukup dengan menambahkan kode yang sama, contoh

<tr>
<td style="text-align: center;">Teks 1</td>
<td style="text-align: center;">Teks 2</td>
<td style="text-align: center;">Teks 3</td>
</tr>



Taruh kode diatas di bawah kode </tr>

Yang perlu diperhatikan yaitu kode <td style dan <th style perhatikan kodenya secara seksama.

Semoga cara membuat tabel dengan penambahan kode CSS di template ini bermanfaat.
Happy blogging



6 komentar:

Iskaruji dot com said...

Thanks dah di share Sob..kalo pake tambahan css begini dijamin semua template akan mendukung. Cuma dari kemaren saya belum sempat cari referensinya...Happy blogging!

BlogS of Hariyanto said...

keren tutorialnya sobat..mudah dipahami :-)

Jejak Puisi said...

ketigax... :D ... tutorial baru lagi nih! sipp lah kang, moga bermanfaat

keep posting and salam blogger ^^

ARMAN said...

@Iskaruji, He sama-sama sob...iya saya ngerti semoga masalah sob cepat normal

@BlogS of Hariyanto, Thank sob :)

@Jejak Puisi, Iya sob semoga bermanfaat, salam blogger juga

Manfaat Pupuk Organik said...

om Bagi template yg om pake doNk??
baLaS di bLog Saya ya??
thaNkS

Edyn Laskar said...

dulu template blogku biar dibolak balik, bordernya tetap gak muncul saat buat tabel,, pas berunjung disini, saya baru tau ternyata ada skrypt yg harus ditambahkan. akhirnya masalah teratasi... makasi gank tutorianya,, sangat bermanfaat..

klo ada waktu berkunjung juga di blogku..
http://edynlaskar09.blogspot.com

Post a Comment

Silahkan kalian berkomentar, namun tetap jaga kesopanan dengan tidak melakukan komentar spam. Saya Lagi Bermasalah Dengan Adsense, Saya izin Vakum Ngeblog Dulu Sobat Buat Nyari Solusi!!

Related Posts Plugin for WordPress, Blogger...