راسلنا من خلال النمودج التالي :

الاسم

بريد إلكتروني *

رسالة *

إعلان

آخر الأخبار

إعلان

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



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



اقدم لكم اضافة رائعة جدا للاشتراك بالمدونة عبر البريد الالكتروني
الاضافة هامة جدا تمكن الزائر بعد الاشتراك بالمدونة تمكنه من الحصول على اشعارات عبر
بريده الالكتروني بما تقوم بنشره على مدونتك
لذلك هي هامة و الاضافة منبثقة تظهر عند الضغط على الزر المخصص


معاينة الاضافة






شرح التركيب


  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى قالب >> ثم إضغط على تحرير  Edit HTML  
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب

نبحث عن ]]b:skin و نلصق الكود التالي فوقه


.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://4.bp.blogspot.com/-0mBblowuHEI/VKnxGxyRmUI/AAAAAAAAHiU/ewwqQBE8VE0/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>


ملاحظة

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






و شكرا








hala teck
الكاتب : MAHER

مدون عربي صاحب مدونة هلا تك يهتم بكل جديد بعالم التقنية و المعلومات

شارك الموضوع
تعليقات
إعلان