Blogger'a E-posta Aboneliği Açılır Penceresi Nasıl Eklenir (Mailchimp aracılığıyla)

Yayınlanan: 2022-04-20

Web Sitesi ziyaretçilerinizden E-postalar toplamak ve kişiselleştirilmiş mesajları doğrudan gelen kutularına göndermek ister misiniz? peki, bunun nasıl yapılacağı için bu adım adım öğreticiyi izleyin.

E-posta Pazarlama, hedef kitleyle bağlantı kurmanın, sitelere daha fazla trafik çekmenin ve hedef kitlenize ürün ve hizmet sunmanın en etkili yollarından biridir.

Bunun için Mailchimp , convertkit gibi e-posta pazarlama araçlarına ve web sitenizi bu araçlara bağlayacak bir e-posta kayıt formuna ihtiyacınız var. Web sitenize bir Kayıt formu veya bir abonelik açılır penceresi kullanabilirsiniz.

Abonelik açılır penceresi, ekranda belirerek kullanıcının dikkatini çektiği için geleneksel kayıt formundan daha etkilidir. Kullanıcılar, alana adlarını ve e-posta adreslerini vererek e-posta listenize kolayca katılabilir.

Bundan sonra, E-posta adresi E-posta pazarlama aracınıza eklenecek ve ardından abonelerinize özelleştirilmiş E-postalar gönderebilir ve onlara yeni yayınınız veya ürünleriniz hakkında güncellemeler verebilirsiniz.

E-posta yoluyla bağlı kuruluş pazarlaması yapmak istiyorsanız, farklı süreçleri otomatikleştirebileceğiniz ve daha iyi sonuçlar elde edebileceğiniz E-posta otomatik yanıtlayıcılarını da düşünebilirsiniz.

tamam, şimdi Blogger web sitenize bir E-posta aboneliği açılır penceresini nasıl ekleyebileceğinizi ve bunu Mailchimp hesabınızla nasıl entegre edebileceğinizi kontrol edelim.

Blogger'da E-posta Aboneliği Açılır Penceresi Ekleme Adımları

Blogger'da bir E-posta aboneliği açılır penceresi eklemek için aşağıdaki adımları izleyin.

Blogger kontrol panelinize gidin ve tema bölümüne tıklayın.
Şimdi HTML Düzenle bölümüne tıklayın ve </body> etiketini bulun.
Ardından verilen kodu üstüne yapıştırın ve üzerindeki Mailchimp form eylem bağlantısını değiştirin.
Şimdi kodu kaydedin ve E-posta aboneliği açılır penceresi Blogger web sitenize eklenir.

 <style> .email-subscription-overlay {display: flex;align-items: center;justify-content: center;position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0, 0, 0, 0);z-index: -100;transition: all 400ms;} .email-subscription-overlay.active {background: rgba(0, 0, 0, 0.9);z-index: 200;} .email-subscription-container {background: #fff;padding: 32px;text-align: center;display: flex;box-shadow: 0 2px 12px 3px rgba(0, 0, 0, 0.3);border-radius: 8px;transform: translateY(-200px);opacity: 0;transition: all 200ms;} .email-subscription-overlay.active .email-subscription-container {transform: translateY(0);opacity: 1;} .email-subscription-container form {display: flex;flex-direction: column;margin-top: 32px;} .email-subscription-overlay .email-close-btn {top: 24px;right: 24px;position: fixed;font-size: 50px;font-weight: 600;color:#eee;background: none;border: none;cursor: pointer;pointer-events: none;transition: all 400ms;opacity: 0;} .email-subscription-overlay.active .email-close-btn {opacity: 1;pointer-events: auto;} .email-subscription-container img {width: 300px;object-fit: contain;} .email-subscription-container h2 {font-size: 35px;text-transform: uppercase;margin-bottom: 15px;margin-top: 12px;color: #0a0908;} .email-subscription-container p {margin-top: 10px;font-weight: bold;color: #1d3557;font-size:16px;} .email-subscription-container .text-content {padding: 48px;} .email-subscription-container form .email-input-field {margin-bottom: 16px;padding: 12px 24px;font-size: 16px;border: 1px solid #777;} .email-subscription-container form .email-submit-btn {background: #f50057;border: none;font-weight: 600;font-size: 20px;color: #fff;padding: 10px 60px; cursor: pointer;text-transform: uppercase;transition: all 400ms;} .email-subscription-container form .email-submit-btn:hover {background: #069b7a;} @media (max-width: 800px) {.email-subscription-container {flex-direction: column;width: 400px;align-items: center;}.email-subscription-container .text-content {padding: 0;width: 100%;}} @media (max-width: 500px) {.email-subscription-container { genişlik: %75; }}

#mc_embed_signup div.mce_inline_error {margin: 0 0 1em 0;z-index: 1;color: #000;}
#mc_embed_signup div.mce_inline_error {padding: 5px 10px;font-weight: bold;background-color: white;}
.response {yazı tipi ağırlığı: 600;renk: siyah;kenar boşluğu: -5px 0 5px 0;}
  </style>

<!-- E-posta Aboneliği Açılır Penceresi-->
<div class='email-subscription-overlay'>
<button class='email-close-btn'>&#215;</button>
<div class='email-subscription-container'>
<img alt='email-signup-form-Image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9TPAOsLb2-sDqk1TUCfkg_Qj2vnK9KnDPPEd94_TKlHtTw6iVhMMwIG7NjdQYseYXG4cCsdNKhkM7zEEe9qwrORpFvQ54cgqDViw7SSXEVFraofdZItMXStgo_2z_LJCXEebwopU0Pf7FWPAlaBkuxjibbvn8zmTLZZ9X81LYFsqUZU4eIjSs6MHJFw/s1600/undraw_Opened_re_i38e%20%281%29.png'/>

<div class='metin içeriği'>
<h2> Abone olmak </h2>
<p> En Son SEO Güncellemeleri için Techyleaf </p>

<div class='konteyner'>
<div>
<form eylemi=' # ' class='validate' method='post' name='mc-embedded-subscribe-form' target='_blank'>
<div><div class='mc-field-group'><input class='email-input-field gerekli e-posta' name='EMAIL' placeholder='E-posta Adresiniz' type='email' value=''/ ></div>
<div class='clear'><div class='response'/><div class='response'/>
</div><!-- gerçek insanlar bunu doldurmamalı ve iyi şeyler beklememelidir - bot kayıtlarını veya risk formunu kaldırmayın-->
<div aria-hidden='true'><input name='b_ac52e8b1ce2a06907e0091d7c_63bf572981' tabindex='-1' type='text' value=''/></div>
<div class='clear'><input class='email-submit-btn abone' name='subscribe' type='submit' value='Subscribe'/></div>
</div></form></div>
<script src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js' type='text/javascript'/><script type='text/javascript'>(function($ ) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]=&#39;EMAIL&#39;;ftypes[0]=&#39;email&#39;;fnames[ 1]=&#39;NAME&#39;;ftypes[1]=&#39;text&#39;;}(jQuery));var $mcj = jQuery.noConflict(true);</script>
</div></div></div></div>

  <script>
    const emailSubscriptionOverlay = document.querySelector(&quot;.email-subscription-overlay&quot;);
const emailCloseButton = document.querySelector(&quot;.email-close-btn&quot;);

setTimeout(() =&gt; {
    if (!localStorage.getItem(&#39;popupClosed&#39;)) {
        emailSubscriptionOverlay.classList.add(&quot;etkin&quot;);
        localStorage.setItem(&#39;popupClosed&#39;, &#39;true&#39;);
    }
}, 3000);

emailCloseButton.addEventListener(&quot;tıkla&quot;, () =&gt; {
    emailSubscriptionOverlay.classList.remove(&quot;etkin&quot;);
});
  </script>

Mailchimp'i Popup formuna nasıl entegre edebilirim?

Form eylem bağlantısını ( # yerine değiştirin) Mailchimp URL'nizle değiştirmeniz gerekir. (yani <form action='#' class='validate').

Bu bağlantıyı almak için bir MailChimp hesabıyla ücretsiz bir hesap açmanız ve orada bir kayıt formu oluşturmanız gerekir. Bundan sonra, form eylemi bağlantısını bu koddan çıkarmanız gerekir. Adım adım kontrol etmek için video eğitimini izleyin.

Popup Kayıt formu nasıl özelleştirilir?

Median UI veya Fletro pro teması gibi Temalar kullanıyorsanız, mobil cihazlarda düzgün çalışmayabilir. Bunun için CSS kodundaki Popup genişliğini ayarlamanız gerekir.

 @media (max-width: 500px) {.email-subscription-container {width: 75%;}}

Bu kodu bulun ve kap genişliğini bu şekilde %75'ten % 85'e değiştirin.

Ayrıca yukarıdaki kodda kullanılan h2 ve paragraf etiketini (Yukarıda vurgulanmıştır) değiştirmeniz gerekir. Sadece metni web sitenize göre değiştirin.

Ayrıca video eğitiminde pop-up gösterilen sürenin nasıl değiştirileceğini de gösterdim. Varsayılan olarak, 3 saniyeye ayarlanmıştır. Böylece, açılır pencere 3 saniyelik sayfa yüklendikten sonra yüklenecektir.

Resmi değiştirmek istiyorsanız, sadece email-signup-form-Image için arama yapın ve ardından resmin Kaynak URL'sini (src) değiştirin. Önce resmi Blogger web sitenize yükleyin ve ardından resme sağ tıklayarak resim URL'sini alın.

Mailchimp'i Blogger ile entegre etmenin alternatif yollarını da buradan inceleyebilirsiniz.

Çözüm

Umarım Popup kayıt formunu Blogger web sitenize başarıyla eklemişsinizdir ve ziyaretçilerinizin e-posta adreslerini toplamak için Mailchimp'i entegre etmişsinizdir.

Hala herhangi bir şüpheniz varsa, yorum bölümünde bana sormaktan çekinmeyin.