الدرس الـ 15 : صندوق الاشتراك معنا بشكل رائع للمدونات

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

1 - خدمة المتابعة أو التسجيل بالبريد الإلكتروني:

صندوق المتابعة بالبريد الإلكتروني لمدونات بلوجر

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

2 - إضافة صندوق المتابعة والإشتراك بالبريد الإلكتروني CSS لمدونات بلوجر:

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

ثم تلصقون الكود التالي داخل الإطار:
مع تعويض AL_M3rfaa بالأحمر بال ID الخاص بخلاصة فيدبرنر الخاصة بمدونتكم (طريقة إعداد ID خاص لخلاصات فيدبرنر)

يجب تغير البريد الالكتروني الخاص بي الي بريدكم انتم "hnasr6222@gmail.com"

بإمكانكم حفظ التغييرات الآن ليتم إضافة صندوق المتابعة بالبريد الإلكتروني لمدونة بلوجر خاصتكم. وأفضل مكان لإظهار الصندوق هو الجانب الأيمن أو الأيسر في الأعلى.<style> #sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjedM0LSR0ovDSwGTIAjoZ8Bzw2d50Jibmg26LUEiYHk4QDSbGe6d28WS9Ve4ZgxXjdHzMtCFhloPbEOWKVpOa03H4ytniift5zZ_oHYivUVRWLLR4DhTsH2QB9YaEiDPhwRzNYW9eYS9v5/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:5px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3vIFWJCzCmWr5WMvVmwezzNSd9xs5h19_jRVSQl4Js14-pHkoal7XDfu9wUB4F7WanUyJwf9hnUSHQsJi1s8IN0HnYPCuSS0KX-U7Pqqc3w8MTxa_X5iZasngEgjnczOw794x1YOb3My_/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;text-align:center;text-transform:uppercase;padding:1px 20px 10px}.sidebar-subscribe-box-form{display:block;clear:both;margin:10px 0}form.sidebar-subscribe-box-form{display:block;clear:both;width:auto;margin:10px 0 0}.sidebar-subscribe-box-email-field{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCa4_CzWlzY1QrGNuvBGWIvbn47axuelUU-nUReqgEtBYtre5ZEOkAB2CIfTpQJFEl0FVkDaqiwqe3q-_vdCjLb7TFJ73VBhfWPoPJ_wyG8EJpuf949cYw0atGGmYsd9-NeBx4HkJyf5Bd/s1600/email-small-logo.png) no-repeat scroll 10px center #fff;color:#444;width:68%;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #ccc;margin:0 0 15px;padding:10px 40px}.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;text-shadow:1px 1px 0 rgba(0,0,0,.4);font-weight:700;width:100%;font-family:verdana;text-transform:uppercase;padding:10px}.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} </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" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=AL_M3rfaa', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input name="uri" type="hidden" value="folfoly" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" onblur="if (this.value==" "){this.value="hnasr6222@gmail.com .. " ;}" onfocus="if (this.value==" hnasr6222@gmail.com .. "){this.value="" }" type="text" value="hnasr6222@gmail.com .. " /><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="أرسل" /></form> </div> </div> </div>