Cara Menumpuk Kolom di Email Responsif

Diterbitkan: 2021-10-04

Sooooo, aku akan berkencan dengan diriku sendiri sebentar di sini, tapi tetaplah bersamaku.

Kembali ketika smartphone pertama kali mulai menjadi sesuatu yang harus dihadapi oleh pemasar email, solusi umum yang saya lihat dari semua orang adalah email satu kolom. Yang masuk akal karena tidak banyak klien email seluler yang mendukung kueri media. Pilihan termudah adalah menghindari masalah sama sekali dengan tetap menggunakan desain satu kolom di desktop yang mudah diubah ukurannya untuk seluler.

Tetapi dengan lebih banyak dukungan kueri media akhir-akhir ini, Anda dapat membuat desain yang lebih menarik yang memanfaatkan pengkodean responsif agar desain email Anda merespons ukuran layar tempat pelanggan Anda melihatnya.

Saya akan memandu Anda melalui:

Urutan susun normal vs terbalik
2 cara untuk mengkodekan konten yang menumpuk
Saat Anda tidak boleh menumpuk konten seluler

Mengapa Anda harus menumpuk kolom di ponsel

Perangkat seluler memberikan tampilan layar yang sangat terbatas, dan desain ideal untuk perangkat seluler adalah satu kolom. Tetapi kami tidak ingin membatasi diri pada desain satu kolom di desktop di mana kami memiliki banyak ruang. Masukkan kueri media agar Anda dapat menumpuk konten di seluler guna memastikan konten Anda dioptimalkan untuk layar yang lebih kecil.

Desktop	Seluler

Sumber: Email Sangat Bagus

Menyimpan konten email dalam tata letak desktop yang sama menghasilkan teks dan gambar yang sangat kecil atau konten yang terjepit di perangkat seluler. Ini bukan pengalaman pengguna yang baik karena pelanggan Anda kemungkinan besar akan kesulitan membaca konten Anda, seperti email ini selebar layar di beberapa ponsel:

buku anak-anak tentang email — *Sumber:* *Email Sangat Bagus*

Bantulah pelanggan Anda dan pastikan email Anda terlihat terbaik di setiap lingkungan membaca.

Metode susun untuk desain email

Saat Anda ingin menumpuk kolom di atas satu sama lain, ada dua cara berbeda untuk menyusun konten: dengan kolom kiri di atas (susun normal) atau kolom kanan di atas (tumpukan terbalik).

Penumpukan normal

Penumpukan normal adalah bentuk penumpukan yang paling umum. Dibutuhkan konten di kolom kiri dan menumpuknya di atas konten di kolom kanan, seperti:

susun biasa

Penumpukan terbalik

Penumpukan terbalik adalah ketika konten di kolom kiri ditumpuk di bawah konten di kolom kanan. Ini paling sering digunakan untuk baris tengah jika Anda memiliki pola Z di desktop, tetapi Anda ingin semua baris terlihat sama di ponsel. Dalam contoh ini baris pertama dan terakhir adalah susun biasa, tetapi baris kedua adalah kolom susun terbalik:

susun terbalik

2 cara untuk mengkode kolom yang menumpuk di ponsel

Ada beberapa cara berbeda untuk mengkode kolom susun. Saya akan memandu Anda menggunakan kueri media CSS dan kemudian metode pengkodean hibrida. Uji mereka dan lihat apa yang paling cocok untuk Anda.

Menggunakan kueri media CSS

Anda dapat membuat dua kolom hanya dengan membuat tabel dua kolom dan kemudian menggunakan kelas untuk memiliki tumpukan kolom.

CSSnya akan terlihat seperti ini:

 <style>
     @media screen and (max-width:600px) {
          .block { display: block !important; width: 100% !important; }
     }
  </style>

Dan HTML akan terlihat seperti ini:

 <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">
     <tr>
          <td class="block" align="left" valign="top" style="padding:10px 0;" width="50%">
                <img src="http://via.placeholder.com/300">
        </td>
          <td class="block" align="left" valign="top" style="padding:10px 0 10px 10px;" width="50%">
               <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Somebody once told me the world is gonna roll me. I ain't the sharpest tool in the shed. She was looking kind of dumb with her finger and her thumb in the shape of an "L" on her forehead.</p>
        </td>
     </tr>
 </table>

Kelas blok mengubah sel tabel menjadi blok di ponsel, dan konten berperilaku sesuai dan secara otomatis menumpuk di ponsel. Ini menghasilkan tumpukan normal.

Jika Anda ingin membuat tumpukan terbalik, Anda dapat menggunakan table-header-group dan table-footer-group sebagai nilai properti tampilan di CSS Anda, seperti:

 <style>
     @media screen and (max-width:600px) {
          .top { display: table-header-group !important; width: 100% !important; }
          .bottom { display: table-footer-group !important; width: 100% !important; }
     }
  </style>

Dan HTMLnya menjadi:

<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:600px;">
      <tr>
            <td class="bottom" align="left" valign="top" style="padding:10px 0;" width="50%">
                     <img src="http://via.placeholder.com/300">
            </td>
            <td class="top" align="left" valign="top" style="padding:10px 0 10px 10px;" width="50%">
                  <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Well the years start coming and they don't stop coming. Fed to the rules and I hit the ground running. Didn't make sense not to live for fun. Your brain gets smart but your head gets dumb.</p>
            </td>
      </tr>
 </table>

Pengkodean hibrida

Ini adalah metode yang saya gunakan. Ini jauh lebih banyak kode, tetapi telah menyelamatkan pantat saya pada beberapa kesempatan ketika klien email tidak mendukung kueri media. (Alat peraga gila untuk Nicole Merlin untuk tutorialnya yang pertama kali memperkenalkan saya pada pengkodean hibrida.)

Dalam hal ini, Anda menggunakan dua div dengan display: inline-block . Ini membuat konten Anda duduk bersebelahan di desktop dan mendorongnya untuk menumpuk di seluler. Berikut tampilan kode Anda:

<div style="display:inline-block;vertical-align:top;">
      <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
            <tr>
                  <td align="left" valign="top">
                        <img src="http://via.placeholder.com/300">
                  </td>
            </tr>
      </table>
</div>
<div style="display:inline-block;vertical-align:top;">
      <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
            <tr>
                  <td align="left" valign="top" style="padding-left: 10px;">
                        <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                  </td>
            </tr>
      </table>
</div>

Kemudian kami membungkus semua itu dalam sel tabel dan mengatur ukuran font ke 0 sehingga tidak ada ruang tambahan yang ditambahkan di sekitar div dan menyelaraskan semuanya di tengah sel tabel:

     <tr>
          <td style="font-size:0;" align="center" valign="top">
               <div style="display:inline-block;vertical-align:top;">
                     <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
                           <tr>
                                 <td align="left" valign="top">
                                       <img src="http://via.placeholder.com/300">
                                 </td>
                           </tr>
                     </table>
               </div>
               <div style="display:inline-block;vertical-align:top;">
                     <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
                           <tr>
                                 <td align="left" valign="top" style="padding-left: 10px;">
                                       <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                                 </td>
                           </tr>
                     </table>
               </div>
          </td>
     </tr>

Tapi tunggu! Karena Outlook tidak mendukung div, Anda juga perlu menambahkan beberapa tabel hantu di sekitar semuanya agar berfungsi di Outlook:

     <tr>
          <td style="font-size:0;" align="center" valign="top">
               <!--[if (gte mso 9)|(IE)]>
               <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
               <tr>
               <td valign="top" style="width: 300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;">
                                <tr>
                                      <td align="left" valign="top">
                                            <img src="http://via.placeholder.com/300">
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td><td valign="top" style="width:300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;">
                                <tr>
                                      <td align="left" valign="top" style="padding-left: 10px;">
                                            <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td>
               </tr>
               </table>
               <![endif]-->
          </td>
     </tr>

Kode ini berfungsi dengan baik tanpa kueri media jika Anda menggunakan kolom yang 50% dari tabel yang Anda isi. Tetapi jika Anda menggunakan kolom yang lebih kecil, Anda harus menambahkan beberapa kueri media untuk memperbarui lebar menjadi 100% di seluler. Lebih lanjut tentang itu di bawah ini.

Versi susun terbalik ini memanfaatkan atribut dir untuk memesan div dalam urutan yang berlawanan. Kami menambahkan dir="rtl" pada sel yang berisi dua kolom, dan kemudian setiap kolom harus memiliki dir="ltr" yang ditambahkan ke tabel agar konten ditampilkan dengan benar:

     <tr>
          <td style="font-size:0;" align="left" valign="top" dir="rtl">
               <!--[if (gte mso 9)|(IE)]>
               <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
               <tr>
               <td valign="top" style="width: 300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 300px;" dir=”ltr”>
                                <tr>
                                      <td align="left" valign="top">
                                            <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">Hey now, you're an all-star, get your game on, go play. Hey now, you're a rock star, get the show on, get paid. And all that glitters is gold. Only shooting stars break the mold.</p>
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td><td valign="top" style="width:300px;">
               <![endif]-->
                    <div style="display:inline-block;vertical-align:top;">
                          <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:300px;" dir=”ltr”>
                                <tr>
                                      <td align="left" valign="top" style="padding-left: 10px;">
                                            <img src="http://via.placeholder.com/300">
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td>
               </tr>
               </table>
               <![endif]-->
          </td>
     </tr>

Sesuatu yang perlu diingat saat coding dengan versi hybrid susun terbalik: Apa pun yang ada di <div> pertama itu akan berakhir di kolom kanan , yang kontra intuitif dan perlu membiasakan diri. Ini juga tidak selalu yang terbaik untuk aksesibilitas.

Pengkodean untuk dua lebar kolom yang berbeda

Seperti disebutkan di atas, jika Anda ingin menggunakan sel tabel berukuran berbeda, Anda harus menambahkan kueri media untuk mengubah sel tabel tersebut untuk seluler. Kasus paling umum dari hal ini adalah menggunakan kelas 100% yang mungkin sudah Anda siapkan di CSS Anda. Jika tidak, itu bisa terlihat seperti ini:

.w100p { width: 100% !important; }

Dan kemudian menambahkan kelas itu ke div dan tabel di HTML Anda seperti itu (contoh ini memiliki kolom yang lebarnya 100px dan yang lain dengan lebar 500px):

     <tr>
          <td style="font-size:0;" align="center" valign="top">
               <!--[if (gte mso 9)|(IE)]>
               <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
               <tr>
               <td valign="top" style="width: 100px;">
               <![endif]-->
                    <div class=”w100p” style="display:inline-block;vertical-align:top;">
                          <table class=”w100p” cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100px;">
                                <tr>
                                      <td align="left" valign="top">
                                            <img src="http://via.placeholder.com/300">
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td><td valign="top" style="width:500px;">
               <![endif]-->
                    <div class=”w100p” style="display:inline-block;vertical-align:top;">
                          <table class=”w100p” cellpadding="0" cellspacing="0" border="0" role="presentation" style="width:500px;">
                                <tr>
                                      <td align="left" valign="top" style="padding-left: 10px;">
                                            <p style="font-family: Helvetica, Arial, sans-serif;font-size:18px;line-height:28px;mso-line-height-rule:exactly;color:#262524;">So much to do, so much to see, so what's wrong with taking the back streets? You'll never know if you don't go. You'll never shine if you don't glow.</p>
                                      </td>
                                </tr>
                          </table>
                    </div>
               <!--[if (gte mso 9)|(IE)]>
               </td>
               </tr>
               </table>
               <![endif]-->
          </td>
     </tr>

Anda tidak perlu khawatir tentang mengubah lebar dalam kode bersyarat, karena itu hanya untuk Outlook untuk desktop.

Metode mana yang harus digunakan?

Kedua metode ini berfungsi dengan baik sekarang karena klien email seluler mendukung kueri media.

	Metode kueri media	Metode hibrida
kelebihan	Lebih sedikit kode yang berat Konten dibacakan secara berurutan oleh pembaca layar	Kurang rentan untuk dikacaukan oleh perubahan dan pembaruan dari klien email
Kontra	Lebih rentan dikacaukan oleh perubahan dan pembaruan dari klien email	Lebih banyak kode berat Konten dibaca rusak oleh pembaca layar

Metode berbasis media-query lebih ringan dari kode, dan karena Anda dapat menempatkan kelas di salah satu kolom, Anda dapat meninggalkan konten dalam urutan yang masuk akal untuk pembaca layar, sambil tetap menampilkannya dengan cara yang masuk akal secara visual .

Jadi, jika aksesibilitas menjadi perhatian besar, versi media-query mungkin adalah pilihan terbaik Anda.

Namun, jika Anda khawatir tentang memiliki versi yang lebih mudah dan kurang rentan terhadap keinginan klien email, versi hibrida adalah cara yang harus dilakukan.

Kapan tidak menumpuk konten di ponsel

Ini bukan untuk mengatakan semuanya perlu ditumpuk di ponsel. Jangan menjadi gila. Ada kasus di mana hal-hal tidak perlu ditumpuk di ponsel, seperti tanda tangan email ini:

tanda tangan email jaina — *Tanda tangan kami di banyak email kami adalah dua kolom yang tidak bertumpuk di ponsel.*

Atau kasus di mana Anda ingin beralih dari bertumpuk di desktop ke tidak bertumpuk di seluler.

Buletin Januari 2021 kami memuat semua resolusi kami dengan setiap bagian ditumpuk satu sama lain dalam tiga kolom. Saat menumpuknya di ponsel, kami ingin memanfaatkan ruang dengan lebih baik. Jadi, kami membuat gambar, nama, dan judul menjadi "tidak ditumpuk" sementara setiap kolom menjadi baris baru:

Desktop	Seluler

Jadi seperti yang Anda lihat, menumpuk semuanya tidak selalu jawabannya. Pastikan Anda memanfaatkan ruang sebaik mungkin saat mendesain untuk seluler. Dalam beberapa kasus, itu termasuk tidak menumpuk konten.

Mengkodekan variasi tumpukan saya yang menarik

Saya membuat efek di atas dengan menggunakan versi modifikasi dari kode susun hibrid. Dalam hal ini, saya mulai dengan hibrida tiga kolom:

<tr>
     <td align="center" valign="top" style="font-size:0; padding-bottom: 60px;">
     <!--[if (gte mso 9)|(IE)]>
     <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
     <tr>
     <td valign="top" style="width: 180px;">
     <![endif]-->
          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                     <tr>
                         <td align="center" valign="middle">
                              [--column 1 content  goes here--]
                         </td>
                     </tr>
               </table>
          </div>
     <!--[if (gte mso 9)|(IE)]>
     </td><td style="width: 30px;">
     </td><td valign="top" style="width: 180px;">
     <![endif]-->
          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                     <tr>
                         <td align="center" valign="middle">
                              [--column 2 content  goes here--]
                         </td>
                     </tr>
               </table>
          </div>
     <!--[if (gte mso 9)|(IE)]>
     </td><td style="width: 30px;">
     </td><td valign="top" style="width: 180px;">
     <![endif]-->
          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                     <tr>
                         <td align="center" valign="middle">
                              [--column 3 content  goes here--]
                         </td>
                     </tr>
               </table>
          </div>
     <!--[if (gte mso 9)|(IE)]>
     </td>
     </tr>
     </table>
     <![endif]-->
     </td>
</td>

Kemudian, di setiap kolom, saya menambahkan baris dengan susunan dua kolom dan baris normal kedua untuk kutipan. Karena saya tidak ingin gambar dan nama berdampingan di desktop, saya meninggalkan pemisah kolom hantu di antara div. Dan saya mengatur tabel di div agar memiliki lebar maksimum yang akan membuat div menjadi sebaris di ponsel.

Kolom itu sendiri disetel ke lebar 180 piksel, yang jauh lebih kecil di seluler, sehingga div ditumpuk hingga tabel tersebut disetel ke 100% oleh kueri media di seluler. Jadi setiap kolom sekarang terlihat seperti ini:

          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                    <tr>
                         <td style="font-size:0; padding-top: 30px;" align="center" valign="middle">
                         <!--[if (gte mso 9)|(IE)]>
                         <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
                         <tr>
                         <td valign="top" align="center" style="width: 180px;">
                         <![endif]-->
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       <img src="https://via.placeholder/79" alt="" width="79" height="79" >
                                                  </td>
                                             </tr>
                                   </table>
                              </div>
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       [-- content that stacks on desktop, but not on mobile goes here--]
                                                  </td>
                                           </tr>
                                   </table>
                              </div>
                         <!--[if (gte mso 9)|(IE)]>
                         </td>
                         </tr>
                         </table>
                         <![endif]-->
                         </td>
               </tr>
               <tr>
                         <td align="left" valign="top">
                              [--content that stacks on both desktop and mobile goes here--]
                         </td>
                    </tr>
               </table>
          </div>

Kemudian saya mengatur tabel agar memiliki nilai lebar maksimum yang akan membuatnya terletak bersebelahan di ponsel. Namun di desktop, sel yang berisi terlalu kecil untuk ditempatkan bersebelahan, sehingga konten menumpuk di desktop.

          <div style="display:inline-block;">
               <table class="wFull" cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 180px;">
                    <tr>
                         <td style="font-size:0; padding-top: 30px;" align="center" valign="middle">
                         <!--[if (gte mso 9)|(IE)]>
                         <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 100%;">
                         <tr>
                         <td valign="top" align="center" style="width: 180px;">
                         <![endif]-->
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="width: 79px;">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       <img src="https://via.placeholder/79" alt="" width="79" height="79" >
                                                  </td>
                                             </tr>
                                   </table>
                              </div>
                              <div style="display:inline-block;vertical-align:middle;">
                                   <table cellpadding="0" cellspacing="0" border="0" role="presentation" style="max-width: 221px;">
                                             <tr>
                                                  <td align="left" valign="middle">
                                                       [-- content that stacks on desktop, but not on mobile goes here--]
                                                  </td>
                                           </tr>
                                   </table>
                              </div>
                         <!--[if (gte mso 9)|(IE)]>
                         </td>
                         </tr>
                         </table>
                         <![endif]-->
                         </td>
               </tr>
               <tr>
                         <td align="left" valign="top">
                              [--content that stacks on both desktop and mobile goes here--]
                         </td>
                    </tr>
               </table>
          </div>

Lihat kode dalam tindakan untuk semua versi susun yang berbeda—termasuk yang ini.

Pikiran terakhir

Seperti yang Anda lihat, ketika Anda menggabungkan metode yang berbeda ini, Anda dapat menemukan semua jenis cara menarik untuk menumpuk dan mengurutkan konten. Jadi, pastikan pelanggan Anda memiliki pengalaman menonton terbaik dan pastikan desain Anda menonjol di seluler dengan menumpuk kolom-kolom tersebut untuk keterbacaan yang optimal. Cobalah dan beri tahu kami apa yang Anda dapatkan!

Bagikan, Terima Kasih!

Masuk ke Kotak Masuk—Bukan Folder Spam—dengan Pengujian Spam Litmus

Cari tahu bagaimana Pengujian Spam Litmus dapat menjauhkan Anda dari folder spam dengan menguji 25 filter dan memberikan wawasan tentang cara memperbaiki masalah keterkiriman.

Baca lebih lajut

Perbaikan Keterkiriman Email: 6 Cara Menghindari Pembakaran

Pulihkan dari masalah keterkiriman (dan hentikan agar tidak terjadi lagi) dengan rencana perbaikan keterkiriman email ini dan 6 cara untuk menghindari folder spam.

Baca lebih lajut

Email Favorit Tim Litmus September 2021

Lihat kampanye email yang menarik perhatian kami pada September 2021 dan merek yang menciptakan pengalaman pelanggan yang lebih baik dengan pemasaran email.

Baca lebih lajut

Perlindungan Privasi Email Apple Ada Di Sini: Apa Artinya Sebenarnya bagi Pemasar Email dan Apa yang Harus Dilakukan Sekarang

Perlindungan Privasi Mail Apple akhirnya ada di sini! Cari tahu bagaimana hal itu benar-benar memengaruhi program pemasaran email dan apa yang dapat Anda lakukan untuk mengoptimalkan email Anda.

Baca lebih lajut

Membuat email HTML daripada email semua gambar lebih mudah dari yang Anda kira

Mengubah email semua gambar menjadi email teks langsung lebih mudah dari yang Anda kira. Pelajari caranya dalam panduan langkah demi langkah ini.

Baca lebih lajut