วิธีเพิ่มป๊อปอัปการสมัครอีเมลใน Blogger (ผ่าน Mailchimp)

เผยแพร่แล้ว: 2022-04-20

คุณต้องการรวบรวมอีเมลจากผู้เยี่ยมชมเว็บไซต์ของคุณและส่งข้อความส่วนตัวไปยังกล่องจดหมายของพวกเขาโดยตรงหรือไม่? ทำตามบทช่วยสอนทีละขั้นตอนนี้สำหรับวิธีการทำเช่นนี้

การตลาดผ่านอีเมลเป็นวิธีที่มีประสิทธิภาพมากที่สุดวิธีหนึ่งในการเชื่อมต่อกับผู้ชม เพิ่มปริมาณการเข้าชมเว็บไซต์ และนำเสนอผลิตภัณฑ์และบริการแก่ผู้ชมของคุณ

ดังนั้น สำหรับสิ่งนี้ คุณต้องมีเครื่องมือทางการตลาดผ่านอีเมล เช่น Mailchimp , convertkit และแบบฟอร์มสมัครอีเมลที่จะเชื่อมต่อเว็บไซต์ของคุณกับเครื่องมือเหล่านี้ คุณสามารถใช้แบบฟอร์มลงทะเบียนหรือป๊อปอัปการสมัครสมาชิกในเว็บไซต์ของคุณ

ป๊อปอัปการสมัครรับข้อมูลมีประสิทธิภาพมากกว่าแบบฟอร์มลงทะเบียนแบบเดิม เนื่องจากจะดึงความสนใจของผู้ใช้โดยการปรากฏขึ้นบนหน้าจอ ผู้ใช้สามารถเข้าร่วมรายชื่ออีเมลของคุณได้อย่างง่ายดายโดยระบุชื่อและที่อยู่อีเมลในช่อง

หลังจากนั้น ที่อยู่อีเมลจะถูกเพิ่มลงในเครื่องมือการตลาดผ่านอีเมลของคุณ จากนั้นคุณสามารถส่งอีเมลที่กำหนดเองไปยังสมาชิกของคุณและให้ข้อมูลอัปเดตเกี่ยวกับโพสต์หรือผลิตภัณฑ์ใหม่ของคุณ

หากคุณต้องการทำการตลาดแบบแอฟฟิลิเอตผ่านอีเมล คุณสามารถพิจารณาระบบตอบกลับอัตโนมัติของอีเมล ซึ่งคุณสามารถทำให้กระบวนการต่างๆ เป็นไปโดยอัตโนมัติ และสร้างผลลัพธ์ที่ดีขึ้นได้

ตกลง มาดูกันว่าคุณสามารถเพิ่มป๊อปอัปการสมัครอีเมลในเว็บไซต์บล็อกเกอร์ของคุณและรวมเข้ากับบัญชี 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-index: 1;สี: #000;}
#mc_embed_signup div.mce_inline_error {padding: 5px 10px;font-weight: bold;background-color: white;}
.response {font-weight: 600;color: black;margin: -5px 0 5px 0;}
  </style>

<!-- ป๊อปอัปการสมัครอีเมล-->
<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='text-content'>
<h2> ติดตาม </h2>
<p> Techyleaf สำหรับการอัพเดท SEO ล่าสุด </p>

<div class='container'>
<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='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'>(ฟังก์ชัน($) ) {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;active&quot;);
        localStorage.setItem(&#39;popupClosed&#39;, &#39;true&#39;);
    }
}, 3000);

emailCloseButton.addEventListener(&quot;คลิก&quot;, () =&gt; {
    emailSubscriptionOverlay.classList.remove(&quot;active&quot;);
});
  </script>

จะรวม Mailchimp กับแบบฟอร์มป๊อปอัปได้อย่างไร

คุณต้องเปลี่ยน ลิงก์การดำเนินการของแบบฟอร์ม (แทนที่ # ) ด้วย Mailchimp URL ของคุณ (เช่น <form action='#' class='validate')

ในการรับลิงก์นี้ คุณต้องสมัครใช้งานบัญชีฟรีด้วยบัญชี MailChimp และสร้างแบบฟอร์มลงทะเบียนที่นั่น หลังจากนั้น คุณต้องแยกลิงก์การดำเนินการของแบบฟอร์มออกจากโค้ดนั้น ทำตาม วิดีโอสอน เพื่อตรวจสอบทีละขั้นตอน

วิดีโอ YouTube

จะปรับแต่งแบบฟอร์มลงทะเบียนป๊อปอัปได้อย่างไร?

หากคุณกำลังใช้ธีม เช่น Median UI หรือธีม Fletro pro ธีมนั้นอาจทำงานไม่ถูกต้องบนอุปกรณ์มือถือ คุณต้องปรับความกว้างของป๊อปอัปในโค้ด CSS สำหรับสิ่งนั้น

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

ค้นหารหัสนี้ และเปลี่ยนความกว้างของคอนเทนเนอร์จาก 75% เป็น 85% เช่นนี้

คุณต้องเปลี่ยนแท็ก h2 และ ย่อหน้า (เน้นที่ด้านบน) ที่ใช้ในโค้ดด้านบน เพียงเปลี่ยนข้อความตามเว็บไซต์ของคุณ

ฉันยังแสดงวิธีเปลี่ยนระยะเวลาที่แสดงป๊อปอัปในวิดีโอสอนด้วย โดยค่าเริ่มต้น จะถูกตั้งค่าเป็น 3 วินาที ดังนั้นป๊อปอัปจะโหลดหลังจากโหลดหน้า 3 วินาที

หากคุณต้องการเปลี่ยนรูปภาพ ให้ค้นหาอีเมลสมัครแบบฟอร์มรูปภาพ จากนั้นเปลี่ยน URL แหล่งที่มา (src) ของรูปภาพ ขั้นแรก อัปโหลดรูปภาพไปยังเว็บไซต์ Blogger ของคุณ จากนั้นรับ URL รูปภาพโดยคลิกขวาที่รูปภาพ

คุณยังสามารถตรวจสอบวิธีอื่นในการรวม Mailchimp กับ Blogger ได้ที่นี่

บทสรุป

ฉันหวังว่าคุณจะเพิ่มแบบฟอร์มลงทะเบียนป๊อปอัปในเว็บไซต์ Blogger ของคุณสำเร็จและรวม Mailchimp ไว้เพื่อรวบรวมที่อยู่อีเมลของผู้เยี่ยมชมของคุณ

หากคุณยังมีข้อสงสัยโปรดถามฉันในส่วนความคิดเห็น