حصري: صندوق "تابعنا عبر الإيميل" بشكل جذاب css subscription box

سيرا في الخط الذي رسمته مدونة عرب بلس وهو تقديم كل ماهو حصري

نقدم لزوار وأعضاء مدونة عرب بلس الشكل الثاني من صندوق تابعنا عبر الإيميل

هذا الصندوق يتميز بمظهر رائع وجذاب ويعطي جمالية لمدونتك بلوجر

للإشارة هذه أول مة يطرح فيها هذا الستايل

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

والآن نبقى مع الشرح…

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

المرحلة الأولى:

ندخل إلى:

تصميم>عناصر الصفحة>إضافة أداة

نختار أداة HTML/JavaScript

نلصق الكود التالي في الأداة:

<style>
#mbt-sub-box{background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#1a2638));;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #1a2638)}
#mbt-sub-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbt-sub-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbt-sub-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #369A18, #205F0D) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbt-sub-box .submit:hover{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#mbt-sub-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</style>
 
 
<b:if cond='data:blog.pagetype == &quot;item&quot;'>
<div id='mbt-sub-box'><h1>سجل ليصلك جديد المدونة!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ar-plus&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;أدخل بريدك الإلكتروني...&quot;;}' onfocus='if (this.value == &quot;أدخل بريدك الإلكتروني...&quot;) {this.value = &quot;&quot;}' size='30' type='text' value='أدخل بريدك الإلكتروني...'/> <input name='uri' type='hidden' value='ar-plus'/> <input name='loc' type='hidden' value='en_us'/> <input class='submit' type='submit' value='سجل'/></center></form></div>
</b:if>

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

المرحلة الثانية

ضع مكان اللون الأحمر إسمك الخاص بك في  feedburner

بخصوص إسمك على فيدبورنر

مثلا رابط مدونتي على feedburner هو feeds.feedburner.com/ar-plus

إذا إسم مدونتي على فيدبورنر هو ar-plus

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

أخيرا إحفظ الأداة وضعها في المكان الذي تريده ومبروك عليك الإضافة الحصرية الرائعة

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

إنتظروا الشكل رقم 3 في القريب العاجل حيث أنني حضرت لكم 7 أشكال رائعة وجذابة

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

تذكير ليس لك الحق في نقل الموضوع دون ذكر المصدر

ـــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ

أي استفسار أنا موجود

تحياتي