✅ اضافة صندوق المتابعة بالبريد الإلكتروني بخلفية متحركة - روتكس

اضافة صندوق المتابعة بالبريد الإلكتروني بخلفية متحركة

اضافة صندوق المتابعة بالبريد الإلكتروني بخلفية متحركة

السلام عليكم ورحمة الله وبركاته ✋، يصبح صندوق المتابعة بالبريد الإلكتروني في بلوجر إحدى الميزات المفيدة لقراء المدونات للاشتراك في تحديثات المقالات التي سيتم إرسالها مباشرةً عبر البريد الإلكتروني 📧 وأيضًا تعود بفائدة لمالكي المدونات ✌، حيث تعمل علي زيادة عدد قراء المدونات وهو أمر إيجابي 😃.

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

اذا كنت تريد تركيبه يرجي اتباع الخطوات التالية 👇 :

اضافة صندوق المتابعة بالبريد الإلكتروني بخلفية متحركة


1. قم أولاً بتسجيل الدخول إلى بلوجر > اضغط على المظهر ثم تعديل HTML > ثم أضف الكود التالي قبل </head>

<style type='text/css'>
/* Subscribe Box */
@keyframes rotate{100%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
.rainbow{position:relative;z-index:0;overflow:hidden;padding:3px}
.rainbow::before{content:&#39;&#39;;position:absolute;z-index:-2;right:-50%;top:-50%;width:200%;height:200%;background-color:#2ecc71;background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(#2ecc71,#2ecc71),linear-gradient(#fbb300,#fbb300),linear-gradient(#e74c3c,#e74c3c),linear-gradient(#3498db,#3498db);animation:rotate 8s linear infinite}
.rainbow::after{content:&#39;&#39;;position:absolute;z-index:-1;right:5px;top:5px;width:calc(100% - 10px);height:calc(100% - 10px);background:#fff}
#HTML99{padding:0}
#HTML99 h2{color:#222;padding:0}
#HTML99 h2:before{display:none}
.subscribe-wrapper{color:#222;line-height:20px;margin:0;padding:20px}
.subscribe-form{clear:both;display:block;margin:10px auto;overflow:hidden}
.subscribe-wrapper p{margin:0;font-size:14px}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#fff;color:#222;margin:0 0 18px;padding:12px;width:100%;border:1px solid rgba(0,0,0,0.1);outline:0;font-size:14px;text-indent:10px;line-height:20px;border-radius:3px;transition:all .6s}
.subscribe-css-email-field:hover,.subscribe-css-email-field:focus{border-color:rgba(0,0,0,0.3)}
.subscribe-css-button{background:#2c3e50;color:#fff;cursor:pointer;font-weight:500;padding:7px;text-transform:none;width:100%;border:none;font-size:16px;border-radius:3px;transition:all .3s}
.subscribe-css-button:hover{background:#34495e}
</style>

اضغط حفظ

2. توجه الي التخطيط > إضافة أداة > HTML/JavaScript و ضع الكود التالي

<div class='rainbow'>
<div id='subscribe-css'>
<div class='subscribe-wrapper'>
<h2>المتابعة بالبريد الإلكتروني</h2>
<p>اذا اعجبتك مقالات هذه المدونة، فيرجى الاشتراك مجانًا عبر البريد الإلكتروني.</p>
<div class='subscribe-form'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=Rotkx' class='subscribe-form' method='post' onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Rotkx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target='popupwindow'>
<input name='uri' type='hidden' value='Rotkx' />
<input name='loc' type='hidden' value='en_US' />
<input class='subscribe-css-email-field' name='email' autocomplete='off' placeholder='ادخل بريدك الإلكتروني'/>
<input class='subscribe-css-button' title='' type='submit' value='اشتراك' />
</form>
</div>
</div>
</div>
</div>

انتبه إلى الاكواد الذي تم وضع علامة عليهم، واستبدلهم بعنوان feedburner في مدونتك. إذا لم يكن لديك عنوان feedburner، يمكنك زيارة هذا الرابط https://feedburner.google.com/fb/a/myfeeds وإضافة مدونتك.

اضغط حفظ

3. توجه الي المظهر مرة اخري ثم تعديل HTML ثم ابحث عن الكود التالي

&lt;div class=&#39;rainbow&#39;&gt;

كما هو موضح بالصورة التالية استبدل معرف الاداة بهذا المعرف HTML99، علي سبيل المثال كان المعرف HTML1 استبدله بـ HTML99

اضافة صندوق المتابعة بالبريد الإلكتروني بخلفية متحركة

بعد ذلك اضغط علي حفظ، واستمتع بالإضافة. 💪

سهل أليس كذلك؟ 😅 حسناً انتهي الموضوع. ونأمل ان يكون مفيدا! 😍

اذا واجهتك اي مشكلة قم بكتابتها بصندوق التعليقات بالأسفل 💬😊.

إرسال تعليق

إظهار التعليقات

1 تعليقات

  1. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف