إضافة صندوق الإشتراك عبر البريد الالكتروني عائم على مدونة بلوجر

SAMY ELSAGHlR

اخر تحديث :

أهلاً بكم متابعين مدونة الامبراطورية الكرام. كما نعلم أن مربع الاشتراك عبر البريد الإلكتروني يعتبر أكثر جزءًا مهمًا فى المدونة ، لأنه سيؤدي إلى زيادة عدد الزائرين بخلاف الزائرين من الجانب الآخر ، وسيعلم الزائر المشترك عبر البريد الإلكتروني بالمواضيع التى يتم نشرها على الموقع على الفور.لهذا سوف أقدم لكم أضافة صندوق الاشترك بشكل عائم على مدونتك للفت انتباه الزائر اليه.

طريقة تثبيت صندوق الاشتراك العائم على blogger

أولاً ، افتح صفحة المدونة انقر على المظهر ثم انقر فوق الزر تعديل HTML إضافة الكود التالى فوق رمز /body

<div class='subscribebar'>
   <div class='container text-center'>
      احصل على آخر تحديثات المقالة من هذا الموقع عبر البريد الإلكتروني مجانًا!
      <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=ArlinaDesign', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
         <div class='arlina-form-fields'>
            <p>
<input name='email' onblur='if (this.value == "") {this.value = "Email address...";}' onfocus='if (this.value == "Email address...") {this.value = "";}' placeholder='أدخال عنوان بريد الكتروني' required='' type='email'/>
            </p>
<p>
<input type='submit' value='أشتراك'/></p>
<input name='uri' type='hidden' value='ArlinaDesign'/>
            <input name='loc' type='hidden' value='ar_AR'/>
         </div>
</form>
</div>
<button class='closeme' title='Close this message'>✕</button>
</div>
<script type='text/javascript'>
//<![CDATA[
// Floating Subscribe Box
$(document).scroll(function(){$(this).scrollTop()>380?$(".subscribebar").slideDown('fast'):$(".subscribebar").slideUp('fast')});$(document).ready(function(c){$(".closeme").on("click",function(c){$(".subscribebar").fadeOut("slow",function(c){$(".subscribebar").remove()})})});
//]]>
</script>

ثانياً ضع كود CSS التالى فوق رمز/head

<style type='text/css'>
/* Floating Subscribe Box Night */
.subscribebar{box-shadow:0 -2px 7px 0 rgba(0,0,0,.05);position:fixed;bottom:0;left:0;right:0;background:rgba(57,67,77,.98);color:#fff;padding:14px 0;z-index:99;text-align:center;display:none}
.subscribebar form{display:block;margin:0 0 0 10px}
.subscribebar .arlina-form-fields p{display:inline-block;margin-bottom:0}
.subscribebar input[type="email"]{outline:none;background:rgba(255,255,255,.2);color:#fff;font-size:0.85rem;padding:3px 5px 3px 10px;border-top-left-radius:3px;border-bottom-left-radius:3px;border:0;border-right:0;margin-right:-10px;height:34px;letter-spacing:0.3px;transition:all .3s}
.subscribebar input[type="email"]:hover{background:rgba(255,255,255,.3);color:#fff}
.subscribebar input[type="submit"]{cursor:pointer;background-color:#2ecc71;border:1px solid #2ecc71;color:rgba(255,255,255,1);fill:rgba(255,255,255,1);outline:none;font-size:0.85rem;border-radius:0;padding:4px 10px;border-top-right-radius:3px;border-bottom-right-radius:3px;font-weight:500;height:34px;letter-spacing:0.5px;transition:all .3s}
.subscribebar input[type="submit"]:hover,.subscribebar input[type="submit"]:active{background-color:#27ae60;border:1px solid #27ae60;color:rgba(255,255,255,1);fill:rgba(255,255,255,1)}
.subscribebar input[type="email"]::placeholder{color:#fff;opacity:1}
.subscribebar input[type="email"]:-ms-input-placeholder{color:#fff}
.subscribebar input[type="email"]::-ms-input-placeholder{color:#fff}
.subscribebar .closeme{background:transparent;position:absolute;top:18px;right:20px;height:30px;width:30px;bottom:0;padding:0;margin:0;font-size:18px;border:0;text-decoration:none;cursor:pointer;font-weight:bold;color:rgba(255,255,255,.15);border:2px solid;border-radius:99em;outline:none;transition:all .3s}
.subscribebar .closeme:hover{color:rgba(255,255,255,.3)}
@media (max-width:767px){
.subscribebar .closeme{margin:auto;font-size:12px;top:-12px;bottom:initial;height:26px;width:26px;right:20px;border:0;background:#fff;color:#222}
.subscribebar .closeme:hover{background:#e74c3c;color:#fff}
.subscribebar{padding:24px 10px}
.subscribebar form{display:block;margin:15px auto 0 auto}}
</style>

بعد الانتهاء من أضافة الاكواد انقر فوق حفظ المظهر وشاهد النتائج كيف تبدو على مدونتك.