إضافة خاصية الإشتراك عبر البريد الإلكتروني لإضافة Feedburner للبلوجر
ستعمل أداة الاشتراك في البريد الإلكتروني للمدونات على تحويل القراء إلى مشتركين. ألم تقم بإضافة أداة اشتراك البريد الإلكتروني في Blogger حتى الآن؟ في الوقت الحالي ، يستخدم الآلاف من المدونين خدمة الاشتراك في البريد الإلكتروني فيدبورنر . هذه طريقة ممتازة لزيادة عدد الزيارات إلى موقع الويب الخاص بك عن طريق زيادة عدد المشتركين . في الواقع عندما تسمح لقراءك بالاشتراك في مدونتك ، سوف يحصلون على تحديثات مباشرة إلى صندوق بريدهم الإلكتروني باخر مشاركاتك .
سيؤدي ذلك إلى زيادة فرصة الحصول على المزيد من الزوار ومشاركة المستخدم في مدونتك . لذلك من الضروري إعطاء القراء فرصة للاشتراك . ومع ذلك ، إذا كنت بحاجة إلى تمكين اشتراك البريد الإلكتروني على مدونتك ، فستحصل على العديد من الخيارات للقيام بذلك . تتوفر لك العديد من خدمات الاشتراك في البريد الإلكتروني لأطراف أخرى .
خدمة الاشتراك عبر البريد الإلكتروني Feedburner بسيطة ومريحة للغاية للمستخدمين . يجب عليهم فقط وضع عنوان بريدهم الإلكتروني والنقر على زر الاشتراك . بشكل افتراضي ، يبدو نموذج اشتراك البريد الإلكتروني في غاية البساطة. لهذا السبب قمت بتخصيص هذا لجعله أكثر جمالا وجاذبية للمستخدمين . ونتيجة لذلك ، فإن صندوق الاشتراك في البريد الإلكتروني الجذاب هذا سيجذب المزيد من الزوار . وبهذه الطريقة ، ستزيد فرصة تجلب لك المزيد من المشتركين وحركة المرور.
في الأساس ، لقد تم تصميم عنصر واجهة مستخدم الاشتراك في FeedBurner للبريد الإلكتروني. لكن هذا مناسب لأي منصة تدوين تستخدم FeedBurner. تستجيب أداة الاشتراك في البريد الإلكتروني 100٪ . سيكون عليك فقط وضعه في مدونتك ، وسيعمل هذا بشكل جيد. يتم اختبار رموز CSS3 التي استخدمتها هنا والتحقق منها بواسطة w3.org . في هذه المرحلة ، سأوضح لك كيفية إضافة عنصر واجهة مستخدم البريد الإلكتروني FeedBurnet الجميل والأنيق في الشريط الجانبي الخاص بك في Blogger أو أسفل كل مشاركة او اي مكان تريد .
اكواد CSS:
1. تسجيل الدخول إلى حساب البلوجر الخاص بك . انتقل إلى ´´المضهر´´ثم ´´تعديل html´´.
2. سوف تدخل الي محرر html , فعل خاصية البحث وابحث عن الكود ´´]]> </ b: skin>´´.
3. انسخ كود CSS التالي وضعه اعلي الكود السابق :
/* ----------------------------------------------------
Subscription Box Widget RED
Designed by : https://bloggersorigin.com
Do Not Remove this Credits.
-----------------------------------------------------*/
#blog-ornate-subscribe { background: #f47555; padding: 26px; height:auto; position:relative;overflow:hidden;}
#blog-ornate-subscribe h4.title { color: #FFFFFF; font-size: 22px; text-align: center; line-height: 1; margin-bottom: 0; text-transform: uppercase; margin-top:10px; }
#blog-ornate-subscribe p { color: #FFFFFF; margin: 0; text-align: center; }
#blog-ornate-subscribe p.text { opacity: 0.8; margin: 15px 0; }
#blog-ornate-subscribe input { width: 100%; margin: 0; border: none; box-sizing: border-box; box-shadow: none; text-align: center; padding: 10px 0; height: 45px; border-radius: 0; }
#blog-ornate-subscribe input.email-field {
background: #F1F1F1 url(https://2.bp.blogspot.com/-4y1QQv9m4wU/WU1PnBde4rI/AAAAAAAAAFc/RehQ1TyFi0A3mARnOu9KUFUA3G5dnanBgCLcBGAs/s1600/email.png) no-repeat;
background-position: 5px 14px !important;
padding: 10px;
border: 1px solid #CCC;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;
}
#blog-ornate-subscribe input:focus{
background-color: #FFF;
border-color: #E8C291;
outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #E8C291 inset;
box-shadow: 0 0 0 1px #E8C291 inset;
}
#blog-ornate-subscribe input:focus::-webkit-input-placeholder { color: transparent !important }
#blog-ornate-subscribe input:focus::-moz-input-placeholder { color: transparent !important }
#blog-ornate-subscribe input:focus:-moz-input-placeholder { color: transparent !important }
#blog-ornate-subscribe input.submit { font-weight: 500; font-size: 18px; background: #FFFFFF; margin-top: 20px; text-transform: uppercase; color: #f47555; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); cursor: pointer;
border: 1px solid #CCC;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
}
#blog-ornate-subscribe input.submit:hover{background:#f03636;color:#fff;}
التعليقات على الموضوع