JavaScript is not enabled!...Please enable javascript in your browser

جافا سكريبت غير ممكن! ... الرجاء تفعيل الجافا سكريبت في متصفحك.

اكتب ما تود البحت عنه و اضغط Enter
recent
عاجل
الصفحة الرئيسية

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



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



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


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






شرح التركيب


  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر 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>


ملاحظة

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






و شكرا





author-img

maher

تعليقات
    ليست هناك تعليقات
    إرسال تعليق
      الاسمبريد إلكترونيرسالة