Blogger’a MailChimp Abonelik Formu Ekleme ve Özelleştirme

Son Güncelleme: 10 Ekim 2020

Bloğunuz için bir e-posta abone listesi oluşturmak ilerleyen zamanlarda blog trafiğinizi arttıracak en önemli faktörlerden biridir. Ayrıca bu şekilde bir topluluğa sahip olmak daha fazla gelir elde etmenize yardımcı olur. “Blogger’a MailChimp abonelik formu nasıl eklenir” sorusunu detaylı bir şekilde açıkladığım bu yazı ile yeni abonelik formunuzu kolayca oluşturabilirsiniz.

Neden MailChimp?

İşte MailChimp kullanmanız için birkaç neden:

  • MailChimp 2000 aboneye kadar tamamen ücretsiz.
  • Kullanımı kolaydır; sürükle bırak tarzında şablonları ve e-posta oluşturucusu vardır.
  • Farklı kullanımlar için birden fazla liste oluşturabilirsiniz.
  • Ücretsiz plan, listenizi yönetmeyi çok daha kolay hale getiren otomasyonları içerir
  • MailChimp için birçok çevrimiçi kaynak ve öğretici bulunur.
  • e-ticaret entegrasyonu ve daha fazlası için büyük listelere sahip ileri düzey kullanıcılar için çeşitli avantajlara sahiptir.

Blogger’a MailChimp Abonelik Formu Ekleme

Blogger bloğunuza bir MailChimp formu eklemek için aşağıdaki adım adım anlattığım talimatları izleyin.

1. Adım- MailChimp Hesabı Açma

  • Öncelikle ücretsiz bir MailChimp hesabı oluşturmak için buraya tıklayın. Ardından Sign Up Free butonuna tıklayın.
  • Açılan forma E-posta adresinizi, kullanıcı adınızı ve parolanızı girdikten sonra Sign Up (Kaydol) butonuna basın. Bu işlemin ardından mail adresinizi doğrulamanız için bir e-posta alacaksınız.
  • Yönlendirme koduna tıkladığınızda ücretli ve ücretsiz hesap seçeneklerinin olduğu bir sayfa sizi karşılayacak. Siz ücretsiz olanı seçip devam edin.
  • Yeni sayfada İsminizi,  bloğunuzun ismini ve linkini, adresinizi ve genel bilgileri içeren birkaç soruyu yanıtlayarak hesap kurulumunu tamamlayın.

2. Adım- Form Oluşturma

Kurulum tamamlandıktan sonra, kayıt formu oluşturmak için bir abone listesi gerekecek. Neyse ki, ilk listenizi MailChimp sizin için otomatik olarak oluşturuyor. Şimdi aşağıdaki maddeleri tek tek takip ederek formunuzu oluşturabilirsiniz.

  • Üst menüdeki Audience bağlantısına tıklayın.
  • Açılan sayfada View Contacts bağlantısına tıklayarak abone listenize geçiş yapın.

MailChimp

  • Abone listenizi yöneteceğiniz sayfaya geçiş yaptığınızda üst kısımda setting bağlantısını göreceksiniz. Buradaki bağlantılara tek tek tıklayarak form ayarlarınızı dilediğiniz gibi yapın.

Ayarlar kısmındaki öğelerden de kısaca bahsedeyim:

  • Audience name and defaults: Bu kısımda formunuza bir ad verebilir, reCAPTCHA ekleyebilir, abonelik e-postası onayı tercihi yapabilir ve abonelikten çıkma butonu ekleme gibi çeşitli ayarlar yapabilirsiniz.
  • GDPR Fields and Settings: Burada kayıt formunuza GDPR (Genel Veri Koruma Yönetmeliği) alanları ekleyebilirsiniz.
  • Publicity settings: Burası kampanya ayarlarınızı ve tercihlerinizi düzenleyeceğiniz kısım.
  • Audience fields and *|MERGE|* tags: Bu kısımda formunuzdaki etiketleri düzenleyebilir, İngilizce kısımları Türkçe olarak değiştirebilir, formunuzda bulunmasını istediğiniz ve istemediğiniz kısımların tercihini yapabilirsiniz.

Kısaca ayarlar kısmı böyle. Detaylıca inceleyerek ihtiyacınız olan tüm ayarları yapabilirsiniz.

  • Tüm ayarlarınızı tamamladıktan sonra Signup forms (kayıt formları) bağlantısına tıklayın.
  • Form seçeneklerinden Embedded form (Gömülü formlar) seçeneğinin karşısındaki Seç bağlantısına tıklayın.

Not- Bu sayfada dilerseniz Pop-up form tercihi de yapabilirsiniz. Pop-Up formu seçerseniz, sonraki aşamada verilen kodları html kodları arasına <head> …. </head> kodları arasına yerleştireceksiniz.  Sabit form için ise  kenar çubuğu gayet idealdir.

Embedded Form üzerinden devam edelim. Embedded formu seçtikten sonra açılan sayfada form önizlemesi ve kodunuzu göreceksiniz. Burada kendinize göre düzenlemeler ve özelleştirmeler yapabilirsiniz.

Mailchimp Embedded Formu

Gerekli düzenlemeleri yaptıktan sonra kodu kopyalayın.

3. Adım- Blogger’a MailChimp Formu Ekleme

Son adımda MailChimp abonelik formunu blogger’a ekleyeceğiz.

  • Öncelikle Blogger kontrol paneline giriş yapın ve sol tarafta Düzen bölümüne tıklayın.
  • Formu nereye eklemek istiyorsanız oranın widget alanını bulun.
  • Gadget ekle- HTML JavaScript öğesini seçin.

Blogger Gadget Ekleme

Blogger Html Javascript

  • Javascript kutusu açıldığında içine MailChimp form kodunuzu yapıştırın ve kaydet’e tıklayın.
  • Tebrikler, ilk MailChimp kayıt formunu Blogger bloğunuza eklediniz.

Not- Daha fazla abone toplamak için kenar çubuğu, altbilgi ve açılır pencere (pop-up) gibi farklı konumlara birkaç tane abonelik formu ekleyebilirsiniz.

MailChimp Formu Özelleştirme

Varsayılan olarak gelen kayıt formları genellikle sade ve basit bir görünüme sahiptir. Eklediğiniz formu daha dikkat çekici bir hale getirmek isterseniz aşağıdaki özelleştirme yollarını uygulayabilirsiniz.

  • Blogger kontrol paneli>Tema>Özelleştir>Gelişmiş>CSS ekle yolunu izleyin.
  • Aşağıdaki kodlardan kullanmak istediklerinizi kopyalayıp css alanına yapıştırın ve kaydedin.

1. MailChimp Formuna Renkli Arka Plan Ekleme Kodu

/* Add a Colored Background */
#mc_embed_signup {
background-color: #b5ffff !important;
}

Not-  #b5ffff renk kodunu kendi tasarım renklerinize uygun bir renk kodu ile değiştirin.

2. Forma Kenarlık Ekleme

/* Add a Border */
#mc_embed_signup {
border-color: #000000;
border-width: 1px;
border-style: solid;
}

Not- Kenarlık rengini değiştirmek için #000000 kodunu farklı bir renk kodu ile değiştirebilirsiniz. Kenarlık genişliği için 1px’i 3px gibi farklı bir sayı ekleyebilirsiniz.

3. Forma Dolgu Ekleme

Renkli bir arka plan ya da kenarlık kullanıyorsanız, formun çevresine beyaz boşluk eklemek önemlidir.

Bunun için aşağıdaki kodu da css alanına ekleyin.

/* Add Padding */
#mc_embed_signup {
padding: 30px;
}

Formun çevresindeki boşluğu ayarlamak için 30px kısmını kendinize uygun bir sayıyla değiştirin.

4. Form Başlığını Özelleştirme

/* Customize Heading */
#mc_embed_signup h2 {
font-family: "Lato", sans-serif !important;
font-size: 22px !important;
font-weight: 400;
color: #000000 !important;
text-align: center;
line-height: 1.3;
letter-spacing: 1px;
margin-bottom: 20px !important;
}

Başlığı zevkinize göre düzenleyebilmeniz için çeşitli seçenekler ekledim. Bunları dilediğiniz gibi özelleştirebilirsiniz.

  • font-family: Bu seçenek yazı tipini belirler. Web uyumlu başka bir yazı tipi ile değiştirebilirsiniz.
  • font-size: Buradan başlık boyutunu ayarlayabilirsiniz. 22px yerine size uygun bir değer girin.
  • font-weight: Yazı ağırlığını normal, kalın vb. olarak ayarlamak için “400”ü değiştirebilirsiniz. (400 normal ağırlıktır)
  • Color: Başlık rengini ayarlamak için #000000 değerini başka bir renk kodu ile değiştirin.
  • text-align: Başlığı sola ya da sağa yaslamak isterseniz “center” değerini left veya right olarak değiştirin.
  • line-height: Satır yüksekliğini ayarlayabilirsiniz. 1.2, 1.3, 1.4, 1.5 vb. gibi 0,1’lik artışlarla artırın veya azaltın.
  • letter-spacing: Başlıktaki her harf arasındaki boşluğu temsil eder.
  • margin-bottom: Başlığın altındaki boşluk değeri. Bunu kendinize göre değiştirebilirsiniz.

5. Abone Ol Düğmesini Özelleştirme Kodu

/* Customize Button */
#mc_embed_signup #mc-embedded-subscribe {
background-color: #000000 !important;
color: #ffffff !important;
font-family: "Lato", sans-serif !important;
font-size: 14px !important;
letter-spacing:1px;
font-weight: 700;
border-radius: 0 !important;
height: 50px !important;
line-height: 50px !important;
}

Açıklama

  • background-color: Düğmenin arka plan rengi için #000000 değerini değiştirin.
  • color: Düğme metninin rengini değiştirmek için #ffffff değerini değiştirin.
  • font-family: Yazı tipini buradan değiştirin.
  • font-size: Düğme metninin boyutu.
  • letter-spacing: Harfler arasındaki boşluk.
  • font-weight: Metnin kalınlığı.
  • border-radius: Düğme köşelerinin yuvarlaklığı. “0” köşeleri sivrilterek kare yapar.
  • height ve line-height: Düğmenin yüksekliğini ayarlar.  # değerlerinin eşit olduğundan emin olun.

6. Abone Ol Butonunu Ortalama Kodu

/* Center Button */
#mc_embed_signup #mc-embedded-subscribe {
display: block;
margin-right: auto;
margin-left: auto;
}

Not- Abonel Ol butonunu yukarıdaki kodla ortalayamazsanız, “margin-right ve margin-left” auto değerlerini 25% olarak değiştirerek deneyin.

Bu kodlarla basitçe düzenlediğim formun öncesi ve sonrası görselini aşağı bırakıyorum, ancak unutmayın, bu sadece basit bir örnek form. CSS bilginiz varsa çok daha şık tasarımlar yaratabilirsiniz.

Mailchimp Abone Formu Özelleştirme

MailChimp, diğer platformlar gibi Blogger için de kullanabileceğiniz harika bir ücretsiz mail aracıdır. Umuyorum bu yazı, Blogger’a MailChimp formu ekleme konusunda size yardımcı olmuştur. Konuyla ilgili düşüncelerinizi, öneri veya sorularınızı yorum kısmından iletebilirsiniz.