بِسْـــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم

Format yang perlu digunakan semasa menetapkan keterangan gambar dalam interpretZZ.

[Kandungan Template interpretZZ.com]

Format Standard | Format Ringkas | Saiz Font Default | Saiz Ketebalan Garis Font | Jenis Font | Scrollable div | Template untuk kandungan baru v2 | Template Scrollable Table | Penggayaan caption gambar | Saiz Gambar | Format dan Penggayaan Seksyen Kandungan

Format Standard

Gunakan format ringkas ini untuk gambar yang dimiliki interpretZZ atau bukan milik interpretZZ tetapi mempunyai keterangan gambar yang mencukupi.

interpretZZ.com | [DAY]-[M2]-[Y] [T1] | [N1]
@ Lokasi
# Keterangan
# [MAKE], [MODEL]

 Versi kurang lebar

interpretZZ.com | [DAY]-[M2]-[Y] [T1]
@ Lokasi
# Keterangan
# [MAKE], [MODEL]
# [N1]

[Kandungan Template interpretZZ.com]

Format Ringkas

Gunakan format ringkas ini untuk gambar yang selalunya daripada sumber luar di mana keterangan gambar tidak diperolehi.

interpretZZ.com
@ Lokasi / sumber
# Keterangan

[Kandungan Template interpretZZ.com]

Saiz Font Default

16

12 - untuk gambar dengan lebar 640 

[Kandungan Template interpretZZ.com]

Saiz Ketebalan Garis Font

9 / 7 / 5 - bergantung kepada saiz gambar dan keselesaan mata memandang.

[Kandungan Template interpretZZ.com]

Jenis Font

Ini adalah senarai jenis font yang digunakan pada caption gambar dalam interpretZZ.

  • Leelawadee
    • Tedi sukakan font ini kerana jarak di antara barisnya tidak terlalu jauh.
    • Font ini mudah dibaca, akan digunakan apabila Tedi mahu utamakan mesej berbanding seni.
  • Matura MT Script Capitals
    • Tedi gunakan font ni kalau nak nampakkan tulisan tu berseni sikit macam khat.
    • Masalahnya kalau guna font ni teks jadi susah nak dibaca.
    • Jadi Tedi hanya akan gunakan font ini apabila seni diutamakan berbanding mesej.

[Kandungan Template interpretZZ.com]

Scrollable div

Scrollable div ini adalah untuk digunakan bagi membungkus table supaya ia dapat di-scroll pada paparan mobile.

<div style="overflow-x: auto;">
</div>

[Kandungan Template interpretZZ.com]

Template untuk kandungan baru v2

 Template v2 ini adalah daripada versi 1, sedikit sahaja perubahan iaitu selawat ke atas Nabi Muhammad sollallahu alaihi wassalam dan keluarga Baginda dalam tulisan Arab disertakan selepas kalimah Basmalah juga dalam tulisan Bahasa Arab.

 <h3 style="text-align: center;"><em><strong><span style="color: #339966;"> بِسْـــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم</span><span style="color: #339966;">. </span> <span style="color: #339966;">اَللَّهُمَّ صَلِّى عَلَى مُحَمَّدٍٍ، وَعَلَى آلِهِ مُحَمَّدٍٍ</span> </strong></em></h3>   <hr />   <p></p>   
<hr/>   <p style="text-align: center;"><sup><span style="color: #0000ff;">~~~<br />jika kiriman ini bermanfaat, tolong lawat iklan yang ada ya, terima kasih</span></sup></p>

[Kandungan Template interpretZZ.com]

Template Scrollable Table

Setelah lama menyunting kandungan intepretZZ ini akhirnya Tedi menemui jadual yang paling sesuai untuk paparan interpretZZ. Tujuan utama adalah untuk membolehkan kandungan jadual dipaparkan secara keseluruhan pada laman web mobile. Jika sebelum ini Tedi hanya gunakan Scrollable div, kini Tedi tambahkan dengan penggayaan khusus untuk jadual.

 <div style="overflow-x: auto;">  
 <table style="min-width: 480px; font-size: 12px; line-height: normal; vertical-align: top;">  
 <tbody>  
 <tr align="center">  
 <th scope="col">Judul</th>  
 </tr>  
 <tr>  
 <td>&nbsp;</td>  
 </tr>  
 </tbody>  
 </table>  
 </div>

[Kandungan Template interpretZZ.com]

Penggayaan caption gambar

Versi 1:

<div style="clear: both; text-align: center; color: #3366ff; line-height: 1.3; font-size: 12px;">
<strong>Tajuk</strong>
<br>Kata kunci
<br>maklumat gambar
</div> 

Versi 2024:

<div style="display: flex; justify-content: center; color: #3366ff; line-height: 1.3; font-size: 12px;">
<table>
<tbody>
<tr>
<td><strong>Bila?&nbsp;</strong></td>
<td>&nbsp;</td>
</tr>
<tr>
<td><strong>Kamera</strong></td>
<td>&nbsp;</td>
</tr>
<tr>
<td><strong>Gambar</strong></td>
<td>&nbsp;</td>
</tr>
<tr>
<td><strong>Lokasi</strong></td>
<td>&nbsp;</td>
</tr>

<tr>
<td><strong>Teks</strong></td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</div> 

Versi 202406

 <div style="display: flex; flex-wrap: wrap; justify-content: space-between; margin: 10px auto; border: 1px solid #ddd; padding: 10px; border-radius: 5px; color: #3366ff; line-height: 1.3; font-size: 14px;">  
  <div style="width: 30%; font-weight: bold;">Keterangan</div>  
  <div style="width: 70%;">&nbsp;</div>  
  <div style="width: 30%; font-weight: bold;">Bila?</div>  
  <div style="width: 70%;">&nbsp;</div>  
  <div style="width: 30%; font-weight: bold;">Kamera</div>  
  <div style="width: 70%;">&nbsp;</div>  
  <div style="width: 30%; font-weight: bold;">Gambar</div>  
  <div style="width: 70%;">&nbsp;</div>  
  <div style="width: 30%; font-weight: bold;">Teks</div>  
  <div style="width: 70%;">&nbsp;</div>  
  <div style="width: 30%; font-weight: bold;">Lokasi</div>  
  <div style="width: 70%;">&nbsp;</div>  
 </div>

Saiz Gambar

  1. saiz gambar landskap haruslah lebarnya tidak melebihi 1500 piksel.
  2. Saiz gambar potret, tingginya haruslah di bawah 1200 piksel.
  3. Gunakan saiz gambar yang statik.

[Kandungan Template interpretZZ.com]

Format dan Penggayaan Seksyen Kandungan

Kebelakangan ini Tedi gila meletakkan seksyen Kandungan dalam kiriman Tedi supaya senang Tedi membacanya. Walaupun ia memerlukan kegigihan yang tinggi tetapi agak memuaskan hati apabila membaca karangan panjang dan mempunyai banyak seksyen.

Format seksyen Kandungan ialah:

[Kandungan <Tajuk Kiriman>]

Penggayaan seksyen kandungan ialah:

<ol style="font-size: 13px; font-weight: bold; text-align: justify;"><li></li></ol>

[Kandungan Template interpretZZ.com]