Sebenarnya kita bisa membuat email dalam bentuk seperti template dengan kode HTML melalui ‘email client’. Dengan kode html yang ditanam tersebut kita dapat membuat email tidak standar lagi, menjadi lebih bergaya dan berwarna sesuai kreatifitas anda.
Template Email HTML ini, bisa kita fungsikan untuk apapun, termasuk untuk tujuan marketing dengan menawarkan produk atau profil perusahaan anda.
Apa Saja yang Diperlukan ?
Tentunya ada sudah mempunyai akun email.
Contoh kasus disini menggunakan akun Gmail dengan ‘Email Clien’ adalah Thunderbird. Maka pelajari dan terapkan Setting POP/IMAP dan SMTP gmail pada Thunderbird 3.0. Sebab Thunderbird yang nanti kita gunakan sebagai fasilitas untuk mengirim email.
Persiapkan “code editor” yang biasa anda gunakan, notepad juga bisa digunakan. Untuk membuat atau mengedit kode Template ‘HTML Email’.
Gambaran Umum Struktur HTML yang Digunakan
Struktur HTML yang digunakan untuk Email ini menggunakan elemen table, dan CSS ditempatkan secara internal. Seperti berikut:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title> … </title>
<style type=”text/css” media=”screen”>
…
</style>
</head>
<body>
<table>
<tr>
<td>
……..
</td>
</tr>
</table>
</body>
</html>
Tahapan Membuat Template HTML Email
Template Email disini hanya menggembangkan tiga bagian elemen yaitu ‘header’, ‘article’ dan ‘footer’. Dan Template Email ini sekedar mengambarkan isi update postingan Tutorialisme
Sebelumnya, lihat demo Pengembangan Template Email HTML, yang akan diterapkan.
1. Kode Halaman Template
Pada halaman template ini menggunkan lebar 560 px, anda bisa juga membuat dengan ukuran berbeda, biasanya standar lebarnya 600px.
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td align=”center”>
<table width=”560px” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”page”>
<tr>
<td>
…….. Kode Elemen Header
…….. Kode Elemen Article
…….. Kode Elemen Footer
</td>
</tr>
</table>
</td>
</tr>
</table>
2. Kode Elemen Header
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”header”>
<tr>
<td>
<h1><a href=”http://tutorialisme.students.uii.ac.id”>
<img src=”http://lh3.ggpht.com/_dfnTVAxeWMI/S0pJGIKkYGI/AAAAAAAADBU/DiNkLAYtQao/header.gif”
width=”560″ height=”77″ alt=”logo id tutorial”></a></h1>
</td>
</tr>
</table>
3. Kode Elemen Article
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”article”>
<tr>
<td>
<h2>Setting POP/IMAP dan SMTP gmail pada Thunderbird 3.0</h2>
<p><small>kang Rohman | January 7th, 2010</small></p>
<p><img src=”mail.jpg”
width=”219″ height=”148″ alt=”Main Content Inline Small” align=”left” hspace=”10″>
Sebelumnya pada artikel Sekilas tentang Email telah disinggung bahwa
untuk mengelola email bisa langsung melalui Webmail dimana
anda membuat email atau dapat pula diteruskan/download memakai
Software Email Client. Namun, sebelum anda meneruskan email ke software email client,
terlebih dahulu anda harus melakukkan Pengaturan / setting pada email client yang di gunakan.
Pengaturan terhadap email client ini lazim juga disebut sebagai setting POP (Post Office Protocol) /
IMAP (Internet Message Access Protocol ) dan SMTP (Simple Mail Transfer Protocol).
<a href=”http://tutorialisme.students.uii.ac.id/cara-setting-popimap-dan-smtp-gmail-pada-thunderbird-30/#more-138″>Selanjutnya</a></p>
<h2>Cara Membuat Email di gmail (Google Mail)</h2>
<p><small>kang Rohman | January 6th, 2010</small></p>
<p><img src=”gmail.jpg”
width=”166″ height=”145″ alt=”Main Content Inline Small” align=”left” hspace=”10″>
Jika sebelumnya telah dibahas tentang bagaimana cara membuat email di yahoo,
maka pada artikel iniTutorialisme akan mencoba membahas tentang Cara membuat Email di Gmail
(Google Mail).</p>
<p>Ada beberapa alasan kenapa Tutorialisme menyarankan anda untuk mempunyai email
(akun) di gmail : <a href=”http://tutorialisme.students.uii.ac.id/review-mengenai-email-apa-itu-email/#more-76″>
Selanjutnya</a></p>
</td>
</tr>
</table>
3. Kode Elemen Footer
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”footer”>
<tr>
<td height=”40″ class=”footer” align=”center”>
<p><small>2009 <a href=”http://tutorialisme.students.uii.ac.id”>
tutorialisme.students.uii.ac.id</a>
| Design: Tutorialisme</small></p>
</td>
</tr>
</table>
3. Kode CSS
<style media=”screen”>
body {margin: 0; padding: 0; color: #333333; background-color: #ddd;}
a {color: #ce0316;}
p {margin: 0; padding: 5px 0; line-height:20px; font-family: Arial; font-size: 12px;}
h2 {margin:10px 0 0; padding: 0 0 10px; font-family:
Georgia; font-size: 20px; font-weight:normal;border-bottom:1px solid #999;}
.page {background-color: #fff; padding:10px;}
.article {border-bottom:1px solid #999; margin:5px 0 10px; padding: 0 0 10px;}
.footer {background-color: #eee;}
</style>
Maka,
keseluruhan kode HTML ‘Template Email’ tersebut menjadi:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<title>Demo Email HTML</title>
<style type=”text/css” media=”screen”>
body {margin: 0; padding: 0; color: #333333; background-color: #ddd;}
a {color: #ce0316;}
p {margin: 0; padding: 5px 0; line-height:20px;
font-family: Arial; font-size: 12px;}
h2 {margin:10px 0 0; padding: 0 0 10px; font-family:
Georgia; font-size: 20px; font-weight:normal;border-bottom:1px solid #999;}
.page {background-color: #fff; padding:10px;}
.article {border-bottom:1px solid #999; margin:5px 0 10px; padding: 0 0 10px;}
.footer {background-color: #eee;}
</style>
</head>
<body>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td align=”center”>
<table width=”560px” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>
<h1><a href=”http://tutorialisme.students.uii.ac.id/”>
<img src=”/header.gif”
width=”560″ height=”77″ alt=”logo tutorialisme”></a></h1>
</td>
</tr>
</table>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>
<h2>Setting POP/IMAP dan SMTP gmail pada Thunderbird 3.0</h2>
<p><small></small></p>
<p><img src=”/mail.jpg” width=”219″ height=”148″ alt=”Main Content Inline Small” align=”left” hspace=”10″> Sebelumnya pada artikel Sekilas tentang Email telah disinggung bahwa untuk mengelola email bisa langsung melalui Webmail dimana anda membuat email atau dapat pula diteruskan/download memakai Software Email Client. Namun, sebelum anda meneruskan email ke software email client, terlebih dahulu anda harus melakukkan Pengaturan / setting pada email client yang di gunakan. Pengaturan terhadap email client ini lazim juga disebut sebagai setting POP (Post Office Protocol) / IMAP (Internet Message Access Protocol ) dan SMTP (Simple Mail Transfer Protocol). <a href=”http://tutorialisme.students.uii.ac.id/cara-setting-popimap-dan-smtp-gmail-pada-thunderbird-30/#more-138″>Selanjutnya</a></p>
<h2>Cara Membuat Email di gmail (Google Mail)</h2>
<p><img src=”/gmail.jpg” width=”166″ height=”145″
alt=”Main Content Inline Small” align=”left” hspace=”10″>
Jika sebelumnya telah dibahas tentang bagaimana cara membuat email di yahoo,
maka pada artikel ini Tutorial akan mencoba membahas tentang Cara membuat Email di Gmail
Google Mail).</p>
<p>Ada beberapa alasan kenapa Tutorial menyarankan anda untuk
mempunyai email (akun) di gmail :
<a href=”http://tutorialisme.students.uii.ac.id/cara-setting-popimap-dan-smtp-gmail-pada-thunderbird-30/“>
Selanjutnya</a></p>
</td>
</tr>
</table>
<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”footer”>
<tr>
<td height=”40″ align=”center”>
<p><small>2009 <a href=”http://tutorialisme.students.uii.ac.id“>tutorialisme.students.uii.ac.id</a> | Design: Tutorialisme</small></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Catatan: Untuk format HTML dengan menggunakan table, setiap image <img> di simpan di dalam kode HTML, seperti contoh diatas. Setiap image tersebut perlu anda upload, bisa ditempat hosting image gratisan, dan ambil url lengkapnya.
Apabila anda kesulitan membuat template email ini sendiri, anda dapat menggunakan kode template diatas dan anda sesuaikan dengan kebutuhan anda. Tapi anda juga dapat mencari penyedia jasa free template email lainnya apabila template diatas belum sesuai keinginan anda, seperti di 30 Free HTML Email Templates. Ada 30 pilihan disana, kemudian anda download dan modifikasi file ‘template-basic.html’ dengan ‘code editor’.
Tahapan Mengirim “Template Email HTML” dengan Thunderbird
Mengapa menggunakan “email client” seperti Thunderbird untuk menggirim template email ? Sebab Gmail danYahoo tidak menyediakan fasilitas untuk menyisipkan kode HTML.
Buka program Thunderbird anda yang telah di instal,
Klik ‘Write’, pada bagian atas, :
masukan alamat email yang akan anda kirim
tulis subject dari email anda tersebut
klik bagian halaman tersebut, maka tool insert diatas akan aktif
klik Insert dan pilih HTML, maka akan muncul layar baru
masukan kode HTML template email yang telah anda buat
klik insert,
Apabila anda telah yakin, langsung klik ‘Send’, dibagian atas.
Penutup
Demikian keseluruhan tahapan Membuat Template Email HTML. Anda dapat melakukan uji coba sendiri, mungkin dengan menggunakan kode
Leave a Reply