• 主頁
  • 文章
  • 指導
  • 如何向 Blogger 添加電子郵件訂閱彈出窗口（通過 Mailchimp）

如何向 Blogger 添加電子郵件訂閱彈出窗口（通過 Mailchimp）

已發表: 2022-04-20

您想從您的網站訪問者那裡收集電子郵件並將個性化消息直接發送到他們的收件箱嗎？ 好吧，請按照此分步教程了解如何執行此操作。

電子郵件營銷是與受眾建立聯繫、獲得更多網站流量以及向受眾推銷產品和服務的最有效方式之一。

因此，為此，您需要Mailchimp 、 convertkit等電子郵件營銷工具以及將您的網站連接到這些工具的電子郵件註冊表單。 您可以使用註冊表單或訂閱彈出窗口來訪問您的網站。

訂閱彈出窗口比傳統的註冊表單更有效，因為它通過在屏幕上彈出來吸引用戶的注意力。 用戶可以通過在字段中提供他們的姓名和電子郵件地址來輕鬆加入您的電子郵件列表。

之後，電子郵件地址將被添加到您的電子郵件營銷工具中，然後您可以向訂閱者發送定制的電子郵件，並向他們提供有關您的新帖子或產品的更新。

如果您想通過電子郵件進行聯屬網絡營銷，那麼您還可以考慮使用電子郵件自動回复器，您可以在其中自動化不同的流程並產生更好的結果。

好的，讓我們看看如何將電子郵件訂閱彈出窗口添加到您的 Blogger 網站並將其與您的 Mailchimp 帳戶集成。

在 Blogger 中添加電子郵件訂閱彈出窗口的步驟

要在 Blogger 中添加電子郵件訂閱彈出窗口，請按照以下步驟操作。

  1. 轉到您的 Blogger 儀表板，然後單擊主題部分。
  2. 現在單擊編輯 HTML 部分並找到 </body> 標記。
  3. 然後將給定的代碼粘貼在上面並替換上面的 Mailchimp 表單操作鏈接。
  4. 現在保存代碼並將電子郵件訂閱彈出窗口添加到您的 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_LJCXEebwo​​pU0Pf7FWPAlaBkuxjibbvn8zmTLZZ9X81LYFsqUZU4eIjSs6MHJFw/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 帳戶註冊一個免費帳戶並在那裡創建一個註冊表單。 之後，您需要從該代碼中提取表單操作鏈接。 按照視頻教程逐步檢查。

Youtube 視頻

如何自定義彈出式註冊表單？

如果您使用的是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 以收集訪問者的電子郵件地址。

如果您仍有任何疑問，請隨時在評論部分問我。