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

ستعمل أداة الاشتراك في البريد الإلكتروني للمدونات على تحويل القراء إلى مشتركين. ألم تقم بإضافة أداة اشتراك البريد الإلكتروني في 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>

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

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

إرسال تعليق