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 {여백: 0 0 1em 0;z-색인: 1;색상: #000;}
#mc_embed_signup div.mce_inline_error {padding: 5px 10px;font-weight: bold;background-color: white;}
.response {글꼴 두께: 600;색상: 검정;여백: -5px 0 5px 0;}
  </스타일>

<!-- 이메일 구독 팝업-->
<div class='이메일 구독 오버레이'>
<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 클래스='텍스트 내용'>
<h2> 구독하다 </h2>
<p> 최신 SEO 업데이트를 위한 Techyleaf </p>

<div 클래스='컨테이너'>
<div>
<폼 액션=' # ' class='validate' method='post' name='mc-embedded-subscribe-form' target='_blank'>
<div><div class='mc-field-group'><input class='email-input-field required email' name='EMAIL' placeholder='귀하의 이메일 주소' type='email' 값=''/ ></div>
<div class='clear'><div class='response'/><div class='response'/>
</div><!-- 실제 사람들은 이 항목을 채우고 좋은 것을 기대해서는 안 됩니다. 이 항목을 제거하거나 봇 가입을 위험에 빠뜨리지 마십시오-->
<div aria-hidden='true'><입력 이름='b_ac52e8b1ce2a06907e0091d7c_63bf572981' tabindex='-1' 유형='텍스트' 값=''/></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");

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

emailCloseButton.addEventListener(&quot;클릭&quot;, () =&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와 통합하는 다른 방법을 확인할 수도 있습니다.

결론

Blogger 웹사이트에 팝업 등록 양식을 성공적으로 추가하고 Mailchimp를 통합하여 방문자의 이메일 주소를 수집하기를 바랍니다.

여전히 의심스러운 점이 있으면 언제든지 댓글 섹션에서 저에게 질문하십시오.