أداة الإشتراك عبر البريد الإلكتروني (شكل احترافي)

السلام عليكم و رحمة الله تعالى و بركاته, إخواني الكرام زوار و متتبعي و محبي هذه المدونة, في هذ التدوينة سنتعرف و إياكم على أداة جميلة و جديدة و الكثير من المدونين يبحثون عنها, و هي عبارة عن صندوق للإشتراك عبر البريد الإلكتروني كما في مدونات الووردبريس, تتميز هذه الأداة بالجمالية و الاحترافية و طريقة تخصيصها بتقنية CSS بعد التعديل عليها لتلائم مدونات البلوجر العربية أنا الآن أقدمها لكم و أرجو أن تنال إعجابكم.

لإضافة هاته الأداة إلى مدونتك المرجو تتبع الخطوات التالية :

• توجه إلى لوحة التحكم في مدونتك و اختر منها » تصميم ثم » إضافة أداة و من النافذة المنبثقة اختر أداة HTML/Javascript.
• انسخ الكود التالي و الصقه داخل الأداة.

<!--- Email Subscribe Widget ---> <style type="text/css">#sidebar-subscribe-box { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4EwCd613T40tdNdCjrYV5mkFb5g6rzOGPUpkNJiPjNnDqRFb0iU5r8ueOd5SedJtmmUvvFN-6N2qlwQtbc6vGOYRvvROQ3kT-TyS_NnsY8w-OMhYJwl_l-40YtTasrQ0UPZMnVV5XKb2N/s1600/colored-strip.png) repeat scroll 0 0 transparent; border: 1px solid #aaa; border-radius: 3px; padding: 3px 0; } .sidebar-subscribe-box-wrapper { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8DACYcI41jU9OBd1nFjZabxnqeivZkqAGy_6mtakNKxBOfaz_9HrJoVQVsLFvZc0VW11_J4ZxyUhS2m1wGw8VQoPbY5kHj6CqzRVtfmTNmIOOFWGYMT0giAvobrkSABIdu3Uumad8cEFi/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7; color: #111; font-size: 14px; line-height: 20px; padding: 1px 20px 10px; text-align: center; text-transform: uppercase; } .sidebar-subscribe-box-form { clear: both; display: block; margin: 10px 0; } form.sidebar-subscribe-box-form { clear: both; display: block; margin: 10px 0 0; width: auto; } .sidebar-subscribe-box-email-field { -moz-border-radius: 4px; -webkit-border-radius: 4px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSSYeUYnPd1b8Wf2L8pJLh8F2OXDC7zhiNFRdUoC7i6hsztPfCT0vDTMi8l4A1eu_h0nxjSFf0_nYiNl7hHo2OH0WDUM2wXVdGKALTSQGV54x2qb6ytLGB_nj166KX7TsD362EnToQn6QO/s1600/sprites.png) no-repeat 0 -27px; border: 1px solid #ccc; border-radius: 4px; color: #444; margin: 0 0 15px; padding: 10px 40px; width: 68%; } .sidebar-subscribe-box-email-button { background: #09f; border: 1px solid #007fff; box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent; color: #fff; cursor: pointer; font-family: Helvetica; font-weight: 700; font-size: 20px; padding: 5px; text-shadow: 1px 1px 0 rgba(0,0,0,.4); text-transform: uppercase; width: 100%; } .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus { background: #1ca4ff; } .sidebar-subscribe-box-email-button:active { -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset; box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset; outline: 0; } iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table { width: 100%; } embed { border-radius: 3px; -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2); background: #FFF; border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0,0,0,0.2); margin: 0; padding: 4px 4px 4px; } #footer-section { background: #f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBeHncyZBJ82uBKLJ3BnJykuSn-MHxE3DCO_zT08RURadZwzbrqm-G6K7LbU-s0WCGsANjv0dEybtJBnbJD-worwnqUCXyzUpiqjAgSN5W6ZRROIPyfa-l5PK4du26X6P85uEmG-_yZtbJ/s0/bg-pattern.png) repeat top left; border-top: 1px solid #aaa; box-shadow: inset 0 4px 6px -3px #aaa; font-size: 14px; height: 100px; margin: 10px -30px 5px; padding: 0 30px; text-align: center; width: 100%; }</style> <div id="sidebar-subscribe-box"> <div class="sidebar-subscribe-box-wrapper"> <div class="sidebar-subscribe-box-form"> <form action="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/eDzmU" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/eDzmU', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="uri" type="hidden" value="rb7ne" /><input name="loc" type="hidden" value="en_US" /> <input autocomplete="off" class="sidebar-subscribe-box-email-field" name="email" placeholder="أدخل بريدك الإلكتروني..." /> <input class="sidebar-subscribe-box-email-button" title="" type="submit" value="اشترك الآن" /></form> </div> المرجو تأكيد البريد الإلكتروني بعد الإشتراك</div> </div>

التعديل على الكود :

• px : لتغيير حجم الأداة.
• http://feedburner.google.com/fb/a/mailverify?uri=blogspot/eDzmU : غير هذا الرابط باسم الرابط الخاص برابط التغذية (الخلاصات)