HTML E-mail İmzası Oluşturma

Html Mail İmzası Oluşturma

Müşterilerinizle internette etkileşim halindeyseniz ve çok sık E-mail kullanıyorsanız, bazen dikkat çekici bir mail imzası oluşturmak çok önemlidir. Bir işletmeyi temsil ederken, hizmetlerinizi veya ürünlerinizi sunmak potansiyel müşterilerinize ulaşmada size yardımcı olabilir. Profesyonel olarak oluşturulmuş bir mail imzası, okuyucuların ilgisini çekmenize, sizinle kolay bir şekilde iletişim kurmalarına yardımcı olur. Bu nedenle, doğru biçimlendirilmiş, logonuzu veya sloganınızı içeren en iyi HTML mail imzası tam ihtiyacınız olan şeydir.

Bu makalemizde HTML imza oluşturma, mail imza tasarım örnekleri, mail imza ikonları yerleştirme hakkında detaylı bilgileri bulabileceksiniz.

HTML Mail İmzası Nedir?

HTML mail imzası, iletinizin altında görünen kişi veya şirket bilgilerinin yer aldığı bir metin parçasıdır. Görsel mail imzası ile arasındaki fark, HTML email imzası metinlerden oluşurken, görsel mail imzası resimlerden oluşur.

HTML imza, E-posta istemcileri tarafından sorunsuzca görüntülenirken, resim imzası çoğu kez zararlı veya istenmeye posta olarak algılanıp engellenebilmektedir. Genel bir kural olarak, e-posta iletilerinizin gövdesinde yer alan resimlerden daha fazla metin olması gerekir. Bu, istenmeyen postaları gerçek e-postalardan filtrelemek için spam filtrelerinin kontrol ettiği önemli bir ölçüttür.

HTML E-Posta İmzası Oluşturma:

Bir HTML mail imzası oluştururken dikkate almamız gereken ilk şeylerden biri, düz HTML yerine, tabloları kullanmamız gerektiğidir. Bunun başlıca nedeni, Outlook 2007, 2010, 2013 e-postalarını oluşturmak için Microsoft Word’ü kullanması ve CSS’yi desteklememesidir. Şimdi HTML mail imza nasıl yapılır birlikte inceleyelim.

1. Adım: İmzanızın her cihazda düzgün görünmesi için tabloya sabit bir genişlik eklemek genellikle iyi bir fikirdir. Bu örnekte, 400 piksel genişlik kullanıyoruz.

<table border="0" cellpadding="0" cellspacing="0" width="400">

Not: Table etiketinden sonra bir <tbody> etiketi ve ardından tr (satır) ve td (hücre) etiketleri gelmelidir.


2. Adım: İmzaya işletmenizin logosunu eklemek isteyebilirsiniz. Bunu yapmak için içine <td> ve <tr> etiketi ekleyin. Bu td etiketine sabit bir genişlik ve yükseklik vermelisiniz.

<tr>
<td border="0" cellpadding="0" cellspacing="0" height="43" width="231">
<a href="https://www.kukumav.net">
<img src="https://www.kukumav.net/images/logo.png" alt="Kukumav.Net Logo"></a><br></td>
</tr>

3. Adım: Şimdi çalışanların bilgilerini ekleme zamanı. Bu öğe için başka bir satır ve hücre ekleyin. Hücreye, metin için kullanmak istediğiniz yazı stili ve boyutu ekleyin. Ardından logo ile sonraki paragraf arasındaki boşluğu ayarlamak için bir yükseklik eğeri girin.

<tr>
<td height="80" style="font-family:Helvetica, Arial, sans-serif; font-size:18px; font-style:bold;">
<strong>Enis ÖZTÜRK</strong><br>
<span style="font-size:17px; font-weight:400;">Dijital Pazarlama Uzmanı</span>
</td>
</tr>

4. Adım: Kişinin adını ve şirketteki görevini eklediğimize göre şimdi telefon, email ve adres gibi bilgileri ekleyelim. Her biri için yeni satır ve hücreler ekleyerek bu adımı da tamamlayalım.

<tr>
<td height="30" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; color:#4d4d4e;">
<strong style="color:#000">Telefon:</strong> 0 (555) 111 22 33</td>
</tr>
	
<tr>
<td class="hover" height="30" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; color:#e0070c;">
<strong style="color:#000">Email:</strong>
<a href="mailto:enisozturk@kukumav.net" onMouseOver="this.style.color='#ff9800'" onMouseOut="this.style.color='#e0070c'" style="color:#e0070c;">
enisozturk[@]kukumav.net</a></td>
</tr>
	
<tr>
<td height="60" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; color:#4d4d4e;">
<strong style="color:#000">Adres:</strong>
Örnek Mah. Deneme Sok. No: 1 Kukumav Plaza 34295
<br> Beşiktaş/İstanbul<br><br></td>
</tr>

Not: Bağlantılarda, fareyle üzerine gelme renkleri “onMouseOver” ve “onMouseOut” olayları kullanılarak ayarlayabilirsiniz.


5. Adım: Son olarak sosyal medya ikonlarımızı ekleyerek bağlantı verelim. Ayrıca imzanın sonuna bir bilgilendirme mesajı eklemek şık olabilir.

<tr>
<td height="40">
<a href="https://www.facebook.com/kukumavnet/" target="_blank">
<img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/facebook.png" alt="Facebook"></a>
<a href="https://twitter.com/KukumavNet" target="_blank">
<img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/twitter.png" alt="Twitter"></a>
<a href="https://www.instagram.com/kukumavnet/" target="_blank">
<img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/instagram.png" alt="Instagram"></a>
<a href="https://www.linkedin.com/company/kukumavnet/" target="_blank">
<img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/linkedin.png" alt="Linkedin"></a>
<a href="https://www.youtube.com/channel/UCkscrRaIP5huAIsdXAfgF4Q" target="_blank">
<img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/youtube.png" alt="Youtube"></a>
</td>
</tr>

HTML mail imzası kodlarını tek bir pencerede görecek olursak, aşağıdaki gibi olmalıdır.

<head>
<meta charset="utf-8">
</head>

<table border="0" cellpadding="0" cellspacing="0" width="400">
<tbody>
<tr>
<td border="0" cellpadding="0" cellspacing="0" height="43" width="231">
<a href="https://www.kukumav.net">
<img src="https://www.kukumav.net/images/logo.png" alt="Kukumav.Net Logo"></a><br></td>
</tr>

<tr>
<td height="80" style="font-family:Helvetica, Arial, sans-serif; font-size:18px; font-style:bold;">
<strong>Enis ÖZTÜRK</strong><br>
<span style="font-size:17px; font-weight:400;">Dijital Pazarlama Uzmanı</span></td>
</tr>

<tr>
<td height="30" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; color:#4d4d4e;">
<strong style="color:#000">Telefon:</strong> 0 (555) 111 22 33</td>
</tr>

<tr>
<td class="hover" height="30" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; color:#e0070c;">
<strong style="color:#000">Email:</strong>
<a href="mailto:enisozturk@kukumav.net" onMouseOver="this.style.color='#ff9800'" onMouseOut="this.style.color='#e0070c'" style="color:#e0070c;">
enisozturk[@]kukumav.net</a></td>
</tr>

<tr>
<td height="60" style="font-family:Helvetica, Arial, sans-serif; font-size:16px; color:#4d4d4e;">
<strong style="color:#000">Adres:</strong>Örnek Mah. Deneme Sok. No:1 Kukumav Plaza 34295
<br>Beşiktaş/İstanbul<br><br></td>
</tr>

<tr>
<td height="40">
<a href="https://www.facebook.com/kukumavnet/" target="_blank">
<img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/facebook.png" alt="Facebook"></a>
<a href="https://twitter.com/KukumavNet" target="_blank">
<img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/twitter.png" alt="Twitter"></a>
<a href="https://www.instagram.com/kukumavnet/" target="_blank">
<img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/instagram.png" alt="Instagram"></a>
<a href="https://www.linkedin.com/company/kukumavnet/" target="_blank">
<img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/linkedin.png" alt="Linkedin"></a>
<a href="https://www.youtube.com/channel/UCkscrRaIP5huAIsdXAfgF4Q" target="_blank">
<img src="https://www.kukumav.net/images/icons/sosyal-meyda-iconlari/youtube.png" alt="Youtube"></a></td>
</tr>
        
<tr>
<td height="40">
<small style="font-family:Helvetica, Arial, sans-serif; font-size:10px; color:#4d4d4e;">
Bilgilendirme: Bu mesajı yazdırmadan önce çevreye verebileceğiniz zararları bir kez daha düşününüz.</small></td>
</tr>
</tbody>
</table>

Mail imzanızda Türkçe karakter sorunu yaşamamak için kod satırının en başına aşağıdaki kodu ekleyebilirsiniz;

 <head><meta charset="utf-8"></head>

HTML mail imzamızı oluşturduğumuza göre şimdi bunu nasıl ekleyeceğimize bakalım.

Microsoft Outlook HTML İmza Ekleme:

HTML email imzamızı oluşturduk peki ya bu imzayı Microsoft Outlook’a nasıl ekleyebiliriz adım adım inceleyelim.

1. Adım: Öncelikle Outlook imzalarının bulunduğu klasöre ulaşmamız gerekir. Aşağıdaki dosya yolunu takip edin.

C:Users > KullanıcıAdı > AppData > Roaming > Microsoft > Signatures

Bu dosyaları göremiyorsanız, önce gizli klasörleri göster seçeneğini ayarlamalısınız. Bunu nasıl yapacağınızı bilmiyorsanız, Microsoft’un gizli dosyaları gösterme makalesini inceleyin.

Eğer bu işlemle uğraşmak istemezseniz, “Windows tuşu +R” kısayolu tuşları ile Çalıştır penceresine %appdata% yazarak da ilgili klasörlere kolayca ulaşabilirsiniz.

Windows Çalıştır

2. Adım: Signatures klasörüne ulaştıktan sonra aşağıda boş bir klasör veya mevcut görsel imzalarınızın olduğu dosyaları göreceksiniz. Bu alana oluşturduğumuz HTML mail imzasını ekleyelim.

Outlook Mail İmza Ekleme

Not: HTML olarak tasarladığınız dosyanızın uzantısını “htm” olarak değiştirin.

3. Adım: Artık her şey hazır şimdi Microsoft Outlook’u açıp imza kısmından varsayılan imzanızı seçerek kullanmaya başlayabilirsiniz.

Html mail imzası oluşturma

Günün sonunda oluşturduğumuz HTML mail imzası yukarıdaki gibi görünüyor. Mail ileti penceresinde logonuzun ve sosyal ikonlarınızın boyutlarını mouse yardımıyla büyütüp küçültebileceksiniz.

Hazırladığımız HTML mail imzasını indirmek isterseniz Github HTML mail imzası oluşturma bölümünü ziyaret edin.

Ayrıca Outlook şirket maili kurma hakkında bilginiz yoksa blogumuzu inceleyin. HTML mail imza tasarımı ile ilgili yardıma ihtiyacınız olursa yorum yaparak sorularınızı sorabilirsiniz.

İlgili Konular

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir