如何向 Blogger 添加电子邮件订阅弹出窗口（通过 Mailchimp）

已发表: 2022-04-20

您想从您的网站访问者那里收集电子邮件并将个性化消息直接发送到他们的收件箱吗？好吧，请按照此分步教程了解如何执行此操作。

电子邮件营销是与受众建立联系、获得更多网站流量以及向受众推销产品和服务的最有效方式之一。

因此，为此，您需要Mailchimp 、 convertkit等电子邮件营销工具以及将您的网站连接到这些工具的电子邮件注册表单。您可以使用注册表单或订阅弹出窗口来访问您的网站。

订阅弹出窗口比传统的注册表单更有效，因为它通过在屏幕上弹出来吸引用户的注意力。用户可以通过在字段中提供他们的姓名和电子邮件地址来轻松加入您的电子邮件列表。

之后，电子邮件地址将被添加到您的电子邮件营销工具中，然后您可以向订阅者发送定制的电子邮件，并向他们提供有关您的新帖子或产品的更新。

如果您想通过电子邮件进行联属网络营销，那么您还可以考虑使用电子邮件自动回复器，您可以在其中自动化不同的流程并产生更好的结果。

好的，让我们看看如何将电子邮件订阅弹出窗口添加到您的 Blogger 网站并将其与您的 Mailchimp 帐户集成。

在 Blogger 中添加电子邮件订阅弹出窗口的步骤

要在 Blogger 中添加电子邮件订阅弹出窗口，请按照以下步骤操作。

转到您的 Blogger 仪表板，然后单击主题部分。
现在单击编辑 HTML 部分并找到 </body> 标记。
然后将给定的代码粘贴在上面并替换上面的 Mailchimp 表单操作链接。
现在保存代码并将电子邮件订阅弹出窗口添加到您的 Blogger 网站。

 <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 { 宽度：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 {填充：5px 10px；字体粗细：粗体；背景颜色：白色；}
.response {字体粗细：600；颜色：黑色；边距：-5px 0 5px 0;}
  </style>

<!-- 电子邮件订阅弹出窗口-->
<div class='电子邮件订阅覆盖'>
<button class='email-close-btn'>&#215;</button>
<div class='电子邮件订阅容器'>
<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 类='文本内容'>
<h2> 订阅</h2>
<p> 用于最新 SEO 更新的 Techyleaf </p>

<div 类='容器'>
<div>
<表单动作=' # '类='验证'方法='发布'名称='mc-embedded-subscribe-form'目标='_blank'>
<div><div class='mc-field-group'><input class='email-input-field required email' name='EMAIL' placeholder='Your Email Address' type='email' value=''/ ></div>
<div class='clear'><div class='response'/><div class='response'/>
</div><!-- 真实的人不应该填写这个并期待好东西 - 不要删除这个或冒着风险形成机器人注册-->
<div aria-hidden='true'><input name='b_ac52e8b1ce2a06907e0091d7c_63bf572981' tabindex='-1' type='text' value=''/></div>
<div class='clear'><input class='email-submit-btn subscribe' 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>

  <脚本>
    const emailSubscriptionOverlay = document.querySelector(".email-subscription-overlay");
const emailCloseButton = document.querySelector(".email-close-btn");

设置超时(() =&gt; {
    if (!localStorage.getItem(&#39;popupClosed&#39;)) {
        emailSubscriptionOverlay.classList.add("active");
        localStorage.setItem(&#39;popupClosed&#39;, &#39;true&#39;);
    }
}, 3000);

emailCloseButton.addEventListener("点击", () =&gt; {
    emailSubscriptionOverlay.classList.remove(“活动”);
});
  </脚本>

如何将 Mailchimp 与弹出表单集成？

您需要使用您的 Mailchimp URL 更改表单操作链接（替换# ）。（即 <form action='#' class='validate'）。

要获得此链接，您需要使用 MailChimp 帐户注册一个免费帐户并在那里创建一个注册表单。之后，您需要从该代码中提取表单操作链接。按照视频教程逐步检查。

如何自定义弹出式注册表单？

如果您使用的是Median UI 或 Fletro pro主题等主题，则它可能无法在移动设备上正常工作。为此，您需要在 CSS 代码中调整 Popup 宽度。

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

找到此代码并将容器宽度从75%更改为85% ，如下所示。

您还需要更改上述代码中使用的h2和段落标签（上面突出显示）。只需根据您的网站更改文本即可。

我还在视频教程中展示了如何更改弹出窗口显示的持续时间。默认情况下，它设置为 3 秒。因此，弹出窗口将在页面加载 3 秒后加载。

如果要更改图像，只需搜索 email-signup-form-Image，然后更改图像的源 URL (src)。首先，将图片上传到您的 Blogger 网站，然后通过右键单击图片获取图片 URL。

您还可以在此处查看将 Mailchimp 与 Blogger 集成的其他方法。

结论

我希望您已成功将 Popup 注册表单添加到您的 Blogger 网站并集成 Mailchimp 以收集访问者的电子邮件地址。

如果您仍有任何疑问，请随时在评论部分问我。