surat HTML. Membuat Template Email HTML Responsif Sederhana Cara Membuat Email dalam HTML

Ada banyak cara untuk mengirim surat html melalui klien email dan, tentu saja, melalui layanan pengiriman surat. Tetapi bagaimana jika Anda perlu mengirim beberapa surat, tetapi tidak memiliki program apa pun? Ada cara cerdas untuk mengirim surat html melalui Yandex Mail.

Langkah 1. Mempersiapkan surat

Aturan penting saat mengirim surat dengan cara ini adalah tautan ke gambar dalam kode harus ditulis lengkap, dan gambar itu sendiri harus ada di server. Jika tautan mengarah ke gambar dari komputer Anda, program tidak akan melihatnya.

Jika Anda memesan template dari kami, maka kami telah mengurus semuanya sendiri dan sumber Anda sudah berisi template yang telah disiapkan sebelumnya dengan tautan yang ditulis dengan benar.

Buka template menggunakan notepad biasa dan salin seluruh isi surat. Maka kita perlu memasukkan semua kode ini ke badan surat di Yandex Mail.

Langkah 2. Memasukkan surat ke Yandex

Masuk ke Yandex Mail dan buat surat baru. Berikutnya adalah triknya. Klik tombol "Format huruf" untuk mengalihkan Yandex Mail ke mode yang mendukung pemformatan.

Anda akan melihat panel seperti ini (disorot dengan warna biru). Sekarang antarmuka mendukung desain yang berbeda, dan juga kode hurufnya. Memang benar, Anda tidak bisa memasukkannya begitu saja.

Kami akan menggunakan trik dan memasukkan kode template kami langsung ke kode halaman. Untuk melakukan ini, Anda perlu menemukan sepotong kode yang bertanggung jawab atas isi surat itu, dan menggantinya dengan konten kami.

Untuk melakukan ini, klik kanan pada area kosong surat itu dan pilih "lihat kode" (Di setiap browser item ini disebut berbeda, tetapi artinya sama).

Kami melakukan semua manipulasi licik ini agar blok ini muncul, yang bertanggung jawab atas isi surat itu. (Panel mungkin terlihat berbeda tergantung pada browser Anda. Kami menampilkan Google Chrome sebagai contoh).

Sekarang kita perlu menghapus blok ini dan memasukkan kode surat kita sebagai gantinya. Untuk melakukan ini, klik kanan pada blok ini dan pilih "Edit sebagai HTML",

sekarang kita perlu menghapus kode saat ini...

...dan masukkan kode surat kita pada tempatnya. Setelah itu tutup panel dengan mengklik tanda silang di pojok kanan atas panel.

Jika Anda melakukan semuanya dengan benar, template akan muncul di badan email saat ini tidak ada gambar di dalamnya, tapi jangan khawatir. Surat yang dikirimkan akan berisi gambar, asalkan link ke gambar tersebut benar (lihat Langkah 1). Jika Anda khawatir dengan hasilnya, kirimkan saja surat ini kepada diri Anda sendiri, dan Anda akan melihat bahwa semuanya berjalan sebagaimana mestinya.

Langkah 3. Mengirim surat html di Yandex Mail

Buat perubahan yang diperlukan pada isi surat hanya dengan mengetik ulang teks dan menerapkan gaya yang berbeda. Anda dapat menggunakan semua alat dari panel atas.

Setelah surat siap, masukkan email penerima, subjek surat dan kirim!

Diperbarui: 12 bulan yang lalu

Tata letak email HTML dari awal bukanlah pekerjaan mudah. Tugas utamanya adalah membuat kode universal yang dapat dimengerti oleh berbagai klien email dan akan ditampilkan dengan indah baik di ponsel, tablet, dan komputer.

Biasanya, semakin kuno kodenya, semakin tinggi kemungkinan kode tersebut akan berfungsi dengan benar. Meskipun saat ini ada editor blok yang menyederhanakan tata letak huruf, pekerjaan mereka didasarkan pada prinsip lama yang sama dalam mengembangkan templat HTML.

Ada dua aturan dasar yang harus selalu Anda ingat saat mulai menata surat:

Mari kita lihat lebih dekat.

Di mana menulis kode template? Tidak di Microsoft Word, kan? Ini nyaman dan dapat dimengerti ketika Anda segera melihat seperti apa kode tertulis itu dan dalam bentuk apa klien akan menerimanya. Program untuk pengiriman email massal ePochta Mailer memiliki fungsionalitas luar biasa untuk menulis kode paralel dan melihat template yang dibuat secara real time. Oleh karena itu, selanjutnya semua contoh pembuatan, pengeditan, dan pengiriman surat akan disajikan dengan bantuannya. Anda dapat mencoba versi demo gratis dari program ini dan, saat membaca artikel, segera berlatih membuat template email Anda sendiri.

Format templat email HTML

Hal pertama yang perlu Anda lakukan adalah memutuskan struktur berbasis tabel. Untuk buletin, tata letak satu dan dua kolom berfungsi paling baik karena memungkinkan Anda menyusun sejumlah besar informasi dengan cara yang paling jelas dan mudah diakses. Tata letak kolom tunggal Selain itu, ini ditampilkan dengan sempurna di versi seluler dan di tablet.

Paling sering, tata letak satu kolom meliputi:

  1. Tajuk(header) yang memuat logo dan link navigasi dari website induk.
  2. Dasar-dasar tubuh surat yang isinya, gambar dan link ke halaman web dengan informasi lengkap, gambaran umum disediakan dalam surat.
  3. catatan kaki(footer) surat, yang terkadang menduplikasi link navigasi, dan juga menyertakan instruksi untuk berhenti berlangganan dan link berhenti berlangganan secara langsung.

Berisi elemen yang sama tata letak dua kolom, satu-satunya perbedaan adalah ia memiliki dua kolom dan ketika menampilkan huruf di perangkat seluler, kolom-kolom tersebut dapat digeser satu di bawah yang lain (prinsip daya tanggap), atau dapat diubah skalanya sesuai dengan ukuran layar (yang tidak selalu nyaman jika fontnya terlalu kecil).

Cara membuat template surat HTML: Membuat dokumen.

Kode HTML pesan email apa pun terdiri dari dua bagian:

  1. Tajuk. Segala sesuatu yang akan dibungkus dalam sebuah tag Dan, klien email akan menganggapnya sebagai tajuk surat.
  2. Tubuh. Kode ditempatkan di dalam tag Dan akan digunakan untuk membuat struktur pesan email Anda.

Menulis kode HTML untuk pesan email dimulai dengan membuat dokumen XHTML:

1.
2.
3.
4.
5. Petunjuk Membuat Template Email <meta name="viewport" content="width=device-width, initial-scale=1.0"/><br> 6. </head><br> 7. </html></p> <p><b><!DOCTYPE> </b> menjelaskan kepada pengirim tag HTML apa yang diharapkan untuk selanjutnya, dan rangkaian aturan HTML dan CSS apa yang Anda ikuti saat membuat email. Meskipun beberapa klien email (Gmail, Google Apps, Yahoo! Mail, dan Outlook.com) akan mengganti header Anda dengan milik mereka sendiri, sebaiknya sertakan kode ini dalam dokumen Anda.</p> <p><b><meta http-equiv=»Content-Type» /> </b> menentukan cara menangani teks dan karakter khusus di email Anda. <br><b>"teks/html"</b> memperjelas mekanisme bahwa baris teks berikut harus diperlakukan sebagai html.</p> <p><b><meta name=»viewport»/> </b> Menentukan perangkat tempat email dilihat untuk mengatur area pesan yang terlihat agar sesuai dengan lebar layar.</p> <p>Header pesan email tertulis di dalam tag <b><title> </b>. Dalam hal ini, jika penerima memilih "Lihat Online", judul pesan akan ditampilkan di tab browser.</p> <h2>Tata letak isi pesan email. Membuat tabel</h2> <p>Struktur umum surat dibuat menggunakan tag <b><body> </b>.</p> <p>Pertama-tama, atur padding ke nol (tags <margin>Dan <padding>) untuk menghindari spasi kosong yang tidak diperlukan pada templat.</p> <p>Lebar tabel utama harus 100% (lebar tabel = "100%"). Ini sebenarnya bertindak sebagai bingkai utama, “badan” pesan email. Berbeda dengan tagnya <body>Saat bekerja dengan tabel, Anda dapat bekerja dengan gaya: misalnya, untuk menyetel warna latar belakang umum untuk seluruh huruf, Anda perlu menentukannya di parameter tabel utama ini.</p> <p>Nilai tanda <cellpadding>Dan <cellspacing>juga harus nol, sekali lagi untuk menghindari ruang kosong yang tidak perlu. Tag ini bertanggung jawab untuk indentasi dari batas sel tabel.</p> <p>1. <body style="margin: 0; padding: 0;"><br> 2. <table border="1" cellpadding="0" cellspacing="0" width="100%"><br> 3. <tr><br> 4. <td><br>5. Halo! <br> 6. </td><br> 7. </tr><br> 8. </table><br> 9. </body><br></p> <p>Sejauh ini surat kami terlihat seperti ini:</p> <p><img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_1.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>(adanya frame merupakan hasil dari tag border=”1″)</p> <p>Lebar maksimum yang mungkin dan nyaman untuk pesan email yang dilihat di klien email di komputer pribadi adalah 600px. Untuk mencegah huruf meluas ke seluruh layar, Anda perlu membuat tabel bersarang lainnya di dalam tabel utama yang sudah dibuat, dengan menentukan secara ketat nilai lebarnya: width=”600″.</p> <blockquote><p><i><b>Aturan emas dalam membuat kode HTML untuk pesan email adalah:</b> jika atribut (tag) yang diinginkan ada di HTML, gunakanlah dan tidak perlu menggunakan CSS.</i></p> </blockquote> <p>Kode tabel bertumpuk ini harus disisipkan sebagai pengganti kata "Halo!"</p> <p>1. <table style="border-collapse: collapse;" border="1" width="600" cellspacing="0" cellpadding="0" align="center"><br> 2. <tbody><br> 3. <tr><br> 4. <td>Halo!</td><br> 5. </tr><br> 6. </tbody><br> 7. </table><br></p> <p>Sekarang suratnya terlihat seperti ini:</p> <p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_2.png' width="100%" loading=lazy loading=lazy></p> <p>Anda memperhatikan bahwa tabel bersarang menggunakan atribut <b><border-collapse> </b> dengan arti "runtuh"? Ini memberitahu klien email untuk menampilkan batas di sekitar sel tabel dengan benar. Jika Anda tidak melakukan ini, versi Outlook yang lebih baru akan, misalnya, menambahkan spasi kecil yang tidak perlu di antara batas dua tabel saat memproses email.</p> <p>Kami telah mengatakan bahwa setiap email terdiri dari tiga bagian logis: header, badan surat dengan konten utama, dan footer.</p> <p>Sekarang kita perlu menampilkan ini secara struktural di template yang telah kita buat. Mari tambahkan dua baris lagi. Mari kita salin bagian tabel bersarang dari kode yang bertanggung jawab untuk baris tersebut</p> <p>1. <tr><br> 2. <td><br>3. Halo! <br> 4. </td><br> 5. </tr><br></p> <p>dan duplikat beberapa kali, ganti salam dengan nomor seri baris.</p> <p>Seharusnya terlihat seperti ini:</p> <p>1. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"><br> 2. <tr><br> 3. <td><br>4. Jalur 1 <br> 5. </td><br> 6. </tr><br> 7. <tr><br> 8. <td><br>9. Jalur 2 <br> 10. </td><br> 11. </tr><br> 12. <tr><br> 13. <td><br>14.Baris 3 <br> 15. </td><br> 16. </tr><br> 17. </table><br></p> <p>Secara visual:</p> <p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_3.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Mari kita tambahkan <b>warna latar belakang</b> secara terpisah untuk setiap baris. Karena di HTML ada tag khusus untuk ini <b><bgcolor> </b>, Anda harus menggunakannya daripada gaya CSS. Harap dicatat bahwa saat memilih warna, Anda harus menentukan semua 6 karakter kode, karena tiga karakter yang disingkat mungkin tidak berfungsi.</p> <p>1. <table align="center" border="1" cellpadding="0" cellspacing="0" width="600"><br> 2. <tr><br> 3. <td bgcolor="#ffa500"><br>4. Jalur 1 <br> 5. </td><br> 6. </tr><br> 7. <tr><br> 8. <td bgcolor="#ffffff"><br>9. Jalur 2 <br> 10. </td><br> 11. </tr><br> 12. <tr><br> 13. <td bgcolor="#1e90ff"><br>14. Jalur 3 <br> 15. </td><br> 16. </tr><br> 17. </table><br></p> <p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_4.png' width="100%" loading=lazy loading=lazy></p> <p>Mari kita fokus pada baris pertama - ini akan menjadi header surat itu.</p> <h3>Baris 1. Tata letak header email.</h3> <p>Rencananya akan ditempatkan gambar dengan logo dan nama perusahaan di baris pertama. Tapi pertama-tama Anda perlu <b>sesuaikan lekukan</b> s, yang akan berada di semua sisi gambar hingga batas internal sel. Bertanggung jawab untuk ini <b>menandai - <padding> </b>.</p> <p>Bekerja dengan <padding>Penting untuk diingat untuk menentukan setiap nilai indentasi (atas, bawah, kiri, kanan), jika tidak, hasilnya mungkin tidak dapat diprediksi.</p> <p>Saat menentukan parameter, cukup dapat diterima untuk menggunakan notasi versi singkat, seperti <i>bantalan: 10px 10px 5px 5px;</i>.</p> <p>Jika masalah muncul, rekaman versi panjang akan menyelesaikannya, misalnya <i>padding-atas: 10 piksel; padding-kanan: 10px; bantalan-bawah: 5px; padding-kiri: 5px</i>;.</p> <p>Jika klien email menghapus CSS sebaris Anda atau melakukan pengeditan sendiri pada email Anda, Anda dapat membukanya <b>licik</b>. Daripada menggunakan tag <padding>Tambahkan sel kosong ke tabel, sehingga menciptakan ruang yang diperlukan. Sel tambahan tersebut akan kosong (dengan kode di dalamnya), tetapi dengan tinggi atau lebar yang jelas.</p> <p>Misalnya:</p> <p><tr><td style="font-size: 0; line-height: 0;" height="10"> </td></tr></p> <p>Harap dicatat bahwa akan lebih tepat jika menulis gaya di dalam tag <td>, tapi tidak di dalam <p>Atau <div>, yang terakhir berperilaku lebih tidak terduga.</p> <p>Dalam contoh email kami, kami menggunakan CSS internal untuk menyesuaikan padding gambar. Setelah memasukkan gambar, Anda perlu menulis <b>teks alternatif</b>, yang akan dilihat penerima sebagai pengganti gambar jika gambar tersebut dinonaktifkan oleh pengirim. Dan penting untuk menambahkan parameter style="display:block;" yang keberadaannya memastikan bahwa klien email tidak menambahkan spasi tambahan di bawah gambar. Jika perlu, Anda dapat memusatkan gambar dengan menambahkan align="center" ke tag <td>.</p> <blockquote><p><i><b>Catatan.</b> Ingatlah bahwa sebagian besar klien email memblokir gambar secara default. Oleh karena itu, tulislah di teks alternatif sebuah petunjuk kepada klien, gambar tentang topik apa yang seharusnya, bukan ruang kosong. Selain itu, sebaiknya jangan menuliskan informasi unik yang penting pada gambar yang tidak terduplikasi di surat. Lagi pula, jika gambar diblokir, surat Anda sama sekali tidak berguna.</i></p> </blockquote> <p>Contoh kode untuk Baris 1 dengan gambar yang disisipkan:</p> <p>1. <td align="center" style="padding: 20px 0px 30px 0px;" bgcolor="#ffa500"><br> 2. <img src='https://i1.wp.com/E:\epochta\БЛОГ\mailer_html_img.png' width="600" loading=lazy loading=lazy><br> 3. </td><br></p> <p>Secara visual:</p> <p><img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_5.png' width="100%" loading=lazy loading=lazy></p> <h3>Baris 2. Bekerja dengan konten dalam template email HTML</h3> <p>Pertama, Anda harus melakukannya <b>tentukan padding di dalam sel tengah</b>(baris kedua) agar tabel baru dengan konten yang disarangkan di dalamnya terlihat indah tanpa menyatu dengan batas utama. Anda sudah tahu bahwa indentasi dari sisi elemen yang akan berada di dalam sel diatur menggunakan tag <padding>Memulai! 😉</p> <p>Secara visual akan terlihat seperti ini:</p> <p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_6.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Sekarang kita perlu bersiap <b>tempat untuk konten</b>. Seperti disebutkan di atas, Anda perlu menambahkan tabel bersarang lainnya. Ini akan menjadi tabel dengan tiga baris:</p> <ul><li>satu untuk judul,</li> <li>yang kedua untuk penjelasan singkat artikel,</li> <li>yang ketiga untuk garis dengan dua kolom.</li> </ul><p>Lebar tabel yang akan berada di baris kedua tidak boleh dalam piksel, tetapi dalam persentase (100%). Hal ini diperlukan jika Anda ingin suratnya responsif.</p> <p>Kode untuk Baris 2 dengan tabel bersarang:</p> <p>1. <td bgcolor="#ffffff" style="padding: 40px 30px 40px 30px;"><br> 2. <table border="1" cellpadding="0" cellspacing="0" width="100%"><br> 3. <tr><br> 4. <td><br>5. Jalur 1 <br> 6. </td><br> 7. </tr><br> 8. <tr><br> 9. <td><br>10. Jalur 2 <br> 11. </td><br> 12. </tr><br> 13. <tr><br> 14. <td><br>15. Jalur 3 <br> 16. </td><br> 17. </tr><br> 18. </table><br> 19. </td></p> <p>Secara visual:</p> <p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_7.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Kami menulis judul artikel dan uraian singkatnya. Anda dapat menambahkan indentasi pada baris deskripsi untuk membuat teks tampak lebih bagus. Harap diperhatikan bahwa ePochta Mailer memungkinkan Anda menambahkan dan mengubah teks langsung di editor visual, tanpa membuka tab kode HTML.</p> <p>Tabel bersarang dengan teks:</p> <p>1. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br> 2. <tbody><br> 3. <tr><br> 4. <td><br>5. Promosi merek di Viber: pengiriman massal melalui messenger <br> 6. </td><br> 7. </tr><br> 8. <tr><br> 9. <td style="padding: 20px 0px 30px 0px;"><br>10. Kini Viber tidak hanya menjadi aplikasi korespondensi pribadi, tetapi juga saluran efektif untuk promosi komersial barang dan jasa. <br>11. Hanya orang malas yang tidak mengatakan bahwa Viber untuk bisnis adalah alat yang benar-benar efektif dan murah. Apakah begitu? Kami mengundang Anda untuk memeriksa keakuratan pernyataan ini. <br> 12. </td><br> 13. </tr><br> 14. <tr><br> 15. <td><br>16. Jalur 3 <br> 17. </td><br> 18. </tr><br> 19. </tbody><br> 20. </table></p> <p>Secara visual:</p> <p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_8.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Untuk baris terakhir tabel, kami telah menyiapkan dua kolom dengan gambar dan teks.</p> <p>Ayo berangkat secara berurutan.</p> <p>Pertama, karena kita membutuhkan jarak antara kolom tabel, dan atributnya <margin>kita tidak bisa menggunakannya, kita akan curang sedikit dan membuat tabel dengan tiga kolom. Kolom tengah hanya akan kosong dan sempit.</p> <p>Parameter kolom utama adalah lebar. Dalam hal ini, kita akan fokus pada lebar gambar yang akan ditempatkan di dalamnya. Lebarnya 260px. Dan agar tidak bingung saat menghitung berapa persentase 260 piksel dari tabel pada 540px* (dan ini akan menjadi 48,1%), akan lebih mudah untuk menunjukkan lebar yang diketahui.</p> <p><i>*Lebar tabel bersarang 540px adalah lebar tabel utama 600px dikurangi padding, 30px di setiap sisinya.</i></p> <p>Total, dua kolom 260 piksel + kolom kosong tengah 20 piksel.</p> <p>Kami juga menentukan nilai valign="top" untuk kedua kolom, yang akan menyelaraskan teks secara vertikal, di sepanjang tepi atas garis, berapa pun jumlah teks di setiap kolom. Secara default, nilai valign dianggap tengah; jangan lupa untuk mengubahnya.</p> <p>1. <table border="1" cellpadding="0" cellspacing="0" width="100%"><br> 2. <tr><br> 3. <td width="260" valign="top"><br>4. Kolom 1 <br> 5. </td><br> 6. <td style="font-size: 0; line-height: 0;" width="20"><br> 7. <br> 8. </td><br> 9. <td width="260" valign="top"><br>10. Kolom 3 <br> 11. </td><br> 12. </tr><br> 13. </table></p> <p>Secara visual:</p> <p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_9.png' width="100%" loading=lazy loading=lazy></p> <p>Menambahkan gambar dan konten.</p> <p>Karena kita membutuhkan dua baris lagi, kita memasukkan tabel lain ke setiap kolom, tidak melupakan indentasi.</p> <p>1. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br> 2. <tbody><br> 3. <tr><br> 4. <td width="260" valign="top"><br> 5. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br> 6. <tbody><br> 7. <tr><td> <br> 8. <img src='https://i2.wp.com/E:\epochta\БЛОГ\битые картинки на блоге\iStock_000004384999XSmall.jpg' height="160" width="260" loading=lazy loading=lazy> </td><br> 9. </tr><br> 10. <tr><br> 11. <td style="padding: 25px 0px 0px 0px;"><br>12. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dalam tempous adipiscing felis, duduklah amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. <br> 13. </td><br> 14. </tr><br> 15. </tbody> </table><br> 16. </td><br> 17. <td width="20" style="line-height: 0; font-size: 0px;"><br> 18. <br> 19. </td><br> 20. <td width="260" valign="top"><br> 21. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br> 22. <tbody> <tr><br> 23. <td><br> 24. <br> 25. <img src='https://i1.wp.com/E:\epochta\БЛОГ\битые картинки на блоге\greed.jpeg' height="160" width="260" loading=lazy loading=lazy> </td><br> 26. </tr><br> 27. <tr><br> 28. <td style="padding: 25px 0px 0px 0px;"><br>29. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dalam tempous adipiscing felis, duduklah amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. <br> 30. </td><br> 31. </tr><br> 32. </tbody> </table><br> 33. </td><br> 34. </tr><br> 35. </tbody> </table></p> <p>Secara visual:</p> <p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_10.png' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Baris 3. Membuat kode HMTL untuk footer buletin email</h3> <p>Komponen utama footer adalah kontak perusahaan dan tautan berhenti berlangganan. Seperti yang Anda lihat, ini adalah dua elemen berbeda dan sekali lagi kita perlu membagi baris menjadi dua kolom menggunakan tabel tambahan.</p> <p>Agar tidak lupa, pertama-tama kita akan menambahkan indentasi, lalu tabel.</p> <p><td bgcolor="#1e90ff " style="padding: 30px 30px 30px 30px;"><br>Jalur 3 <br> </td></p> <p>Secara visual:</p> <p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_11.png' width="100%" loading=lazy loading=lazy></p> <p>Kami membagi baris menjadi dua kolom menggunakan tabel tambahan.</p> <p>1. <table border="1" cellpadding="0" cellspacing="0" width="100%"><br> 2. <tr><br> 3. <td><br>4. Kolom 1 <br> 5. </td><br> 6. <td><br>7. Kolom 2 <br> 8. </td><br> 9. </tr><br> 10.</table></p> <p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_12.png' width="100%" loading=lazy loading=lazy></p> <p>Dalam templat ini, kolom pertama untuk informasi kontak perusahaan, kolom kedua untuk tautan berhenti berlangganan. Anda dapat menambahkan ikon jejaring sosial, mengubah jumlah kolom, dan susunan informasi dalam format apa pun.</p> <p>Tabel tambahan dengan informasi footer:</p> <p>1. <table width="100%" border="1" cellspacing="0" cellpadding="0"><br> 2. <tbody><tr><br> 3. <td width="280"><br> 4. <p>Perusahaan ePochta <br><br>5. dukungan@situs</p><br> 6. </td><br> 7. <td align="right"><br>8. Anda menerima surat ini sebagai klien perusahaan kami. Untuk berhenti berlangganan dari milis, klik tautan di bawah. <br> 9. </td><br> 10. </tr><br> 11. </tbody></table></p> <p>Secara visual:</p> <p><img src='https://i2.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_13.png' width="100%" loading=lazy loading=lazy></p> <p>Pernahkah Anda memperhatikan hal itu <b>teks</b> di kolom footer kedua <b>sejajar kanan</b>? Hal ini dimungkinkan berkat atributnya <b>sejajar=”benar”</b> untuk tag <td>.</p> <p>Templatnya sudah siap!</p> <h2>Tata letak desain templat buletin email</h2> <p>Bagian pertama artikel membahas struktur tata letak email. Sekarang kita akan berbicara sedikit tentang desain dan desain.</p> <p>Dengan kemampuan inline CSS Anda dapat mengubahnya <b>pilihan font</b>– gunakan tanda <b>atau <strong>untuk font tebal, masukkan langsung ukuran dan nama keluarga font.</p> <p>Mari kita ambil, misalnya, judul artikel “Promosi Merek di Viber: Pengiriman Massal di Messenger” di template yang sudah dibuat dan berikan parameter berikut:</p> <p>1. <td style="color: #153643; font-family: Arial, sans-serif; font-size: 24px;"><p align="center">2. Promosi merek di Viber: <br>surat massal di messenger <br> 3. </p></td></p> <p>Lihat bagaimana teksnya berubah:</p> <p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_14.png' width="100%" loading=lazy loading=lazy></p> <p>Sekarang mari kita hapus batas tabel yang kita tinggalkan sehingga secara visual mudah untuk melacak perubahan dalam struktur. Caranya, pada tab kode HTML, tekan CTRL+F atau masuk ke menu Edit – Temukan. Pada kotak dialog yang terbuka, pilih fungsi Ganti dan atur nilai border=”1″ untuk diganti dengan border=”0″. Buka tab Pesan - semua batas hilang, dan Anda memiliki tata letak pesan email yang bersih dan siap pakai.</p> <p><img src='https://i1.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_15.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Jika diinginkan, Anda dapat membiarkan batas tabel utama sebesar 600 piksel, sehingga tidak terlalu terlihat, misalnya:</p> <p><table width="600" align="center" style="border-collapse: collapse; border: 1px solid #cccccc;" cellspacing="0" cellpadding="0"></p> <p>Mari tambahkan indentasi kecil pada baris pertama agar latar belakang tidak menempel di bagian paling atas halaman: 1. <table width="100%" border="0" cellspacing="0" cellpadding="0"><br> 2. <tbody>><tr><br> 3. <td style="padding: 20px 0px 30px;"></p> <p>Dan sekarang - ujian pena: kami mengirim surat ke alamat email percobaan.</p> <p>Anda dapat membuat daftar selusin alamat di berbagai klien email dan meluncurkan surat percobaan, atau mengirim satu surat menggunakan menu Tes, dengan menentukan satu alamat penerima pesan.</p> <p>Seperti inilah tampilan template yang dibuat di Gmail</p> <p><img src='https://i0.wp.com/epochta.ru/blog/wp-content/uploads/2018/05/mailer_html-email_16.png' align="center" height="511" width="324" loading=lazy loading=lazy></p> <p>Buat templat email bermerek Anda sendiri, uji dan puaskan pelanggan Anda dengan buletin warna-warni. ePochta Mailer memiliki fungsionalitas yang kuat untuk membuat pesan. Dalam artikel tersebut, tugas utamanya adalah menulis kode template sendiri, jadi kami tidak menyentuh kemampuan program. Anda dapat membaca lebih lanjut tentang ePochta Mailer di.</p> <p>Dan biarkan pelanggan Anda membaca buletin Anda dengan senang hati!</p> <p>Pemasaran email masih merupakan alat pemasaran yang efektif. Menurut statistik, manusia modern menerima sekitar 10 email setiap hari, banyak di antaranya adalah spam biasa. Mengingat pengguna membuat keputusan tentang pentingnya informasi hanya dalam beberapa detik, semua yang ada di surat itu penting: mulai dari tata letak surat dan daya tarik visual hingga struktur teks penjualan.</p> <p>Untuk menarik minat pengguna dalam 5-6 detik, surat Anda harus sempurna dalam segala hal, oleh karena itu penting untuk berhati-hati dalam membuat dan tata letak surat untuk didistribusikan. Namun sebelum Anda mulai bekerja dengan kode, kenali masalah yang menanti Anda.</p> <p><b>Bagaimana menghindari kesalahan dan tidak melakukan hal bodoh</b></p> <p>Jika Anda seorang ahli tata letak dan mengetahui semua trik modern, kami akan mengecewakan Anda - semua ini tidak berhasil di sini. Layanan pengiriman surat tidak memiliki format yang seragam untuk menampilkan surat, jadi menggunakan float, margin, dan padding yang sama tidak akan berfungsi. Ya, secara teori, Anda menerima surat yang indah dengan beberapa kolom, tetapi penerima akan mencampuradukkan semua kolom ini dan mendapatkan kekacauan yang akan dengan cepat masuk ke spam.</p> <p>Dan banyak layanan yang mematikan dukungan untuk gaya, dengan alasan bahwa teks dalam surat itu penting, bukan pembungkusnya. Ya, mungkin mereka benar, tapi tunjukkan pada saya seseorang yang membaca “lembar” panjang dari teks sepanjang hari...</p> <p>Dan yang paling menarik adalah masih ada email client yang tidak mendukung tampilan gambar dalam huruf. Tentu saja, hal ini dapat dengan mudah diperbaiki hanya dengan mencentang kotak di parameter, tetapi tidak semua orang akan menyadari bahwa ini semua tentang pengaturan default.</p> <p>Oleh karena itu, saat mendesain gambar dalam huruf, jangan lupa untuk memberi alt. Dalam hal ini, penerima setidaknya akan melihat teks Anda dalam bingkai, dan bukan sesuatu yang kosong dan menakutkan.</p> <ul><li>Membuat template HTML menggunakan notepad biasa (Anda perlu mengubah format file menjadi html) atau melalui software khusus, misalnya Dreamweaver dari Adobe;</li> </ul><ul><li>Gunakan tag html standar untuk membuat struktur surat seperti yang telah disebutkan, kami membuat tabel dan menulis atributnya sendiri untuk setiap sel;</li> </ul><p><img src='https://i1.wp.com/leadzavod.com/wp-content/uploads/2018/08/1.png' width="100%" loading=lazy loading=lazy></p> <ul><li>Jangan lupa tentang aturan umum: lebar surat tidak boleh melebihi 600 px, gambar harus dikompresi (misalnya, gunakan TinyPNG) agar surat dimuat dengan cepat, dan buat font lebih besar dari 13, karena mungkin ada menjadi masalah dengan tampilan pada perangkat Apple.</li><li>Kami mengisi sel dengan teks, sambil memformat setiap blok.</li><li>Jangan lupa tentang tata letak huruf adaptif.</li> </ul><h2>Menguji tata letak email</h2> <p>Setelah mendesain template html, saatnya menguji kreasi kita. Untuk melakukan ini, Anda dapat menggunakan layanan khusus, misalnya PutsMail atau surat Yandex biasa. Dalam kasus pertama, semuanya jelas - kami membaca instruksi dan melihat bagaimana kami membuat buletin.</p> <ul><li>pastikan tombol “tidak ada registrasi” tidak menyala;</li><li>klik kanan pada kolom input teks dan pilih "periksa elemen", setelah itu jendela dengan kode akan muncul, di mana baris dengan <div>;</li><li>Tekan <br>dan klik “edit”;</li><li>tambahkan kode Anda dan kirimkan surat itu.</li> </ul><p>Jangan khawatir, ini mungkin terlihat menakutkan di editor itu sendiri, tetapi penerima akan menerimanya dalam bentuk yang Anda inginkan.</p> <p>Namun timbul pertanyaan: bagaimana cara mengirim surat seperti itu? Mari kita cari tahu. Jika Anda ingin mengirim surat html, Anda tidak akan bisa begitu saja menempelkan kode tersebut ke badan pesan di kotak surat Anda—kode itu sendiri akan ditampilkan tanpa menjalankannya. Untuk penyampaian yang lengkap, dengan kemampuan menampilkan tabel, link, grafik dan gambar, Anda perlu menggunakan program khusus.</p> <p>Klien email adalah program khusus untuk mengirim surat dalam kode HTML. Mari kita pertimbangkan salah satunya - <i>Mozilla Thunderbird</i>. Mari kita lihat lebih dekat proses pengiriman surat dengan gambar dan lain-lain. <br></p> <h2><span>Klien email Mozilla Thunderbird</span></h2> <p>Pertama, Anda perlu mengunduh program ini. Untuk melakukan ini, kunjungi situs web resmi klien email Mozilla: <i><span>http://mozilla-russia.org/products/thunderbird/</span> </i>. Di jendela yang terbuka, di sebelah kiri, pilih program dalam bahasa Rusia untuk sistem operasi komputer Anda:</p> <p>Unduh dan pasang. Setelah peluncuran pertama, Anda perlu mengonfigurasi klien agar berfungsi dengan email. Awalnya, kita diminta untuk melakukan integrasi, tapi kita bisa melewatinya:</p> <p><img src='https://i0.wp.com/saitoseoteka.ru/wp-content/uploads/2014/09/integraciya-s-pochtovim-klientom-433x280.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Sekarang kita perlu menentukan alamat email dari mana kita akan mengirim surat di masa depan. Untuk melakukan ini, klik tautan khusus <i>"Surel"</i>:</p> <p><img src='https://i2.wp.com/saitoseoteka.ru/wp-content/uploads/2014/09/e-mail-programma-480x171.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Kemudian sebuah jendela muncul di mana Anda dapat membuka kotak surat untuk layanan yang diusulkan, tetapi Anda dapat melewati item ini dengan mengklik <i>"Lewati ini dan gunakan email saya yang ada"</i>. Maka Anda perlu menentukan <i>Nama</i>, <i>alamat</i> Dan <i>kata sandi</i> di kotak surat yang ada:</p> <p><img src='https://i2.wp.com/saitoseoteka.ru/wp-content/uploads/2014/09/registraciya-pochti-368x280.jpg' align="center" height="280" width="368" loading=lazy loading=lazy></p> <p>Setelah ini, klik <i>"Melanjutkan"</i>— server email terdeteksi secara otomatis, dan setelah mengklik tombol <i>"Siap"</i>, kita kembali ke jendela awal. Jadi, kami menginstal dan mengkonfigurasi klien email untuk bekerja dengan email (bekas) yang melaluinya kami akan mengirim templat surat html.</p> <h3><span>Mengirim surat html</span></h3> <p>Buka klien lagi <i>Mozilla Thunderbird</i>, jika Anda sudah menutupnya, dan klik item menu paling atas <i>"Membuat"</i>:</p> <p><img src='https://i0.wp.com/saitoseoteka.ru/wp-content/uploads/2014/09/sozdanie-html-pisma.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Formulir untuk membuat email terbuka. Isi datanya: <i>"Kepada siapa"</i> Dan <i>"Subjek"</i>:</p> <p><img src='https://i1.wp.com/saitoseoteka.ru/wp-content/uploads/2014/09/zapolnenie-soobsheniya-480x235.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Ingatlah bahwa jika Anda ingin menentukan beberapa penerima, Anda perlu mengklik tepat di bawah item tersebut <i>"Kepada siapa"</i>— untuk tujuan ini, ada beberapa bidang penerima. Data sudah diisi, mari kita beralih ke template.</p> <p>Mari kita kirimkan template surat yang diusulkan pada artikel sebelumnya (pertama dalam daftar). Kami membukanya di editor (file shablon1.html) dan melakukan tindakan kecil yang tidak rumit, yaitu menunjukkan alamat lengkap gambar yang benar:</p> <img src='https://i1.wp.com/saitoseoteka.ru/wp-content/uploads/2014/09/polniy-adres-kartinki-351x280.jpg' align="center" height="280" width="351" loading=lazy loading=lazy><h4><span>Cara menunjukkan tautan ke gambar dengan benar di template email html</span></h4> <p>Jadi, kita sudah mendapat alamat lengkap gambar di komputer, sekarang kita perlu memasukkannya ke dalam template. Untuk melakukan ini, buka template untuk diedit dan sebagai gantinya <i><img src='/miscellaneous/html-pismo-sozdanie-prostogo-adaptivnogo-html-shablona-elektronnogo-pisma.html' loading=lazy loading=lazy> </i> kami menulis <i><img src='/miscellaneous/html-pismo-sozdanie-prostogo-adaptivnogo-html-shablona-elektronnogo-pisma.html' loading=lazy loading=lazy> </i>.</p> <p>Harap dicatat bahwa garis miring berbeda di komputer dan di browser. Selain itu, sebelum disk beech dengan lokasi file yang diinginkan, ditambahkan <i>"mengajukan:///"</i>.</p> <h3><span>Memasukkan templat ke badan email di klien email Mozilla Thunderbird</span></h3> <p>Jadi, kami mengisi alamat penerima surat kami, menunjukkan subjeknya, dan memperbaiki tautannya. Sekarang, klik item menu paling atas di jendela pembuatan email klien email kami <i>"Menyisipkan"</i> — <i>"HTML"</i>.</p> <p>Untuk mengirim surat html melalui Mail.ru Anda harus sedikit pintar. Kami secara mandiri menemukan cara melakukan ini dan menyiapkan petunjuk langkah demi langkah yang terperinci.</p> <h2>Langkah 1. Mempersiapkan surat</h2> <p>Pertama, Anda memerlukan templat itu sendiri dengan tautan yang benar ke gambar. Intinya gambar harus diunggah ke server dan file tersebut harus berisi link ke gambar tersebut, dan bukan ke gambar dari komputer Anda. Ini adalah aturan penting, jika tidak, tidak akan ada gambar di surat terakhir.</p> <p>Jika Anda memesan pengembangan dari kami, maka Anda sudah menyiapkan file terpisah untuk kebutuhan ini, dan gambarnya diunggah ke server kami. Jika tidak, Anda harus melakukannya sendiri.</p> <p>Mari kita mulai. Buka file template menggunakan notepad biasa dan salin semua isinya nanti kita perlu menempelkannya ke badan surat di Mail.ru.</p> <p><img src='https://i1.wp.com/goodmails.ru/wp-content/uploads/2015/12/Mail1.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Langkah 2. Memasukkan surat ke Mail.ru</h2> <p>Buka kotak surat Anda di situs web dan buat surat baru. Pastikan Anda mengaktifkan penataan huruf. Anda akan melihat panel seperti di bawah ini.</p> <p><img src='https://i2.wp.com/goodmails.ru/wp-content/uploads/2015/12/Mail2.jpg' width="100%" loading=lazy loading=lazy></p> <p>Klik kanan pada kolom untuk memasukkan teks surat dan pilih “lihat kode” (Di setiap browser item ini disebut berbeda, tetapi artinya sama). Panel pengeditan kode halaman akan terbuka. (Panel mungkin terlihat berbeda tergantung pada browser Anda. Kami menampilkan Google Chrome sebagai contoh).</p> <p><img src='https://i1.wp.com/goodmails.ru/wp-content/uploads/2015/12/Mail3.jpg' width="100%" loading=lazy loading=lazy></p> <p>Kode yang bertanggung jawab untuk mengisi surat telah disorot. Tapi kita membutuhkan baris kode utama - html.</p> <p><img src='https://i0.wp.com/goodmails.ru/wp-content/uploads/2015/12/Mail4.jpg' width="100%" loading=lazy loading=lazy></p> <p>Blok inilah yang bertanggung jawab untuk mengisi surat dan sebagai gantinya kita perlu memasukkan template kita. Untuk melakukan ini, klik kanan pada blok tersebut dan klik “Edit sebagai HTML”.</p> <p><img src='https://i1.wp.com/goodmails.ru/wp-content/uploads/2015/12/Mail5.jpg' width="100%" loading=lazy loading=lazy></p> <p><img src='https://i0.wp.com/goodmails.ru/wp-content/uploads/2015/12/Mail6.jpg' width="100%" loading=lazy loading=lazy></p> <p>...dan sebagai gantinya tempelkan kode surat kita, yang kita salin sendiri di awal pelajaran. Kemudian cukup tutup panel dengan mengklik tanda silang di pojok kanan.</p> <p><img src='https://i2.wp.com/goodmails.ru/wp-content/uploads/2015/12/Mail7.jpg' width="100%" loading=lazy loading=lazy></p> <p>Jika Anda melakukan semuanya dengan benar, surat Anda akan muncul. Jangan khawatir karena tidak ada gambarnya. Penerima akan menerima surat dengan gambar. Jika Anda khawatir, kirimkan saja surat kepada diri Anda sendiri dan lihat hasilnya.</p> <p><img src='https://i2.wp.com/goodmails.ru/wp-content/uploads/2015/12/Mail8.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Langkah 3. Mengirim email HTML</h2> <p>Tinggal mengoreksi isi surat itu jika perlu. Tulis ulang saja teksnya. Anda dapat menggunakan alat desain dari panel atas.</p> <p>Setelah Anda benar-benar puas dengan isi surat itu, kirimkanlah. Dan agar tidak perlu melakukan ini setiap saat, Anda dapat menyimpannya sebagai template di mail.ru.</p> <p><img src='https://i2.wp.com/goodmails.ru/wp-content/uploads/2015/12/Mail9.jpg' width="100%" loading=lazy loading=lazy></p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div style="display: none;"> <div class="share42init" data-url="https://englishirts.ru/miscellaneous/html-pismo-sozdanie-prostogo-adaptivnogo-html-shablona-elektronnogo-pisma.html" data-title="surat HTML. Membuat Template Email HTML Responsif Sederhana Cara Membuat Email dalam HTML"></div> <script type="text/javascript" src="https://englishirts.ru/wp-content/cache/minify/c6b54.js"></script> </div> <div class="mob_info"> <img src="https://englishirts.ru/wp-content/themes/kuzov/pic/mob_info.png" alt="mob_info" loading=lazy loading=lazy></div> </main> </div> <div class="wRight"><div class="wRight-menu"><ul class="wRight-menu-cat-wrap"><li><div class="wRmcatOpen"><div class="cat-block-sidebar-item-img"><div class="item-img-sidebar-bg" style="background-image:url(/wp-content/uploads/2015/12/ic-79.png)"></div></div> <span class="act_text">Navigasi situs</span></div><ul class="wRight-menu-cat"> <li class="menu-item sp_sm_1_icon"> <a href="https://englishirts.ru/id/category/tips/"> <div class="cat-block-sidebar-item-img"> <div class="item-img-sidebar-bg"></div> </div> <span>Saran</span> </a> </li> <li class="menu-item sp_sm_1_icon"> <a href="https://englishirts.ru/id/category/internet/"> <div class="cat-block-sidebar-item-img"> <div class="item-img-sidebar-bg"></div> </div> <span>Internet</span> </a> </li> <li class="menu-item sp_sm_1_icon"> <a href="https://englishirts.ru/id/category/programs/"> <div class="cat-block-sidebar-item-img"> <div class="item-img-sidebar-bg"></div> </div> <span>Program</span> </a> </li> <li class="menu-item sp_sm_1_icon"> <a href="https://englishirts.ru/id/category/wi-fi-setup/"> <div class="cat-block-sidebar-item-img"> <div class="item-img-sidebar-bg"></div> </div> <span>Pengaturan Wi-Fi</span> </a> </li> <li class="menu-item sp_sm_1_icon"> <a href="https://englishirts.ru/id/category/gadgets/"> <div class="cat-block-sidebar-item-img"> <div class="item-img-sidebar-bg"></div> </div> <span>gadget</span> </a> </li> <li class="menu-item sp_sm_1_icon"> <a href="https://englishirts.ru/id/category/windows-7-xp/"> <div class="cat-block-sidebar-item-img"> <div class="item-img-sidebar-bg"></div> </div> <span>Windows 7, XP</span> </a> </li> <li class="menu-item sp_sm_1_icon"> <a href="https://englishirts.ru/id/category/tvs/"> <div class="cat-block-sidebar-item-img"> <div class="item-img-sidebar-bg"></div> </div> <span>TV</span> </a> </li> <li class="menu-item sp_sm_1_icon"> <a href="https://englishirts.ru/id/category/miscellaneous/"> <div class="cat-block-sidebar-item-img"> <div class="item-img-sidebar-bg"></div> </div> <span>Aneka ragam</span> </a> </li> <li class="menu-item sp_sm_1_icon"> <a href="https://englishirts.ru/id/category/windows-10/"> <div class="cat-block-sidebar-item-img"> <div class="item-img-sidebar-bg"></div> </div> <span>Windows 10</span> </a> </li> <li class="menu-item sp_sm_1_icon"> <a href="https://englishirts.ru/id/category/security/"> <div class="cat-block-sidebar-item-img"> <div class="item-img-sidebar-bg"></div> </div> <span>Keamanan</span> </a> </li> </ul></li></ul></div><div class="wRight-b sidebar__br"> <!— Сайдбар - небоскреб —> </div><div class="wRight-b sidebar__br"> </div><div class="wRight-fresh"><div class="fresh--title"><span>Artikel Terbaru</span></div> <div class="fresh-art"> <a class="fresh-art--link" href="https://englishirts.ru/id/security/luchshii-sposob-sdat-vychislitelnuyu-moshchnost-kompyutera-v-arendu-zarabotok.html"> <div class="fresh--thumb"> <img width="130" height="100" src="/uploads/a1d55e96b808738731cff30b35b774df.jpg" class="img-fresh-r wp-post-image" alt="Menghasilkan uang dari pemrosesan Dapatkan uang dari sumber daya komputer internet" / loading=lazy loading=lazy></div> <div class="fresh-text--ttl">Menghasilkan uang dari pemrosesan Dapatkan uang dari sumber daya komputer internet</div> </a> </div> <div class="fresh-art"> <a class="fresh-art--link" href="https://englishirts.ru/id/wi-fi-setup/vindovs-7-maksimalnaya-vosstanovlenie-zapuska-chto-delat-esli-sistema-ne.html"> <div class="fresh--thumb"> <img width="130" height="100" src="/uploads/efa50525ae83f27f563c4907845991d8.jpg" class="img-fresh-r wp-post-image" alt="Apa yang harus dilakukan jika sistem tidak dapat dijalankan?" / loading=lazy loading=lazy></div> <div class="fresh-text--ttl">Apa yang harus dilakukan jika sistem tidak dapat dijalankan?</div> </a> </div> <div class="fresh-art"> <a class="fresh-art--link" href="https://englishirts.ru/id/wi-fi-setup/chto-oznachaet-oshibka-404-not-found-oshibki-kotorye-my-lyubim.html"> <div class="fresh--thumb"> <img width="130" height="100" src="/uploads/ae5181daaf1ea1f12d87a9a03c1d856c.jpg" class="img-fresh-r wp-post-image" alt="Kesalahan yang kita buat'любим'" / loading=lazy loading=lazy></div> <div class="fresh-text--ttl">Serangga yang kami 'cintai'</div> </a> </div> <div class="fresh-art"> <a class="fresh-art--link" href="https://englishirts.ru/id/wi-fi-setup/kak-ubrat-razryv-mezhdu-abzacami-izvestnye-sposoby-kak-v-vorde.html"> <div class="fresh--thumb"> <img width="130" height="100" src="/uploads/e516d0a2da3a9e9d221b3a0ce50c4a1f.jpg" class="img-fresh-r wp-post-image" alt="Metode yang dikenal, seperti"ворде" убрать пробелы между абзацами" / loading=lazy loading=lazy></div> <div class="fresh-text--ttl">Cara yang diketahui untuk menghilangkan spasi antar paragraf di Word</div> </a> </div> <div class="fresh-art"> <a class="fresh-art--link" href="https://englishirts.ru/id/windows-8/chto-takoe-kontekstnoe-menyu-podrobnyi-razbor-variantov.html"> <div class="fresh--thumb"> <img width="130" height="100" src="/uploads/98a8f3a3b179305630d199e5296f9bf6.jpg" class="img-fresh-r wp-post-image" alt="Analisis mendetail tentang opsi menu konteks Windows" / loading=lazy loading=lazy></div> <div class="fresh-text--ttl">Analisis mendetail tentang opsi menu konteks Windows</div> </a> </div> </div><div class="wRight-b sidebar__br"><div class="fixed-b"><div id="yandex_rtb_R-A-257279-3"></div> </div></div></div> </div> </div> </div> </div> <footer class="wFooter"><div class="wSize"><div class="f_logo"> <img src="https://englishirts.ru/wp-content/themes/kuzov/pic/footer_logo.png" alt="" loading=lazy loading=lazy></div><div class="f_list"> <noindex><div class="menu-p"><ul class="bot-menu-nav" id="bot-nav"> <li class="menu--item"><a href="https://englishirts.ru/id/category/tips/">Saran</a></li> <li class="menu--item"><a href="https://englishirts.ru/id/category/internet/">Internet</a></li> <li class="menu--item"><a href="https://englishirts.ru/id/category/programs/">Program</a></li> <li class="menu--item"><a href="https://englishirts.ru/id/category/wi-fi-setup/">Pengaturan Wi-Fi</a></li> <li class="menu--item"><a href="https://englishirts.ru/id/category/gadgets/">gadget</a></li> </ul></div><div class="menu-p"><ul class="bot-menu-nav" id="bot-nav"> <li class="menu--item"><a href="https://englishirts.ru/id/category/tips/">Saran</a></li> <li class="menu--item"><a href="https://englishirts.ru/id/category/internet/">Internet</a></li> <li class="menu--item"><a href="https://englishirts.ru/id/category/programs/">Program</a></li> <li class="menu--item"><a href="https://englishirts.ru/id/category/wi-fi-setup/">Pengaturan Wi-Fi</a></li> <li class="menu--item"><a href="https://englishirts.ru/id/category/gadgets/">gadget</a></li> </ul></div> </noindex></div><div class="fw-area"> <noindex><ul class="soc_bot_wg"> <li><a href="https://vk.com/share.php?url=https://englishirts.ru/miscellaneous/html-pismo-sozdanie-prostogo-adaptivnogo-html-shablona-elektronnogo-pisma.html" target="_blank" class="soc soc-vk"> <span class="soc_title">Vkontakte</span><span class="soc_count"></span></a></li> <li><a href="https://connect.ok.ru/offer?url=https://englishirts.ru/miscellaneous/html-pismo-sozdanie-prostogo-adaptivnogo-html-shablona-elektronnogo-pisma.html" target="_blank" class="soc soc-od"><span class="soc_title">Teman sekelas</span><span class="soc_count"></span></a></li> <li><a href="https://www.facebook.com/sharer/sharer.php?u=https://englishirts.ru/miscellaneous/html-pismo-sozdanie-prostogo-adaptivnogo-html-shablona-elektronnogo-pisma.html" target="_blank" class="soc soc-fb"><span class="soc_title">Facebook</span><span class="soc_count"></span></a></li> <li><a href="https://www.twitter.com/share?url=https%3A%2F%2Fenglishirts.ru%2Fid%2Fmiscellaneous%2Fhtml-pismo-sozdanie-prostogo-adaptivnogo-html-shablona-elektronnogo-pisma.html" target="_blank" class="soc soc-tw"><span class="soc_title">Twitter</span><span class="soc_count"></span></a></li> <li><a href="https:/" target="_blank" class="soc soc-gp"><span class="soc_title">Google+</span><span class="soc_count"></span></a></li> <li><a href="" target="_blank" class="soc soc-pint"><span class="soc_title">Pinterest</span><span class="soc_count"></span></a></li> </ul> </noindex><div class="f-widget"><div class="counters"><li id="text-2" class="widget widget_text"></li></div></div><div class="clear"></div><div class="f-bot"><ul class="menu" id="menu-footer"> <li><a href="https://englishirts.ru/id/sitemap.xml">Peta Situs</a></li> <li><a href="">Periklanan</a></li> <li><a href="https://englishirts.ru/id/feedback.html">Kontak</a></li> </ul><div class="copyright"> <p>© 2024 englishirts.ru. Internet. Program. gadget. jendela. Keamanan. Seluruh hak cipta</p> </div></div></div> <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><div class="cp_arr" id="ur"></div> <script type="text/javascript" src="https://englishirts.ru/wp-content/cache/minify/13d7d.js"></script> <script type="text/javascript" src="https://englishirts.ru/wp-content/cache/minify/33cdd.js"></script> <script type="text/javascript" src="https://englishirts.ru/wp-content/cache/minify/0fef6.js"></script> <script type='text/javascript'>var es_widget_notices={ "es_email_notice":"Please enter email address","es_incorrect_email":"Please provide a valid email address","es_load_more":"loading...","es_ajax_error":"Cannot create XMLHTTP instance","es_success_message":"Successfully Subscribed.","es_success_notice":"Your subscription was successful! Within a few minutes, kindly check the mail in your mailbox and confirm your subscription. If you can't see the mail in your mailbox, please check your spam folder.","es_email_exists":"Email Address already exists!","es_error":"Oops.. Unexpected error occurred.","es_invalid_email":"Invalid email address","es_try_later":"Please try after some time","es_problem_request":"There was a problem with the request"} ;</script> <script type="text/javascript" src="https://englishirts.ru/wp-content/cache/minify/37d4f.js"></script> <script type='text/javascript'>var es_widget_page_notices={ "es_email_notice":"Please enter email address","es_incorrect_email":"Please provide a valid email address","es_load_more":"loading...","es_ajax_error":"Cannot create XMLHTTP instance","es_success_message":"Successfully Subscribed.","es_success_notice":"Your subscription was successful! Within a few minutes, kindly check the mail in your mailbox and confirm your subscription. If you can't see the mail in your mailbox, please check your spam folder.","es_email_exists":"Email Address already exists!","es_error":"Oops.. Unexpected error occurred.","es_invalid_email":"Invalid email address","es_try_later":"Please try after some time","es_problem_request":"There was a problem with the request"} ;</script> <script type="text/javascript" src="https://englishirts.ru/wp-content/cache/minify/ec5ba.js"></script> <script async defer src="https://cdn.jsdelivr.net/jquery.goodshare.js/3.2.5/goodshare.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> </footer> </div> <style> #BlockPeek { display: none !important; } @media screen and (max-width: 480px) { #BlockPeek { display: block !important; } } </style> </body> </html>