أضافة نموذج البريد الألكتروني على شكل صفحة منبثقة لمدونات بلوجر

هناك الكثير من الأدوات الموجودة في الشبكة العنكبوتية الخاصة بمنصة بلوجر وهناك الكثير كذلك من الحاجيات والأدوات التي تخص الأشتراك بالبريد الألكتروني على شكل صفحة منبثقة,حيث توجد الكثير من الأدوات التي تنشر من قبل المدونين في مواقعهم الخاصة بخصوص البريد الألكتروني ولكن نحن قدمنا لك في هذه المقال صندوق اشتراك البريد الألكتروني على شكل صفحة منبثقة والذي سوف يعحبك حتمأ,

والسبب الرئيسي الذي جعلني أقوم بعمل مثل هذه المقالة هي التصميم الخاص بأداة صندوق البريد الألكتروني والذي يتميز بجمال الأداء,حيث كل أداة يتم طرحها من قبل المدونين ربما تأخذ الكثير من الوقت أثنأء تحميل الأداة وكذلك التأخر في تحميل حجم الصفحة الخاصة بالموقع وهذه يؤدي الى أنخفاض في الأداء,حيث تم تصميم هذه الأداه بواسطة ترميز أو أكواد HTML,CSS مما يعطي الأداة سرعة وأداء متميز وكذلك تأتي اداة صندوق البريد الألكتروني بتصميم بسيط وجميل ويمكنك لألقاء نظرة أو معاينة على الأداة بنفسك.

المعاينة

طريقة أضافة الأكواد داخل Css

1-في لوحة التحكم بلوجر أنتقل الى النموذج ثم تحرير HTML
2-داخل محرر HTML من لوحة المفاتيح أنقر على CTRL+F
3-أبحث عن كود ]]></b:skin>
4-أنسخ الكود التألي وقم بلصقة فوق كود ]]></b:skin>

/***** OnClick PopUp Email Subscription Form CSS *****/
#popup-wrap .popup-button { background: #A1362A url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRuB8ft-_Ec-hn1Rm-0p-nFbnK9lpHrzcuDwGmhUjLmqI1nul48xtka-ONtWvAHG9rHU2U7YtPArQ-LMI3DUxckzhzKGoxQppCeMWqf50NUwM6xILEfhEp0z770OixBpSa6DixkFrVsyhB/s1600/envelop.png") no-repeat scroll center center; border-radius: 50%; bottom: 25px; cursor: pointer; height: 80px; left: 25px; position: fixed; width: 80px; z-index: 99999; }
#popup-wrap .popup-button:hover { background-color: #f14b4b; }

#popup-wrap .popup-bg { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0, .8); transition: opacity .25s ease; z-index: 999999; }
#popup-wrap .popup-bg-close { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
#popup-wrap .popup-trigger { display: none; }
#popup-wrap .popup-trigger:checked + .popup-bg { opacity: 1; visibility: visible; }
#popup-wrap .popup-trigger:checked + .popup-bg .popup-form { top: 0; }

#popup-wrap .popup-form { transition: top .25s ease; position: absolute; top: -20%; right: 0; bottom: 0; left: 0; max-width: 400px; margin: auto; overflow: auto; padding: 2.5em; max-height: 280px; background: #f14b4b; text-align: center; }
#popup-wrap .popup-inner { color: #fff; font-size: 15px; font-family: "Century Gothic", sans-serif; font-weight: bold; line-height: normal; }
#popup-wrap .popup-title { display: block; font-size: 2em; font-weight: normal; margin-bottom: 20px; }
#popup-wrap .popup-content { font-size: 16px; line-height: 26px; }
#popup-wrap .popup-footer { font-size: 75%; font-style: italic; }
#popup-wrap #mailbox, 
#popup-wrap #subbutton { background: #A1362A; border: none; border-radius: 3px; box-sizing: border-box; color: #fff; font-family: "Century Gothic",sans-serif; font-size: 12px; font-weight: bold; line-height: 30px; padding: 10px 20px; width: 100%; }
#popup-wrap #mailbox { margin: 0 0 10px; text-transform: lowercase; }
#popup-wrap #subbutton { cursor: pointer; margin: 0; text-transform: uppercase; }
#popup-wrap #subbutton:hover { background: #70261D; }

#popup-wrap .popup-form-close { position: absolute; right: 1em; top: 1em; width: 1.1em; height: 1.1em; cursor: pointer; }
#popup-wrap .popup-form-close:after,
#popup-wrap .popup-form-close:before { content: ''; position: absolute; width: 5px; height: 1.5em; background: #A1362A; display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; }
#popup-wrap .popup-form-close:hover:after,
#popup-wrap .popup-form-close:hover:before { background: #70261D; }
#popup-wrap .popup-form-close:before { transform: rotate(-45deg); }

5-أنقر على حفظ القالب

 طريقة أضافة نموذج البريد الألكتروني داخل HTML
1-في لوحة التحكم الخاصة ببلوجر أنتقل الى القالب ثم تحرير HTML
2-داخل محرر من لوحة المفاتيح أنقر على CTRL+F حيث يؤدي الى فتح نموذج بحث في الجانب العلوي الأيمن من محرر HTML
3-أنسخ الكود التألي وقم بلصقة فوق كود <body/>

<div id='popup-wrap'>
  <!-- Subscribe Trigger -->
       <label class='popup-button' for='popup-trigger'/>

  <!-- Subscribe Content -->
  <input class='popup-trigger' id='popup-trigger' type='checkbox'/>
  <div class='popup-bg'>
            <label class='popup-bg-close' for='popup-trigger' id='popup-close'/>
            <div class='popup-form'>
                <label class='popup-form-close' for='popup-trigger' id='popup-close'/>
                <div class='popup-inner'>
                    <!-- Opt-In Subscribe -->
                    <span class='popup-title'>الاشتراك عبر البريد الإلكتروني</span>
                    <span class='popup-content'>اشترك في النشرة الإخبارية للحصول على آخر التحديثات إلى بريدك الألكتروني</span>
                    <br/><br/>
                    <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR_SUBSCRIBE_ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                        <input name='uri' type='hidden' value='YOUR_SUBSCRIBE_ID'/>
                        <input name='loc' type='hidden' value='en_US'/>
                        <input id='mailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' required='' type='text' value='أدخل بريدك الإلكتروني ...'/>
                        <input id='subbutton' title='' type='submit' value='أشترك'/>
                    </form>
                    <br/>
                    <span class='popup-footer'>عنوان بريدك الإلكتروني آمن معنا!</span>
                </div>
            </div><!-- .popup-form -->
  </div><!-- .popup-bg -->
    </div><!-- #popup-wrap -->

4-أنقر على حفظ القالب
5-في الكود أعلاه قم بالبحث عن كود YOUR_SUBSCRIBE_ID وقم بأستبدالها باسم المستخدم الخاص ب   Feedburnerالخاص بك حيث تجد كود YOUR_SUBSCRIBE_ID مرتين ,مما يعني أنك ستحل محلها اسم المستخدم الخاص بFeedburner مرتين

*ملاحطة:يمكن العثور على اسم المستخدم الخاص بFeedburner في نهاية عنوان للخلاصة على سبيل المثال,عنوان ال الخاص بي هو

http://feeds.feedburner.com/Dpofpdfd

6-الأن أحفظ النموذج الخاص بك

بعد الأنتهاء من الخطوات أعلاه أفتح المدونة الخاصة بك وسترى رمز البريد الألكتروني على الجانب الأيسر السفلي من الموقع الخاص بك والنقر فوقة سوف يتم فتتح القطعة.
لاتنسى التعليقك الخاص على الأضافة لكي أراء ردود الأفعال الخاص بكم حيث ردود الأفعال الخاص بك تعتبر قيمة بالنسبة لنا.