 |
| اضافه صندوق الاشتراك في القائمه البريديه لمدونتك | اضافات بلوجر 2020 السلام عليكم متابعي قناه ومدونه عيون للمعلوميات , اليوم نقدم لكم افضل اداه تساعدك في زياده المتابعين لمدونتك عن طريق اضافه صندوق الاشتراك في القائمه البريديه وكما تعودنا ان نقوم بشرح طريقه تركيب الاداه بطريقه عمليه عن طريق شرح تركيب الاداه نظريا عن طريق الموضوع و عمليا عن طريق الشرح المقدم من خلال قناه عيون للمعلوميات . اضافه صندوق الاشتراك في القائمه البريديه لمدونتك | اضافات بلوجر 2020 |
أولا : ما هي اداه الاشتراك في القائمه البريديه وكيف تفيد مدونتي وتزيد من المتابعين .
اداه الاشتراك في القائمه البريديه كنا قد تحدثنا عنها في درس سابق وهو كيفيه اضافه اداه الاشتراك في الصندوق البريدي للمدونه وتحدثنا عن تعريف صندوق الاشتراك وهو صندوق يقوم الزائر بوضع الايميل الخاص به والاشتراك في القائمه البريديه ليصله كل ما هو جديد عن موضوعاتك التي تقوم بتحديثها علي مدونتك وبالطبع هي اداه مميزه جدا حيث الاداه الاولي التي قمنا بشرحها تكون ثابته في مكان ما في المدونه اما الاداه الجديده التي نقدمها لكم اليوم تظهر للزائر عند الدخول الي المدونه في الصفحه الرئيسيه وايضا تظهر عند اعاده التحميل للصفحه مره اخري وبالتالي تزيد من فرصه اشتراك الزائر في القائمه البريديه الخاصه بك ورؤيه كل مقالاتك الجديده .موضوع مهم :
مميزات الاضافه المقدمه لكم بعد التحديث :
- تظهر بطريقه جيده
- الوان الاداه ملائمه للعين
- لا تضايق الزائر حيث يمكنه اغلاقها ان اراد ذلك
- الاداه شكلها جيد و ملائمه لكل القوالب
كيفيه اضافه صندوق الاشتراك في القائمه البريديه :
طريقه الاضافه لصندوق الاشتراك البريدي سهله جدا حيث ان كل ما عليك هو اضافه بعض الاكواد البسيطه في القالب الخاص بك ثم بعد ذلك تذهب لرؤيه الصندوق بشكله الجيد .
الان سوف نوضح لكم طريقه تركيب الاداه :
- قم بالذهاب الي المدونه التي تريد تركيب الاداه عليها
- قم بالذهاب الي المظهر
- قم باضافه الكود الاول ثم اضغط علي حفظ
- الذهاب الي التخطيط
- قم باضافه اداه 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:'';position:absolute;z-index:-2;left:-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:'';position:absolute;z-index:-1;left: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>
قم بحفظ المظهر ثم قم بالذهاب الي قسم التخطيط و اضافه اداه HTML جديده وقم باضافه الكود التالي
<div class="container">
<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=3yooon' class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=InSEOFree', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="3yooon" ></input>
<input name="loc" type="hidden" value="en_US" ></input>
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="اكتب البريد الكتروني الخاص بك..."></input>
<input class="subscribe-css-button" title="" type="submit" value="اشتراك" ></input>
</form>
</div>
</div></div></div>
</div>
الان عليك ان تقوم بتغيير رابط التغذيه الخاص بمدونه عيون الي رابط التغذيه الخاص بك والذي تركنا رابط لكيفيه الحصول عليه سابقا في اول المقال وقم بحفظ التغييرات والذهاب للتاكد من عمل الاداه