الموقع معروض للبيع، اذا كنت ترغب بشرائه تواصل معنا. متابعة

إضافة زر المتابعة بشكل متحرك في قالب بلوجر جديد 2022

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

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

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

مميزات الإضافة 

  1. تصميم بسيط بواسطة أكواد CSS, HTML فقط. 
  2. يمكنك التحكم بشكل كامل في الإضافة. 
  3. أيقونة SVG
  4. تحتوي على ميزة Animation

خطوات إضافة زر المتابعة في بلوجر

  1. انتقل الى منصة بلوجر
  2. من القائمة الجانبية اختر تنسيق "صفحة التخطيط"
  3. إضافة أداة جديدة HTML / JavaScript
  4. قم بنسخ الكود الموجود في صندوق الأكواد والصقه داخل الأداة واضغط حفظ. 


<style>
.lunabut{bottom:20px;left:20px;position:fixed;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(-60deg,#ff5858 0,#f09819 100%);height:40px;width:40px;z-index:50;border-radius:100%;animation:lunabut-noti 2s 0s ease-out infinite}
.lunabut svg{fill:#fff;width:22px;height:22px;vertical-align:middle}
@keyframes lunabut-noti{0%{box-shadow:0 0 0 0 #f0c27e}75%{box-shadow:0 0 0 16px #f0d5ad}100%{box-shadow:0 0 0 0 #f0eae1}}
.lunarung{animation:luna-rung-lu 2s ease infinite}
@-webkit-keyframes luna-rung-lu{0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}}
</style>

<a class='lunabut' href='https://www.blogger.com/follow.g?blogID=5504246244264345816' style='text-decoration:none' target='_blank' title='noti'>
<svg class='lunarung' viewBox='0 0 24 24'><path d='M15.137 3.945c-.644-.374-1.042-1.07-1.041-1.82v-.003c.001-1.172-.938-2.122-2.096-2.122s-2.097.95-2.097 2.122v.003c.001.751-.396 1.446-1.041 1.82-4.667 2.712-1.985 11.715-6.862 13.306v1.749h20v-1.749c-4.877-1.591-2.195-10.594-6.863-13.306zm-3.137-2.945c.552 0 1 .449 1 1 0 .552-.448 1-1 1s-1-.448-1-1c0-.551.448-1 1-1zm3 20c0 1.598-1.392 3-2.971 3s-3.029-1.402-3.029-3h6z'/></svg>
</a>


لان يجب عليك تغيير ID مدونتي ب ID المدونة الخاصة بك. وفي ختام الموضوع لا تنسى متابعة موقعنا حتى تحصل على كل ما هو جديد وحصري. 

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

هذه الإضافة حصرية بموقع قوالب لونا لذلك عند إعادة مشاركة الإضافة يرجى ذكر المصدر. 

إرسال تعليق

إمتداد ويب © 2021 - 2022