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

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

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

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

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

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 ثم ابحث عن الكود التالي

<div class='rainbow'>

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

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

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

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