إضافة الإشتراك عبر البريد الإلكتروني بشكل رائع و احترافي

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

صورة الإضافة :

كيفية تثبيت الإضافة :

بعد الدخول الى مدونتك في بلوجر إذهب إلى تخطيط (Layout) ثم اضغط على أداة جديدة و اختار HTML/Javascript و ضع الكود التالي في المكان المخصص له.

الكود :

<style type='text/css'>#sidebar-subscribe-box {     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSWXBI95m17DwKHKDBlbDSPR56idcX8fcjVM_S05LDlInV-XqiGCw981lZ8FjWfE5HFUXxWPRIul0XRo9kDmYCw-qWh3rWQ7QsTysZiyrq6Iat35AMAzkQrPl9vefNhNI2a35Bh85XFclO/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/AVvXsEgkSVAV7p9ufuuRLgOIZxMRyuqOe8u4nALTH9mcF052sr2GRRDiv3Wt_J9wHGpx0RK4NbUzQhffXL7sXlT6-1IWgtTUVPm9GI5W3X0wx1270Or7e_Su6-r17HzGsD14i-xjnp-lVm90jtu4/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/AVvXsEhoHPuDnmgeWLF3Qtu8s4YAPMjVSBZlqnaCg7XqcC8gfBKuFjRg3L6P9q7ledyA4dmOO-DdnhfS04zMlJJHIJVocMifY8v3OuhyxgU8hXoruaGjLbwOkLtG0gIg6xOIUIVYn1A9QBCE9IEn/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/AVvXsEi_20qldScEdEtQyNHyq8Bq3s1vyiKXwmV2UE2bTZEsKmz0PWzDBIVmYbzH9OL_g2jIY_VgeQ1BTA9LAmwKZkN9aRZU8r03IkX9-v0fa9vtWMMTpiEyjtBd3t4av-m_VI4CWxKgBGX8DevH/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"><p> </p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=infoleaders" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=infoleaders', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="uri" type="hidden" value="infoleaders" /><input name="loc" type="hidden" value="en_US" /> <input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="أدخل بريدك الإلكتروني..."/> <input class="sidebar-subscribe-box-email-button" title="" type="submit" value="إشترك الآن" /></form></div>المرجو تأكيد البريد الإلكتروني بعد الإشتراك</div></div>

قم باستبدال infoleaders في الكود باسم حسابك في فيدبيرنر و اضغط حفظ و مبروك عليك الإضافة.
للإشارة فإن infoleaders توجد 3 مرات في الكود.

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

بقلم أيوب الجمال

مدون مغربي مهووس بجديد التكنولوجيا والإنترنيت هدفي مشاركة تجربتي مع باقي رواد النت. للتواصل معي: الفيسبوك . تويتر . جوجل بلس