اضافة الاشتراك في النشرة البريدية منبثقة بشكل جديد للبلوجر

تقييمك للموضوع : التعليقات : 2 الكاتب : seb issam 3:06 ص blogger للإبلاغ عن رابط معطوب اضغط هنا

احصل على هذة الاداة من هنا

السلام عليكم ورحمة

الله وبركاته

--

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

لكن هذه المرة منبثقة popup وبتصميم انيق

• معاينة

--------------------------

طريقة التركيب:

1. توجه الى القالب ثم تحرير html
2. ابحث عن الوسم ]]></b:skin> وضع الكود التالي  فوقه مباشرة

@font-face {
font-family: "DroidKufi-regular";
font-style: normal;
font-weight: 400;
src: url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.eot?#iefix") format("embedded-opentype"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff2") format("x-woff2"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.woff") format("woff"), url("//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Regular.ttf") format("truetype");
}
@font-face {
font-family: 'DroidKufi-Bold';
font-style: normal;
font-weight: 700;
src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot);
src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),
url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff2) format('x-woff2'),
url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff) format('woff'),
url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.ttf) format('truetype');
}
/***** Smart PopUp Email Subscription Form CSS IPEE World *****/
#popup-wrap .popup-button { background: #378E5E  url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaiISWTpesoH7Zui3n0qsJ1EIcfQ9oQCmwi_Q9jCyt24tW05c2p186K166A172n5HULNOqvh797fr5i3kLH0QU1JuHkWdfOT1nS2EvcVrYPRCtoj91FZn_iIBFvgt9xjk2dnsLK2BaHoHJ/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: #70261D; }

#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;background-color: transparent; }
#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: 380px;
    margin: auto;
    overflow: auto;
    padding: 2.5em;
    max-height: 276px;
    background: #37b06d;
    text-align: center;
    border: 4px solid #40A56D; }
#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;border-bottom: 1px solid white; font-size: 2em; font-weight: normal; margin-bottom: 20px;font-family: droidkufi-bold; }
#popup-wrap .popup-content { font-size: 16px; line-height: 26px;font-family: droidkufi-bold; }
#popup-wrap .popup-footer { font-size: 75%; font-style: italic; }
#popup-wrap #mailbox, 
#popup-wrap #subbutton { background: #378E5E;
    border: none;
    border-radius: 3px;
    box-sizing: border-box;
    color: #fff;
    font-family: droidkufi-bold;
    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: 2.1em;
    height: 2.1em;
    cursor: pointer;
    background-color: #EC141C;
    border-radius: 100px; }
#popup-wrap .popup-form-close:after,
#popup-wrap .popup-form-close:before { content: '';
    position: absolute;
    width: 5px;
    height: 1.5em;
    background: #FFFFFF;
    display: block;
    transform: rotate(45deg);
    left: 51%;
    margin: 8px 0 0 -2px;
    top: 0;
    font-size: 11px; }
#popup-wrap .popup-form-close:hover:after,
#popup-wrap .popup-form-close:hover:before { background: #fff; }
#popup-wrap .popup-form-close:before { transform: rotate(-45deg); }

1. ثم ابحث عن  </body>
2. بعدها ضع الكود التالي فوقه مباشرة

 <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-FEEDBURNER-ID&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                        <input name='uri' type='hidden' value='YOUR-FEEDBURNER-ID'/>
                        <input name='loc' type='hidden' value='Arabic'/>
<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/>
                </div>
            </div><!-- .popup-form -->
  </div><!-- .popup-bg -->
    </div><!-- #popup-wrap -->

1. لا تنسى تغيير الايدي