Add
Home

إضافة خاصية الإشتراك عبر البريد الإلكتروني لإضافة Feedburner للبلوجر

author Photo Note
-

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

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

في الأساس ، لقد تم تصميم عنصر واجهة مستخدم الاشتراك في FeedBurner للبريد الإلكتروني. لكن هذا مناسب لأي منصة تدوين تستخدم FeedBurner. تستجيب أداة الاشتراك في البريد الإلكتروني 100٪ . سيكون عليك فقط وضعه في مدونتك ، وسيعمل هذا بشكل جيد. يتم اختبار رموز CSS3 التي استخدمتها هنا والتحقق منها بواسطة w3.org . في هذه المرحلة ، سأوضح لك كيفية إضافة عنصر واجهة مستخدم البريد الإلكتروني FeedBurnet الجميل والأنيق في الشريط الجانبي الخاص بك في Blogger أو أسفل كل مشاركة او اي مكان تريد .
طريقة تركيب خاصية الاشتراك بالبريد الاكتروني مع Feedburner علي البلوجر

كما أخبرتك أن أداة الاشتراك في البريد الإلكتروني لـ Blogger سريعة الاستجابة ، لذلك لا داعي للقلق بشأن حجم الشريط الجانبي لمدونتك . بالطبع ، سيتم ضبط هذه القطعة مع أي الشريط الجانبي. سيكون عليك فقط نسخ الشفرة ولصقها في مدونتك وسوف تضهلا بالحجم المناسب .

سأقدم نمطين مختلفين لعنصر اشتراك البريد الإلكتروني هذا. واحد أحمر ، والآخر أسود . اختر طريقتك المرغوبة وضعها في مدونتك . يمكنك أيضًا إنشاء طريقتك الخاصة عن طريق تعديل بعض أكواد الألوان . فلنرى الآن كيفية إضافة عنصر واجهة مستخدم البريد الإلكتروني الأنيق هذا في 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;}
5. أخيرًا ، انقر فوق الزر "حفظ النموذج". لذلك ، الان لقد قمت بنجاح بإضافة عنصر واجهة صندوق الاشتراك في مدونتك.
النمط 1: نمط مربع الاشتراك الافتراضي هو برتقالي (كما هو موضح أدناه) . لذلك إذا لم تقم بتحرير رموز اللون المميزة ، فستحصل على أداة الاشتراك في البريد الإلكتروني كما هو موضح أدناه :

النمط 2: قم بتحرير كود CSS للحصول على عنصر واجهة صندوق الاشتراك "BLACK" الاسود . في الواقع ، في الرمز أعلاه ، لقد أبرزت خلفية المربع ولون نص الزر ولون خلفية تحويم الزر . لذلك قم بتغيير هذه الألوان لإنشاء أداة الاشتراك في البريد الإلكتروني باللون الأسود .

- قم بتغيير اللون المميز الأول من # f47555 إلى # 333333
- تغيير اللون المميز الثاني من # f47555 إلى # 333333
- تغيير اللون المميز الثالث من # fo3636 إلى # 0066CC

بعد هذه التغييرات ، انقر فوق الزر "حفظ القالب". إذا كنت ترغب في ذلك ، يمكنك تغيير هذه الألوان بالطريقة التي تريدها لمطابقة عنصر واجهة الاشتراك مع مدونتك .
إضافة كود HTML الي التخطيط :

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

1. اختر اي مكان لاضافة كود HTML من خيار ´´التخطيط´´, ثم اختر ´´اضافة اداة´´.
2. سوف تنبثق لك نافذة , اختر خيار ´´HTML/JavaScript´´.
3. اضف الكود التالي مع تغيير ما باللون الاخضر الي معلومات Feedburner الخاصة بك , ثم اعمل حفظ .
<div id="blog-ornate-subscribe"> <h4 class="title">Subscribe via Email</h4> <p class="text">Don't Miss Any Updates, Stay Connected!</p> <form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=BlogOrnate', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email-field" name="email" placeholder="Enter email address" type="text" /> <input type="hidden" value="BlogOrnate" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input class="submit" value="Sign Up Now" type="submit" /> </form> </div>

ليست هناك تعليقات:+

إرسال تعليق