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

 مرحباً بكم يا شباب! كيف حالكم؟ أتمنى أن تكونوا بخير. مرحباً بكم في مقال اليوم على موقع القربعي . اليوم سنناقش كيفية إضافة Sticky Top إلى الزر مع تقدم التمرير؟

    

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

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

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

كيف يعمل شريط التقدم؟

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

لذا دون إضاعة الوقت المهم دعونا نتحقق من كيفية إضافة زر لاصق علوي مستجيب مع تقدم التمرير؟

قبل إضافة هذا، دعنا نرى معاينة

العرض التوضيحي

كيفية إضافة صورة لاصقة متحركة إلى الزر أثناء التمرير في بلوجر؟

هام 
قبل أن نبدأ في إضافة أكواد XML، أوصيك بأخذ نسخة احتياطية من السمة الحالية لديك. بالصدفة، إذا حدثت أي مشكلة، يمكنك استعادتها لاحقًا.

الخطوة 1: أولاً قم بتسجيل الدخول إلى حسابكلوحة تحكم بلوجر.

الخطوة 2: في لوحة معلومات Blogger، انقر فوق "المظهر" .

الخطوة 3: انقر على أيقونة السهم لأسفل بجوار زر " تخصيص ".

الخطوة 4: انقر فوق تحرير HTML ، سيتم إعادة توجيهك إلى صفحة التحرير.

الخطوة 5: ابحث الآن عن الكود ]]></b:skin> أو /*]]>*/</style> والصق أكواد CSS التالية فوقه مباشرة. أو يمكنك لصقه فوق علامة style></style>

/* Reading Progress Bar by Freemium Tech */

  .tTpB{justify-content:center;position:fixed;right:20px;width:45px;height:45px;border-radius:50%;cursor:pointer;visibility:hidden;opacity:0;z-index:9999;transform:scale(0);transition:transform .3s ease,opacity .3s ease,visibility .3s ease,margin-bottom 1s ease}.tTpB.vbl{visibility:visible;opacity:1;transform:scale(1)}.tTpB{bottom:70px}.tTpB:hover{opacity:.8}.tTpB svg{height:100%;width:100%;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;cursor:pointer}.tTpB svg .b{fill:#fff;stroke:#e6e6e6;opacity:.9}.tTpB svg .c{fill:none;stroke:#482dff;stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round}.tTpB svg .d{fill:none;stroke:#08102b}.drK .tTpB svg .b{fill:#2d2d30;stroke:#404045}.drK .tTpB svg .c{stroke:#8775f5}.drK .tTpB svg .d{stroke:#fffdfc}.tTpB{display:flex;align-items:center}

لا تنس تغيير .drK مع فئة الوضع المظلم لموضوع موقع الويب الخاص بك، إذا لم يكن موضوعك يحتوي على ميزة الوضع المظلم، فاحتفظ بالوضع الافتراضي!

الخطوة 6: ثم ابحث عن الكود </body> وقم بلصق أكواد CSS التالية فوقه مباشرة.

<div class="tTpB" id="backTop" onclick="window.scrollTo({top: 0});">

  <svg viewBox="0 0 34 34">

    <circle class="b" cx="17" cy="17" r="15.92"></circle>

    <circle class="c scrollProgress" cx="17" cy="17" r="15.92"></circle>

    <path class="line d" d="M15.07,21.06,19.16,17l-4.09-4.06"></path>

  </svg>

</div>

<script type="text/javascript">

   //<![CDATA[

  	var progressPath = document.querySelector(".scrollProgress");

  	var pathLength = progressPath.getTotalLength();

  	progressPath.style.transition = progressPath.style.WebkitTransition = 'none';

  	progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;

  	progressPath.style.strokeDashoffset = pathLength;

  	progressPath.getBoundingClientRect();

  	progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';

  	var updateProgress = function() {

  		var scroll = document.documentElement.scrollTop;

  		var height = document.documentElement.scrollHeight - window.innerHeight;

  		var progress = pathLength - (scroll * pathLength / height);

  		progressPath.style.strokeDashoffset = progress;

  	}

  	updateProgress();

  	window.addEventListener('scroll', (updateProgress));

  	var offset = 0;

  	var duration = 550;

  	window.onscroll = function() {

  		 if (document.documentElement.scrollTop > offset) {

  			document.querySelector('.tTpB').classList.add('vbl');

  		} else {

  			document.querySelector('.tTpB').classList.remove('vbl');

  		}

  	};

  	document.querySelector('.tTpB').onclick = function() {

  		document.querySelector('html, body').animate(window.scroll({

             top: ['8px', '280px']

                },{ duration: 2500,        // number in ms [this would be equiv of your speed].

                    easing: 'ease-in-out',

                    iterations: 1,         // infinity or a number.

                 // fill: ''

       }));

  		return false;

  	};

  //]]>

</script>

الخطوة 7: ثم احفظه أو انشرها.

تم ذلك! 👍 لقد نجحت في إضافة الجزء العلوي المتحرك المستجيب إلى الزر مع تقدم التمرير.

خاتمة

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

الانتقال إلى الرابط المطلوب

معلومات الكاتب

مصمم

اديب القربعي كنز المعلومات

اضافات اكواد قوالب تحسين محركات البحث مدونات بلوجر