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

.enve{background:#00aa9f;color:#fff;width:50px;height:50px;display:block!important;line-height:50px!important;text-align:center;font-size:24px!important;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;margin:0 auto}.newsletter-sm{background:#fff;width:100%;margin:0;padding:20px;box-sizing: border-box;}.newsletter-sm h3,.newsletter-sm p{color:#555;font-family:"Maven Pro",sans-serif}.newsletter-sm h3{font-weight:400;text-align:center;margin-bottom:10px;font-size:24px}.newsletter-sm p{font-size:14px;line-height:20px}.newsletter-sm .newsletter-input-sm{border:0;box-sizing: border-box;padding:5px 10px;width:360px;float:left;height:40px;color:#555;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.newsletter-sm .newsletter-sm-bot{background:#00aa9f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFfTXliSjpUFscUpEr3klvRdSVPSv1mwzs0CRqJ8wSNOSeMs04iMdOeAgH3gMfjXr1W9sRdRDxbuAd9SGi_JufwrS-blB5b2wd3aVdws7GUfy6AKiy8csBGC518HyPx6Ep_6EpJbtz7tA/s1600/bg.png) no-repeat;box-sizing: border-box;padding:20px;margin:0 -20px -20px;height:80px}.newsletter-sm .newsletter-button-sm{float:right;height:40px;display:inline-block;font-size:14px;box-sizing: border-box;padding:5px 10px;position:relative;color:#fff;text-align:center;background:#00aa9f;border:1px solid #fff;cursor:pointer;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}.modalDialog{position:fixed;font-family:Arial,Helvetica,sans-serif;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.6);z-index:99999;opacity:0;-webkit-transition:opacity 200ms ease-in;-moz-transition:opacity 200ms ease-in;transition:opacity 200ms ease-in;pointer-events:none}.modalDialog:target{opacity:1;pointer-events:auto}.modalDialog:target>div{margin:8% auto}.modalDialog>div{-webkit-transition:all 100ms ease-in;-moz-transition:all 100ms ease-in;transition:all 100ms ease-in;width:500px;position:relative;margin:5% auto;background:#fff;min-height:200px}h2.signup{background:#00aa9f;border-bottom:1px solid #008d84;font-weight:400;text-align:center;box-sizing: border-box;padding:10px;color:#fff;font-size:18px}.close{color:#888;position:absolute;top:1px;right:1px;width:30px;height:30px;line-height:30px;text-align:center;font-size:16px}.close:hover{text-decoration:none;color:#555}
#likebutton {
    text-decoration: none;
    position: relative;
    float: left;
    display: inline-block;
    width: 47px;
    height: 45px;
    z-index: 20;
    color: #f2f2f2;
    font-size: 24px;
    line-height: 42px;
    cursor: pointer;
    margin: -1px 16px;
    padding: 0;
    transition: color .3s;
    background: rgba(0,0,0,0.2);
    text-align: center;
    border-radius: 0px;    border-radius: 4px;
}
#likebutton:hover {opacity: 0.7;}

ثم نبحث عن /body و نلصق الكود التالي فوقه

<div class='modalDialog' id='signup'>
<div><a class='close' href='#close' title='Close'><i class='fa fa-times'/></a>
<div class='signup-container'>
<div class='newsletter-sm'>
<i class='fa fa-envelope-o enve'/>
<h3>الأشتراك بالقائمة البريدية</h3>
<p style='text-align:center'>أشترك برسائل المدونة الألكترونية ليصلك جديد مدونتنا.</p>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=*********&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<div class='newsletter-sm-bot'>
<input class='newsletter-input-sm' name='email' placeholder='Enter Your Email' type='text'/>
<button class='newsletter-button-sm' type='submit'>Subscribe</button></div>
<input name='uri' type='hidden' value='*********'/>
</form></div></div></div></div>

و اخيرا هذا الكود مسؤل عن ظهور الزر
يمكنك لصقه في المكان اللذي تراه مناسب

<span style='text-align:center; display:block;margin: 0% 0;'><a href='#signup' id='likebutton'>الأشتراك</a></span>

ملاحظة

قم بتغير رابط الخلاصة الموجود ستجده بهذا الشكل ********* برابط الخلاصة الخاص بك
 و هو موجود مرتين