Trik Ricky: HTML
Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. Tampilkan semua postingan

29/10/18

Sederhana! Cara Membuat Tabel Didalam Postingan Blog

Kode CSS membuat tabel diblog

Tabel merupakan susunan data dalam baris & kolom, atau mungkin dalam struktur yang lebih detail. Tabel umumnya banyak digunakan dalam komunikasi, penelitian, dan analisis data. Tabel sering muncul di media cetak, tulisan, perangkat lunak komputer, arsitektur hiasan, dan lain-lain, termasuk salah satunya di dalam postingan blog atau website.

Tabel juga sering di gunakan di blog maupun website yang isi artikelnya berisi daftar suatu susunan data, agar tabel terlihat rapi dan nyaman di lihat sang pengunjung tentu kita harus memodifikasinya dengan bantuan CSS. Nah jika kamu ingin memodifikasi tabel di blog seperti tabel di Blog saya ini, Kamu bisa ikuti langkah-langkah berikut:

Membuat Tabel Didalam Postingan


Login Ke dasbor blogger dan buat edit HTML. Tambahkan kode CSS berikut tepat di atas </style> yang pertama.

/* Post Tabel */
.post-body table{width:100%}
.post-body table td,.post-body table caption{background:#fff;border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top}
.post-body table th{background:#0591bc;color:#fff;border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top}
.post-body table.tr-caption-container{background:#fff;border:1px solid #e9e9e9;margin:0}
.post-body th{font-weight:700}
.post-body table caption{border:0;font-style:italic}
.post-body td,.post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;border:1px solid #97b28e}
.post-body th:hover{background:#d2d2d2}
.post-body table tr:nth-child(even)>td{background-color:#f9f9f9}
.post-body table tr:nth-child(even)>td:hover{background-color:#fbfbfb}
.post-body td a{color:#444}
.post-body td a:hover{color:#cf4d35}
.post-body table.tr-caption-container td{border:0;padding:0;background:#fff;line-height:17px;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font-weight:700;color:#000}
.post-body table.tr-caption-container,.post-body table.tr-caption-container img,.post-body img{max-width:100%;height:auto}
.post-body li{list-style-type:circle}
.post-body td.tr-caption{font-size:85%;padding:10px !important}

Simpan dulu CSS diatas.

Untuk membuat tabel didalam postingan blog silakan tambahkan kode html berikut pada mode HTML (bukan compose).

Cara Membuat Tabel Didalam Postingan Mode HTML

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Type</th> <th>Persentasi</th><th>Unit</th> </tr>
<tr> <td>Samsung</td> <td>25.5 %</td> <td>2.3 Juta</td></tr>
<tr> <td>Xiaomi</td> <td>18.3 %</td><td>1.7 Juta</td> </tr>
<tr> <td>Oppo</td> <td>16.8 %</td><td>1.5 Juta</td>  </tr>
<tr> <td>Vivo</td> <td>6.5 %</td><td>600.000</td>  </tr>
<tr> <td>Smartfren</td> <td>5.6 %</td><td>520.000</td>  </tr>
</tbody> </table>

Coba pratinjau untuk memastikan tabel telah tersusun rapi. Untuk tabel di atas kamu bisa lihat review-nya disini.

Demikian Cara Membuat Tabel Didalam Postingan Blog pada kesempatan kali ini, moga bermanfaat.

28/09/17

Beragam Jenis Dan Fungsi Tag Kondisional Pada Template

Beragam Jenis Dan Fungsi Tag Kondisional Pada Template

Jika anda sering mengutak-atik template pasti anda melihat beberapa kode yang di awali dengan kode <b:if cond> dan di tutup dengan kode </b:if> . jika blogger newbie pasti anda akan bingung, apa yang di maksud dengan kode tersebut dan apa fungsinya. Simak terus hingga akhir artikel ini.

Tag kondisional merupakan rangkaian kode pembungkus untuk untuk menampilkan, menyembunyikan dan mengelola bagian dari elemen tertentu untuk tampil di dalam sebuah blog. Umumnya banyak sekali macam dan fungsi dari tag kondisional, namun disini saya akan sedikit menguraikan Beragam Jenis Tag kondisional dan fungsinya yang sering di temukan pada template khusus untuk platform blogspot.

Tag 1 (Homepage)


Tampil hanya di halaman Utama atau Homepage.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Tambahkan Widget, Css, Javascript Disini
</b:if>

Tag 2 (Homepage)


Tampil di semua halaman kecuali halaman Utama atau homepage

<b:if cond='data:blog.url != data:blog.homepageUrl'>
Tambahkan Widget, Css, Javascript Disini
</b:if>

Tag 3 (Post)


Tampil di semua halaman postingan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Tambahkan Widget, Css, Javascript Disini
</b:if>

Tag 4 (Post)


Tampil di semua halaman kecuali halaman postingan

<b:if cond='data:blog.pageType != &quot;item&quot;'>
Tambahkan Widget, Css, Javascript Disini
</b:if>

Tag 5 (Post)


Tampil Hanya postingan tertentu

<b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
Tambahkan Widget, Css, Javascript Disini
</b:if>

Tag 6 (Post)


Menyembunyikan widget di halaman tertentu

<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
Tambahkan Widget, Css, Javascript Disini
</b:if>

Tag 7 (Static Page)


Hanya menampilkan di halaman Statis

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
Tambahkan Widget, Css, Javascript Disini
</b:if>

Tag 8 (Static Page)


Tampil disemua halaman kecuali halaman Statis

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
Tambahkan Widget, Css, Javascript Disini
</b:if>

Tag 9 (Archive)


Tampil hanya di halaman archive

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
Tambahkan Widget, Css, Javascript Disini
</b:if>

Tag 10 (Archive)


Tampil di semua halaman kecuali halaman archive

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
Tambahkan Widget, Css, Javascript Disini
</b:if>

Tag 11 (Khusus halaman Mobile)


Tampil hanya di halaman mobile (ponsel)

<b:if cond='data:blog.isMobile'>
Tambahkan Widget, Css, Javascript Disini Untuk Perangkat Mobile (HP)
</b:if>

Tag 12 (Khusus halaman Mobile)


Menyembunyikan dari halaman Mobile (Ponsel)

<b:if cond="!data:blog.isMobile">
Tambahkan Widget, Css, Javascript Disini yang Tidak Ingin Tampil Di Perangkat Mobile (HP)
</b:if>


Tag 13 (Label)


Tampil dihalaman label

<b:if cond='data:blog.searchLabel'>
Tambahkan Widget, Css, Javascript Disini Untuk Bagian Search label
</b:if>

Anda Juga bisa menggabungkan Kode diatas jika ingin widget tertentu tampil di 2 halaman berbeda, Seperti contoh berikut:

<b:if cond='data:blog.searchLabel'>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
Tambahkan Widget, Css, Javascript Disini Untuk Bagian Search label
</b:if>
</b:if>

Jadi jika anda ingin menambahkan 2 tag kondisional sekaligus maka anda juga harus menambahkan kode penutupnya yaitu </b:if>

Sebagai Contoh anda bisa melihat sebuah tag kondisional yang hanya tampil di halaman utama mobile pada artikel tentang Membuat Tombol Berbagi Ke Sosial Media Disini.

Demikian dan semoga apa yang saya share kali ini sedikit menambah pengetahuan anda agar anda bisa menyesuaikan template yang anda gunakan sesuai dengan keinginan anda.

Salam hangat & Happy Blogging.