كيفية إضافة نافذة منبثقة لاشتراك البريد الإلكتروني إلى 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 {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 للحصول على آخر تحديثات تحسين محركات البحث </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 = 'عنوان بريدك الإلكتروني' 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؛ {
    إذا (! localStorage.getItem (& # 39 ؛ popupClosed & # 39 ؛)) {
        emailSubscriptionOverlay.classList.add (& quot؛ نشط & quot؛) ؛
        localStorage.setItem (& # 39 ؛ popup مغلق & # 39 ؛، & # 39 ؛ true & # 39 ؛) ؛
    }
} ، 3000) ؛

emailCloseButton.addEventListener (& quot؛ click & quot ؛، () = & gt؛ {
    emailSubscriptionOverlay.classList.remove (& quot؛ نشط & quot؛) ؛
}) ؛
  </script>

كيفية دمج Mailchimp مع النموذج المنبثق؟

تحتاج إلى تغيير رابط إجراء النموذج (استبدل # ) بعنوان URL الخاص بـ Mailchimp. (على سبيل المثال ، <form action = '#' class = 'validate').

للحصول على هذا الرابط ، تحتاج إلى التسجيل للحصول على حساب مجاني باستخدام حساب MailChimp وإنشاء نموذج تسجيل هناك. بعد ذلك ، تحتاج إلى استخراج رابط إجراء النموذج من هذا الرمز. اتبع الفيديو التعليمي للتحقق من ذلك خطوة بخطوة.

كيفية تخصيص نموذج التسجيل المنبثق؟

إذا كنت تستخدم سمات مثل Median UI أو Fletro pro theme ، فقد لا تعمل بشكل صحيح على الأجهزة المحمولة. تحتاج إلى ضبط عرض النوافذ المنبثقة في كود CSS من أجل ذلك.

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

ابحث عن هذا الرمز وقم بتغيير عرض الحاوية من 75٪ إلى 85٪ مثل هذا.

تحتاج أيضًا إلى تغيير علامة h2 وعلامة الفقرة (المميزة أعلاه) المستخدمة في الكود أعلاه. فقط قم بتغيير النص وفقًا لموقع الويب الخاص بك.

لقد أوضحت أيضًا كيفية تغيير المدة المنبثقة المعروضة في فيديو تعليمي. افتراضيًا ، يتم ضبطه على 3 ثوانٍ. لذلك ، سيتم تحميل النافذة المنبثقة بعد 3 ثوانٍ من تحميل الصفحة.

إذا كنت ترغب في تغيير الصورة ، فما عليك سوى البحث عن صورة نموذج الاشتراك بالبريد الإلكتروني ثم تغيير عنوان URL المصدر (src) الخاص بالصورة. أولاً ، قم بتحميل الصورة إلى موقع الويب الخاص بك على Blogger ، ثم احصل على عنوان URL للصورة عن طريق النقر بزر الماوس الأيمن على الصورة.

يمكنك أيضًا التحقق من الطرق البديلة لدمج Mailchimp مع Blogger هنا.

استنتاج

آمل أن تكون قد نجحت في إضافة نموذج الاشتراك المنبثق إلى موقع Blogger على الويب الخاص بك ودمج Mailchimp لجمع عناوين البريد الإلكتروني للزائرين.

إذا كنت لا تزال لديك أي شكوك ، فلا تتردد في سؤالي في قسم التعليقات.